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.
- Got to the @anywhere site and sign up
- Enter all the details for your site
- 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 theheadof your site. - 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> - Change
link-classin the above to the actual class name of the anchor you want to use a hovercard with. - In the HTML for the anchor add
title="@username"and change ‘username’ to your Twitter screen name. - You’re done.
View a working version in my footer. Yes, down there.
7 responses so far
15th Apr, 2010 at 2:46 pm
15th Apr, 2010 at 7:42 pm
16th Apr, 2010 at 10:05 pm
19th Apr, 2010 at 2:19 am
19th May, 2010 at 7:36 pm
16th Sep, 2010 at 10:18 am
9th Feb, 2012 at 7:22 am