Efficiently Getting Delicious Save Count of Your Posts

Although there are many sites that describe how to get Delicious bookmaking count of some URL. I learned that you can get the save counts of multiple URL's in one request! And since I didn't see that mentioned anywhere -even on Delicious feeds API page- I thought I should do..

To achieve this hack, we load JSON data from "http://feeds.delicious.com/v2/json/urlinfo" and pass multiple "hash" parameters of the desired URL's instead of using "url" parameter which didn't accept multiple entries. and the returned JSON array will hold information about all requested URL's -that were saved on Delicious for one time at least.

To calculate the MD5 hash of each URL, I used MD5 script by Paul Johnston as in the Delicious Tagometer. After minifying it using with YUI Compressor to shrink file size to the half (~6KB).

DEMO!

Check JSON data array for the 2 URL's returned from 1 request.
Inspecting page requests with Firebug

First, Place HTML link for each post
- Next to each post, we will add anchor tag with class "delicious-save" that links to "http://delicious.com/save", so It would degrade gracefully to a simple bookmaking link when Javascript is disabled.
- Will store post URL in "rel" attribute and post title in "title" attribute!
<a class="delicious-save" href="http://delicious.com/save"
   rel="http://www.moretechtips.net/2010/07/quite-delicious-button-jquery-plugin.html"
   title="Quite Delicious Button - A jQuery Plugin">
   Save on Delicious
</a>

Second, Include Javascript files of jQuery and MD5 once
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="md5-min.js"></script>


Finally, Include This script
It starts by collecting URL's of all anchors from "rel" attribute and create MD5 hash for each one.
Query JSON data from Delicious feeds then find the save count for each anchor to append it to anchor text.

// When DOM is fully loaded
$(document).ready(function(){
   // init urls array
   var urls = [];   
   // Get all links with class "delicious-save"
   var tags = $('a.delicious-save');
   // loop links to collect all URLs
   tags.each(function() {
      // URL is saved in rel attribute of each A link
      var url = $(this).attr('rel');
      // Add URL to array if not there
      if( $.inArray(url, urls)==-1) urls[urls.length] = url;
   });
   
   // create MD5 hash for each URL
   var hashs = [];
   for(var i=0,c=urls.length; i<c; i++) hashs[i]= hex_md5(urls[i]);
   
   // Call Delicious API once for all URLS
   $.ajax({url:'http://feeds.delicious.com/v2/json/urlinfo'
      ,data:{'hash':hashs}
      ,dataType:'jsonp'
      ,success:function(json) {
         // Code that will be executed when call is completed with success
         // json is the JSON array that will contain saves count for each link
         
         // Now, loop A links to append number of saves
         tags.each(function() {
            // This A link
            var a = $(this);
            // URL of each A link and title
            var url = $(this).attr('rel');
            var title= $(this).attr('title');
            // Delicious save URL
            var saveUrl='http://delicious.com/save?v=5&url='+encodeURIComponent(url)+'&title='+encodeURIComponent(title);
            
            // Init number of saves
            var n= 0;
            // looping results array to find saves count of each link
            for(var i=0, c=json.length; i<c; i++) {
               if(json[i].url==url) {
                  // found saves count for this url
                  n = json[i].total_posts;
                  break;
               }
            };
            // append number of saves to inner HTML of A
            a.append(' '+'<'+'span'+'>('+ n +')<'+'/span'+'>');
            // Set its href to the complete Delicious save URL
            a.attr('href',saveUrl);
         })
      }
   })
});

That was a quick hack I learned from Delicious Tagometer while working on my latest jQuery plugins "Quite Delicious Button". If you are looking for a complete Delicious save button then you should check that plugin.

Tags: AJAX , javascript , jQuery , jQuery Tutorial , JSON , RESTful , Social Bookmarking , Tech Tips