Add Twitter to your WordPress blog using @Anywhere. Create a @Anywhere application and integrate Twitter hovercards, follow buttons, tweet box, etc.

Add Twitter @Anywhere to WordPress

Written by in Tutorials |

Twitter @Anywhere

Twitter @Anywhere

Twitter @Anywhere is an easy-to-deploy solution for bringing the Twitter communication platform to your site. …add Follow Buttons, Hovercards, linkify Twitter usernames, and build deeper integrations…

Twitter Developers@Anywhere

Did you know Twitter makes it easy to integrate their features into your WordPress website? Well they do, and it’s called @Anywhere.

With a tiny bit of JavaScript we’ll be able to add Follow Buttons, create those cool Hovercards that popup when you hover over a Twitter name, automatically link Twitter usernames to Twitter and create a live Tweet Box so people can Tweet directly from your website.

Since Twitter is brother to Facebook in the all mighty realm of social media Gods, it’s prudent to make sure your site is well integrated. We’ll be going through a series of simple steps to integrate @Anywhere into your WordPress blog and if you’re a Thesis Theme user, it’s even easier.

Register an @Anywhere Application

First you must register an application to receive your Twitter API key (aka Consumer key). This will allow you to access and make use of the services provided by @Anywhere.

Twitter @Anywhere Application

Twitter @Anywhere Application

Login to Twitter and fill out the application above and then navigate to your new apps settings page and make sure you have the application type set to Read and Write (other options like adding an application icon are optional):

Twitter @Anywhere App Settings

Twitter @Anywhere App Settings

Then navigate to your apps details tab and make note of your Consumer key:

Twitter @Anywhere App Consumer Key

Twitter @Anywhere App Consumer Key

Adding @Anywhere to Your Site

There are quite a few features so first we’ll add the main Javascript and then we’ll go over each individual feature. Place the following code right before the closing </head> tag:

<script src="http://platform.twitter.com/anywhere.js?id=your_consumer_key_here&amp;v=1"></script>

If you’re using Thesis, just go into your Thesis Site Options and under “Additional Scripts” add the preceding code.

Implementing @Anywhere Features

Automatically Link All Twitter Usernames

Any time a Twitter username is mentioned, for instance @designpx, it is auto-magically linked. To do that, simply add the following script right after the main code we previously added:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.linkifyUsers();
  });
</script>

This will link every username on your site. You can specify a certain section, for instance, I don’t want usernames in my header, sidebars and footer to be linked so I need to somehow tell it to only link usernames in my post. I can do that by adding a CSS selector to the hovercards method:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T(".format_text").linkifyUsers();
  });
</script>

The code I added is in red. This will only auto-linkify usernames within the .format_text class.

Hovercards!

Twitter @Anywhere Hovercard (expanded)

Twitter @Anywhere Hovercard (expanded)

Instead of the auto-link code above, use this instead to auto-link and add hovercards:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.hovercards();
  });
</script>

The above code will display a (default) smaller version of the hovercard with just the username and a follow button. In order to display an expanded version (like the one pictured above and used on this site) you must add the following:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.hovercards({ expanded: true });
  });
</script>

Twitter Follow Buttons

These aren’t just any ordinary buttons, they’re smart buttons. The label is dynamically updated to suit the circumstance — if the user is not already following the person, it will allow them to right from your website. If they are, it will say so. Here’s the button in action:


To add it we just add the following script right below any other scripts we’ve been working with:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T('#follow-button').followButton("designpx");
  });
</script>

Remember to replace my Twitter name with yours. Now all we have to do is insert the button where we want it to show up. You do that by placing the following code wherever you want:

<span id="follow-button"></span>

Tweet Box

The Tweet box provides a way for users to Tweet directly from your website. To add it we must first review the different configuration options:

  • counter – displays a character counter. Default is true.
  • height – the height of the Tweet box. Default is 133px.
  • width – the weight of the Tweet box. Default is 515px.
  • label – the title of the Tweet box. Default is “What’s Happening?”.
  • defaultContent – pre-populated tweet content.

Now that we understand the options, all we have to do is add the following code (making changes to suit your purpose) after any other code we’ve been working with:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox({
      height: 100,
      width: 600,
      label: "What do you think of Designpx?",
      defaultContent: "I think @designpx is awesome. Great #WordPress tutorials. Check them out: http://designpx.com/"
    });
  });
</script>

Then, simply add the following code wherever you want the Tweet box to show up:

<div id="tbox"></div>

The above code will display a Tweet box like this:

Check out the @Anywhere documentation to learn more. If you have any questions or need help integrating this into your site, we’re here to help — leave a comment and we’ll do our best.

Enjoy this post? Consider sharing it: