Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Putting Twitter hovercard pop-ups on your website

Posted on by Clive Walker in JavaScript Twitter

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

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.

Does your site run on Perch CMS? Hire me to help. Perch CMS Development


  • 20 Apr 2010 09:21:29

    This highlights how Twitter is now really pushing for integration into websites, as it continues to fight for its hold on the market. Functionality like this will be very useful for attaining more followers and spreading your profile over the net.

    In this example I particularly like the Twitter icon placed next to the link text, as this instantly highlights there is an extra function in the site. It is a great way to link to other Twitter accounts and integrate social links into normal website text.

    It will be interesting to see if Twitter develops this technology further and allows you to read the latest posts in the hovercard, as this would be great functionality. I also wonder if Facebook will quickly follow suit, I imagine they will match this technology equally in the near future.

  • 20 Apr 2010 11:03:31

    @Stephen: Thanks for the positive comments re Twitter icon.

Comments are OFF for this post.

© 2024 Clive Walker