Apr 15, 2010

Set twitter hovercard anywhere

I like the twitter Hovercards feature because it shows profile information about a particular user and option to follow or block, whenever hovers over a user name.
I had implemented it with twitter api. Today i found a new cool way to create hovercard on our web page with @anywhere.

Ideas

Twitter @Anywhere is an easy to deploy solution for bringing the Twitter communication platform to your own site.
NOTE : i am describing here just - "Implanting Hovercard"

Code

First goto http://dev.twitter.com/anywhere and get an APIKEY
JavaScript

 <script src="http://platform.twitter.com/anywhere.js?id=YOURAPIKEY&v=1" 

 type="text/javascript"></script>

 <script type="text/javascript">
      // Initialization
     twttr.anywhere(onAnywhereLoad);
     function onAnywhereLoad(twitter) {
        // this is the callback function you specified in your initializer
        twitter.hovercards();
     };
</script>
 

HTML

<p>@<a class="twitter-anywhere-user" href="http://twitter.com/dharmmotyar">dharmmotyar</a> is a Freelancer, Founder and Lead Developer for @<a class="twitter-anywhere-user"  href="http://twitter.com/000labs">000Labs</a>, writes for @<a class="twitter-anywhere-user" href="http://twitter.com/motyar">motyar</a> blog</p>
 

Hovercards will then be enabled on mouseover for all anchor tags matching the default linkify class name, <a class='twitter-anywhere-user'></a>.

To automatically linkify Twitter screen names, use the twitter.linkifyUsers() function in your initializer callback like this -

 function onAnyWhereLoad(twitter) { 

     twitter.hovercards(); 

     twitter.linkifyUsers(); 

  }; 

Demo

Here is the demo, hover the twitter usernames.


@dharmmotyar is a Freelancer, Founder and Lead Developer for @000Labs, writes for @motyar blog

Related Posts

Show your twitter avatar on your page
Create a twitter hovercard with help of api

Labels: Javascript, twitter, Web-service

By : Motyar+ @motyar