Putting Twitter hovercard pop-ups on your website

Update: With recent Twitter API changes, the method described in this post is now deprecated. Sorry 'bout that. Here's the announcement from Twitter.

Twitter has opened its doors a bit more so that you can add its functionality to your website. Its @Anywhere platform allows you to integrate Twitter into your website. Yes, it was possible to add tweets and Twitter data before this but now there's all sorts of new ways to use Twitter functionality including the hovercard user profile pop-ups that you see on the Twitter website.

This link, Clive Walker on Twitter, is an example. The Twitter call can automatically create links for any instances of the username in your text (if you choose to do this) and it will add the hovercard pop-up. In my case, I prefer to create the links myself and set-up the code so that only links with my class = "tweep" are selected. The Twitter username is required of course and this is parsed from the title attribute of the link; images can be linked in a similar way. With a slight variation in code, the username can also be obtained from the text of the link.

Move your mouse over the Clive Walker link to see my Twitter profile information. If you are logged into Twitter at the same time, there is more information and actions (for example, following the user) available to you. Here's a link to the hovercard JavaScript I am using (you'll also need a Twitter API key call in your webpage). I have also added a Twitter icon in my CSS for any link with the "tweep" class, just so it is clear which links have the hovercard treatment.

Of course this is a good thing for Twitter because it will spread Twitter across a wider spectrum of websites. However, since I am mentioning Twitter usernames more and more in blog posts, I reckon the pop-ups add something for me as well.

Info: There's more documentation on the Twitter @Anywhere website. You'll need to sign-up for an API key before you can use the @Anywhere system. I also found this tutorial useful.