Cool Tweet/Twitter Follower Counter Using jQuery ~ Web Speaks

Cool Tweet/Twitter Follower Counter Using jQuery

In the current time of social networking social bookmarks have become lifeline of any website that needs to attract traffic ( including webspeaks.in :P). Everyone wants to show the number of subscribers/follwers of is/her site. This task has been oversimplified by jQuery, where a single line of code can ease your life a lot. In this post I am showing how to display 'Number of tweets' and 'Number of Twitter followers of your
website'. Lets watch how does it work?

Live Demo Download Script

jQuery Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    url = "http://www.webspeaks.in/2010/07/create-pdf-file-with-php.html";

    // Get Number of Tweet Count From TweetMeme
    $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&callback=?',
    function(data)
    {
        $('#twit').html(' Tweets : [' + data.story.url_count + ']');
    });
    
    // Get Number of Twitter Followers From Twitter.com
    twitterusername = 'arvind_bh';
    $.getJSON('http://twitter.com/users/'+twitterusername+'.json?callback=?',
    function(data)
    {
        $('#twitflw').html('Twitter Followers : [' + data.followers_count + ']');
    });
})
</script>

HTML Code

<html>
<head>
<style>
a {    color:#C0C; font-size:18px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; text-decoration:none; }
</style>
</head>
<body>
<div style="border:2px solid #C0C; margin:20px;">
    URL : <a href="http://www.webspeaks.in/2010/07/create-pdf-file-with-php.html">
http://www.webspeaks.in/2010/07/create-pdf-file-with-php.html</a><br/><br />
<ul>
    <li><a href="http://twitter.com/" id="twit"></a></li>
    <li><a href="http://twitter.com/arvind_bh" id="twitflw"></a></li>
</ul>
</div>
</body>
</html>