How To Easily Embed Twitter @Anywhere In Your WordPress Blog

With the rising popularity of Twitter, it is no surprise that more and more bloggers are looking for ways to distribute their content via twitter. With the launch of Twitter @Anywhere, bloggers are now given an easy way to embed the Twitter @anywhere on their blog and allow their readers to quickly post a tweet or to follow the bloggers without leaving the site. If you are still figuring out how to do it, here are several ways that you can do it in WordPress:

Register Twitter API Key

Before you start to do anything, you will have to first register a Twitter API key at http://dev.twitter.com/apps. With the API key, you will be able to embed your @anywhere on your site.

1. Go to http://dev.twitter.com/apps. Sign in with your Twitter username and password.

2. Click on Register a new application

3.  Fill up the form. You can give the application any name you want. There is only one thing to take note: in the Default Access type, select Read and Write.

twitter-register-new-app

4. Once you have register your app, you should see your API key in the next screen. That’s all you need for now.

twitter-api-key

WordPress @Anywhere Plugins

Now that you have gotten your Twitter API key, let’s look at the available plugins that you can use to embed @anywhere to your site.

1. Twitter @Anywhere Plus

This has got to be the most comprehensive @Anywhere plugin in the whole list. It is well implemented and contains the most features. All you need to do is to activate the necessary options in the Settings page and it will automatically configure itself to show up at the right place.

twitter-anywhere-plus

Features that it supports include:

  • Auto linkification: All @username text will be converted to Twitter link
  • hover card: Twitter info will pop you when you hover over the link
  • Tweetbox: Send a tweet right from your site. Useful for retweets feature.
  • Retweet button
  • Follow button
  • Insert custom tweet box with shortcode
  • URL shortening – bit.ly

One thing that is lacking in this plugin is the ability to place code outside the content area. If you want to place a tweet box at your header, footer, or even sidebar widget, this plugin does not allow you to do so.

Pro: Easy to use and it just work.

Con: Not able to embed @Anywhere outside the content area.

2. Anywhere

This is a very basic implementation of @Anywhere. At the moment, it only supports auto-linkification, hover card and Tweetbox.

twitter-anywhere

Like the Twitter @Anywhere Plus plugin, you can customize your Tweetbox to appear before or after content. There is also the manual option that allows you to place tweetbox anywhere within the content, but there is very little documentation/instructions on how to use it.

Pro: Simple

Con: Limited features and lack of usage instructions

The Hacker Way – Adding the @Anywhere code manually

There are many reasons why adding the Twitter @Anywhere code manually is a better idea than using a plugin:

1. Lesser overhead, using lesser system resources.

2. It is easy to implement. Even any newbies can do it on their own.

3. You can customize it to appear anywhere you want in the site. It is not restricted to the content area only.

Adding the javascript

Open your theme functions.php file and paste the following code to the end of the file.

$api_key = "Replace with your API key";
wp_enqueue_script("twitter-anywhere", "http://platform.twitter.com/anywhere.js?id={$api_key}&v=1");
add_action("wp_head", "twitter_anywhere");
 
function twitter_anywhere()
{
        echo '<script type="text/javascript">';
	echo 'twttr.anywhere(onAnywhereLoad);';
	echo 'function onAnywhereLoad(twitter) { twitter.hovercards(); }';
	echo '</script>';
}

Save and upload to your server. You have just implemented the Hover cards feature in your site.

To add a Tweet box, paste in the following code at the location where you want the Tweet box to appear.

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox({
      height: 100,  //change the height
      width: 400, //change the width
      defaultContent: "Place your tweetbox content here"
    });
  });
</script>

Isn’t it easy?

A quick trick: Adding hover card to your Twitter icon

If you have a Twitter icon on your site, you can embed a hover card to it.

twitter-image-hovercard

In the above code, replace the function twitter_anywhere() code with the following:

function twitter_anywhere()
{
        echo '<script type="text/javascript">';
	echo 'twttr.anywhere(onAnywhereLoad);';
	echo 'function onAnywhereLoad(twitter) { twitter.hovercards(); twitter("#hovercard").hovercards({username: function(node){return node.title;}}); }';
	echo '</script>';
}

Next, add in the attributes id=”hovercard” and title=”@your-twitter-username” to your Twitter icon. It should look like

<img src="url-to-twitter-icon" id="hovercard" title="@your-twitter-username" />

For more information, check out the Twitter @Anywhere documentation for more detail.

Did you embed Twitter @Anywhere to your site? If yes, which ways do you use?

Do you like what you read here?

Receive the latest update in your inbox.

Or connect with us: