Twitter has a cool script you can add to your site to turn any references to a twitter account into a helpful hovercard that shows the twitter user, some stats, and a Follow button. It’s subtle and useful, but it could be a little easier to add for developers.
I won’t repeat what is already available on the docs at Twitter, but the gist is if I put @kpespisa in a post, the @anywhere script will find that and turn it into a hyperlink that shows a hovercard when you put your mouse over the link.
Sadly I noticed there was no simple way to get a hovercard to appear based on the URL of a hyperlink. If I added a link that says “Follow me on twitter”, it would be nice to have the hovercard appear when I hover over that hyperlink as well.
Adding a little jQuery gets the job done. Using this code, you can just set the URL to http://twitter.com/(twitteraccount) and it will create a hovercard for you using the twitter account that is in the URL.
1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
2: <script src="http://platform.twitter.com/anywhere.js?id=AMyKqypXu1r6qmOvc5OZCQ&v=1"></script>
3: <script type="text/javascript">
4: $(document).ready(function() {
5: $("a[href^='http://twitter.com']").add("a[href^='http://www.twitter.com']").attr("title", function() {
6: return '@' + this.href.substr(this.href.lastIndexOf('/') + 1);
7: });
8: });
9:
10: twttr.anywhere(function(T) {
11: T.hovercards();
12:
13: T("a[title^='@']").hovercards({
14: username: function(node) {
15: return node.title;
16: }
17: });
18: });
19: </script>
For example: Follow me on Twitter!
