How to add Twitter @Anywhere Hovercard on WordPress Blog ?

Keeping itself active in Social Media World, Twitter has its development kit ready for your WordPress Blog. Just like the facebook like button, twitter now allows to integrate their features on WordPress website. The feature is known as @Anywhere, and can be implemented using a few lines of JavaScript Code.

In the article, we will learn to implement @Anywhere feature and add twitter hovercard on WordPress blog. I should not make you wait, just follow the simple steps below:

Step1: Register Twitter Application

In order to integrate @anywhere feature on website, you will be required to register an application. On register an @Anywhere application page you will have to fill-in details for Name of the Application, Website URL etc. You can also refer to the screenshot below:

Submit the Application by clicking Register Application button, and further it will be redirected to the application page. In this page, you will find all details about the Application like API key and Registered Callback URL, similar to the screenshot below.

Keep the API key of twitter application handy, as we will be using it in Step2.

Step2: Adding @Anywhere in WordPress

To add @Anywhere feature in WordPress blog, twitter provides a Javascript code which should be placed in HEAD Tag in header.php file. Incase you are using Thesis Theme then you can add the code using Thesis Site Options. (If you are concerned about Page Load time, then you can also add code right before the closing of BODY Tag in footer.php file.)

Below is the twitter @anywhere code snippet, which you can add it in your Custom Theme or Thesis WordPress theme. Make sure you take backup of Header.php or Footer.php before adding the code snippet.

<script src="http://platform.twitter.com/anywhere.js?id=YOUR-API-KEY-GOES-HERE&v=1"></script>
<script type="text/javascript">
 twttr.anywhere(function (T) {
 T.hovercards({ expanded: true });
 });
</script>

For Thesis Theme you and paste the above code in Site Options under “Stat and Tracking Scripts”.

Once you have added the code, it will enable Twitter username Auto linking and Hovercard feature on your website, that is, it will auto link Twitter usernames anywhere on website, to their twitter profiles. For instance, you can add Text Widget and put twitter username  with “@” symbol just like this “@akyjoe”. Once done, refresh the website and you will find something similar to the screenshot below:

We’re done

@Anywhere Hovercard feature can be effective, if there is a twitter feed on your website. As twitter feed will contain usernames which will be auto linked and will display twitter profile by Hovercard feature.

What do you think about @Anywhere Hovercard feature ? You can share your opinions here by posting a comment below.

If you have any query or further assistance is required, post comment as your feedback.