WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

How to add Twitter @Anywhere Hovercard on WordPress Blog ?

by Aky Joe

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.

anywhere twitter hovercard for wordpress

@Anywhere Twitter Features

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:

step1-create application

Step1: Register an Application

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.

step2-get api key

Step2: Get Twitter API key

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 });

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 [email protected] symbol just like this [email protected] Once done, refresh the website and you will find something similar to the screenshot below:

Twitter Hovercard Demo

Demo: @Anywhere Hovercard Feature

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.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!

1 Comment

{ read them below or add one }

Wordpress plugins March 25, 2012 at 12:32 am

Didn’t know about this plugin at all; I do like it though! 🙂 I even have an instant use for it.


Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...