How To Get Digg, Delicious and Tweet Counts Using jQuery

February 24th, 2010 by Saud Khan in Code
Tags: API, Delicious, Digg, JavaScript, jQuery, JSONP, Tutorial, Twitter

Majority of online services allow you to access some of their data through public API methods. Unfortunately most of the data formats served by these APIs can only be accessed using server side code. This is mainly due to JavaScript’s same origin policy, which restrict it from loading data from remote sites.

Luckily, some providers can respond to our requests in JSONP format – which is perfect solution for loading data from remote sites using JavaScript. Since jQuery’s getJSON() method can also load data in JSONP, we can use it to achieve our objective. If this is true, it should be pretty simple – well it really is. The only difficult part is digging through provider’s API documentation, to see if it supports JSONP.

In this brief tutorial, I am going to show you how to programmatically get Digg, Delicious and Tweet counts for a specific URL using jQuery. You will be able to style this data however you like using CSS. And the best part is that you can do this without depending on any server side code.

Lets Start

I am assuming that you have sufficient CSS skills to style your own counters, and have basic understanding of how to add jQuery code into your pages. Lets start with following HTML page containing very simple markup.

<html>
<head>
<title>Get Digg, Delicious & Tweet Counts Using jQuery</title>
</head>
<body>
<h2>Share / Bookmark</h2>
<ul>
    <li><a href="http://digg.com/submit" id="digg">Digg</a></li>
    <li><a href="http://delicious.com/save" id="delicious">Delicious</a></li>
    <li><a href="http://twitter.com/" id="twitter">Twitter</a></li>
</ul>
</body>
</html>

The only thing you need to note is the presence of “id” attribute in each anchor tag. We will use these to select link’s text when appending counter to it.

Now lets add following code between <head> . . . </head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    url = "http://www.w3avenue.com/";
    beforecounter = " [<b>";
    aftercounter = "</b>]";

</script>

This covers basic requirements, i.e., including jQuery library and a function that will execute when the DOM is fully loaded. Inside the function we have added three variables:

First variable is “url”, which is a required value. This is URL of the page for which you need to retrieve counter(s).
The other two variables: beforecounter and aftercounter are optional, and may be used to add extra text (or markup) around the counter.

After assigning values to these variables, you will need to add following code snippets to get your counter data.

Get Number of Diggs

Digg has pretty good API and offers several response types: XML, JSON, and JavaScript. We are going to use “javascript” response type with story.getAll method to get total number of Diggs for our story.

        $.getJSON('http://services.digg.com/1.0/endpoint?method=story.getAll&amp;link='+url+'&amp;type=javascript&amp;callback=?',
            function(data) {
                $('#digg').append(beforecounter + data.stories[0].diggs + aftercounter);
        });

Get Number of Delicious Bookmarks

Delicious provides read-only data feeds in several formats (including RSS and JSON) for bookmarks and other information. We are going to use “http://feeds.delicious.com/v2/json/urlinfo/data” feed to get total number of Delicious bookmarks.

        $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&amp;callback=?',
            function(data) {
                $('#delicious').append(beforecounter + data[0].total_posts + aftercounter);
        });

Get Number of Tweets

You can get number of tweets from more than one providers. Following code snippets shows you how to get total number of tweets from TweetMeme and Topsy.

Using TweetMeme API

        $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&amp;callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.story.url_count + aftercounter);
        });

Using Topsy API

        $.getJSON('http://otter.topsy.com/stats.js?url='+url+'&amp;callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.response.all + aftercounter);
        });

NOTE: You only need to add one of these methods in your code to get number of tweets for your web page.

Complete Code

That’s it – we are done. This is how your complete code will look like:

<head>
<title>Get Digg, Delicious & Tweet Counts Using jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        url = "http://www.w3avenue.com/";
        beforecounter = " [<b>";
        aftercounter = "</b>]";

        // Get Number of Diggs
        $.getJSON('http://services.digg.com/1.0/endpoint?method=story.getAll&link='+url+'&type=javascript&callback=?',
            function(data) {
                $('#digg').append(beforecounter + data.stories[0].diggs + aftercounter);
        });

        // Get Number of Delicious Bookmarks
        $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&callback=?',
            function(data) {
                $('#delicious').append(beforecounter + data[0].total_posts + aftercounter);
        });

        // Get Number of Tweet Count From TweetMeme
        $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.story.url_count + aftercounter);
        });

/*
        // Get Number of Tweet Count From Topsy
        $.getJSON('http://otter.topsy.com/stats.js?url='+url+'&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.response.all + aftercounter);
        });
*/
    })
    </script>
</head>
<body>
<h2>Share / Bookmark</h2>
<ul>
    <li><a href="http://digg.com/submit" id="digg">Digg</a></li>
    <li><a href="http://delicious.com/save" id="delicious">Delicious</a></li>
    <li><a href="http://twitter.com/" id="twitter">Twitter</a></li>
</ul>
</body>
</html>

When adding your own CSS or other markup, you should always keep in mind how it will degrade when JavaScript is turned off.

Hopefully you have found this brief tutorial useful. Feel free to share your opinion and suggestions in the comments.

mupet says:

February 25, 2010 at 1:59 am

Great tutorials, how about stumbleupon count? In the next post it will be great if you post about how to retrieve twitter follower count and RSS feed count without any plugin. I’m looking for this tutorial:D

Saud Khan says:

February 25, 2010 at 2:09 am

Thanks Mufti,

Here is code snippet to get Twitter Followers:

$.getJSON('http://twitter.com/users/'+twitterusername+'.json?callback=?', function(data) { $('#twitter_followers').text(beforecounter + data.followers_count + aftercounter); });

Hopefully this will help.