Putting Twitter hovercard pop-ups on your website

Posted in on 16 April 2010

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.

Related Posts

Comments

  1. Stephen Webb

    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.

  2. Clive Walker (Author)

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

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.