Journal / Add a Twitter @anywhere hovercard to any text or image

Twitter have released @anywhere to the public which, at its most basic, allows site owners to automatically add bubbles to @username text which displays a follow button and user info. Twitter are calling these hovercards. I wanted to add a hovercard to the ‘Follow me on Twitter’ link in my footer but I didn’t want to change my text to include my username, so I had to dig into the documentation to find out how. I’m a designer who struggles with development, so it took me a bit of trial and error to get this right, so I thought I’d post it to help other non-developers.

  1. Got to the @anywhere site and sign up
  2. Enter all the details for your site
  3. Take the first line of code the site will give you. It looks like
    <script src="http://platform.twitter.com/anywhere.js?id=XXXXXXXXXXXXX&v=1"></script>
    and add it into the head of your site.
  4. Directly underneath that, paste this code:
    <script type="text/javascript">
    twttr.anywhere(function(twitter) {
    twitter("a.link-class").hovercards({
    username: function(node) {
    return node.title;
    }
    });
    });
    </script>
  5. Change link-class in the above to the actual class name of the anchor you want to use a hovercard with.
  6. In the HTML for the anchor add title="@username" and change ‘username’ to your Twitter screen name.
  7. You’re done.

View a working version in my footer. Yes, down there.

5 responses so far

  1. Connor Turner

    15th Apr, 2010 at 2:46 pm

    Andy,

    thank you so much for this tutorial. Thank you for taking the plunge and writing up a tutorial, so useful.

    Well done man.

  2. Clive Walker

    15th Apr, 2010 at 7:42 pm

    Thanks for this. I wanted to do something similar with links and this really helped.

  3. Rustin

    16th Apr, 2010 at 10:05 pm

    Ahhh, thank you. I don’t know why it happened this way, but the snippets I got from dev.twitter.com didn’t work and yours did. A few small differences, but I don’t know enough about JS to know why.

    Thank you!

  4. Joe Doyle

    19th Apr, 2010 at 2:19 am

    Your sharing is why you rule. Thanks, Andy.

  5. Maverick

    19th May, 2010 at 7:36 pm

    Ahhh, thank you. I don’t know why it happened this way, but the snippets I got from dev.twitter.com didn’t work and yours did. A few small differences, but I don’t know enough about JS to know why.
    +1

Leave a comment