Motyar

Freelance Web Developer

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>@<class="twitter-anywhere-user" href="http://twitter.com/dharmmotyar">dharmmotyar</a> is a FreelancerFounder and Lead Developer for @<class="twitter-anywhere-user"  href="http://twitter.com/000labs">000Labs</a>, writes for @<class="twitter-anywhere-user" href="http://twitter.com/motyar">motyar</ablog</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.


@ is a Freelancer, Founder and Lead Developer for @, writes for @ blog

Related Posts

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

Labels: , ,


By :