Mar 16, 2010

Create twitter hover card with twitter api.

Hovercards is the new Twitter feature shows profile information about a particular user whenever hovers over a user name. Each Hovercard displays the person's name and location.
Today i am with you to show how we can create own twitter hover card with help of CSS, twitter api and JavaScript.

-->

The Idea

As you know twitter provides api to fetch user profile details, you can show our latest tweet OR can show your avatar(Profile Image) on your web pages.
We are using CSS for Design, Javascript and Twitter api for user profile details like username, latest tweet, follower count etc.
Here my Twitter profile card aka Twitter hover card -

Code

HTML

 <script src="twitter_hover_card.js" type="text/javascript"></script>
 <div id="hovercard"></div>

<script type="text/javascript">
showhovercard("your_twitter_id");
</script> 

The hovercard is the target div where your HOVERCARD will be shown.
JavaScript

function makecard(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var followers_count = twitters[i].user.followers_count;
    var profile_image_url = twitters[i].user.profile_image_url;
 var url = twitters[i].user.url;
 var followers_count = twitters[i].followers_count;
 var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<div style="font-family:\'Helvetica Neue\',\'Helvetica\',\'Arial\',sans-serif;font-size:13px;border:4px #DDDDDD solid;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px 10px 10px 10px;width:255px;height:300px;"><div style="margin-right:1px;height:63px;width:50px;float:left;" ><img src="'+profile_image_url+'" /> </div><div style="width:170px;margin-right:20px;float:right;"><strong><a href="http://twitter.com/'+username+'">'+username+'</a><br /></strong>'+twitters[i].user.name+'<br />'+twitters[i].user.location+'<br /><br /></div><b>Web:</b> <a href="'+url+'">'+url+'</a><br /><br /><b>bio: </b><span id="bio">'+twitters[i].user.description+'</span><br /><br /><b>Latest Tweet: </b><span id="status">'+status+'</span><br /><br /><div style="padding:5px 0 0 0;width:100%;height:40px;"><div style="text-align:center;margin-right:2%;float:left;width:22%;height:40px;"><b><span id="tweets">'+twitters[i].user.statuses_count+'<span></b><br/>tweets</div><div style="text-align:center;margin-right:2%;float:left;width:22%;height:40px;"><b>'+twitters[i].user.friends_count+'</b><br />following</div><div style="text-align:center;margin-right:2%;float:left;width:22%;height:40px;"><b>'+twitters[i].user.followers_count+'</b><br />followers</div><div style="text-align:center;margin-right:2%;float:left;width:22%;height:40px;"><b>'+twitters[i].user.favourites_count+'</b><br />favourites</div></div></div>');
  }
  document.getElementById('hovercard').innerHTML = statusHTML.join('');
}

function showhovercard(username){
var src1 = "http://twitter.com/statuses/user_timeline/"+username+".json?callback=makecard&count=1";
var s1 = document.createElement('script');
s1.setAttribute('src',src1);
document.getElementsByTagName('head')[0].appendChild(s1);
}

Function showhovercard calls the api for given twitter user, function makecard makes the and designs the data and show in the target div.

Demo

You can see it in action here.

Labels: Javascript, twitter

By : Motyar+ @motyar