How To: Display Number of del.icio.us Saves
I was browsing through Jonathan Snook’s blog earlier this morning when I noticed something at the bottom of his posts; a link for users to bookmark his posts on del.icio.us with a count of saves. I love stats and rather than going to sleep I decided to investigate this and roll it out on my blog.
At first I went straight to the del.icio.us API page but I quickly found out that the API is mainly user-centered and requires authentication to get data back. A dozen or so searches later I found del.icio.us JSON feeds. With their URL feed all you need to do is craft a request with the MD5 hash of a page URL and in return you get useful information such as top tags and number of saves. The del.icio.us JSON URL page has a brief code example that helps get the point across.
My plan was to incorporate this at the end of each post, so I would need a way to grab the URL of the current page and create an MD5 hash of it. First off, getting the URL. With PHP that’s fairly easy with the server variables array ($_SERVER). If you’re using WordPress, there’s also a template tag you can use to grab the permalink URL. For compatibility reasons I’ll use the straight-up PHP method.
Getting the current page’s URL and creating an MD5 hash of it:
Okay so now we just need to feed that to del.icio.us and give it a callback function name we can use to process the data that del.icio.us returns.
I gave that a callback name of displayCount. The point of a callback is to call a function once the request has been made. So if we ask del.icio.us for some data about a particular URL it will return the data and then call our function, which will process that data in some intelligible way.
function displayCount(data) {
var e = document.getElementById('url-count');
if(data[0]){
e.innerHTML = data[0].total_posts;
} else{
e.innerHTML = 0;
}
}
</script>
We’re almost done. We found a way to retrieve the relevant data we need and process it. Now it just needs to be displayed. As in the JavaScript snippet above, the content will appear within an element with an id of url-count. Here is that implemented in its most basic form:
As recommended in a previous del.icio.us example, I display (loading) text until the JavaScript is able to process the number of bookmark saves. This adds a bit in the way of usability and lets the user know the status of the request. The JavaScript code then later adjusts the HTML value for that element id (url-count in this case). You could even get creative and put up a spinner.gif variant within there.
Putting it all together
When you’re ready to implement this, place each of the three pieces in the following order within your code: HTML (the part with the url-count span/div), JavaScript displayCount() function, and finally the JavaScript polling del.icio.us.
How this is currently implemented on my site.
For finishing touches, just coax the designer inside of you to throw on some CSS styles and push it live.
Issues
Performance-wise, this will add another HTTP request which you want to try to avoid in general. Maybe later on I will explore methods of caching this data, or in the meantime you can explore WEDJE to get rid of the issue when the page load will halt until the JS is done doing its thing.
Update: Now I’m interested in implementing this server-side. Oh and I forgot about the “1 people have saved this” condition, I’ll have to add on to this later.
Update 2: Here’s a server-side method with PHP.
function getCount(){
$hash = md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);
$url = "http://badges.del.icio.us/feeds/json/url/data?hash=".$hash;
$ch = curl_init();
$timeout = 5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$data = curl_exec($ch);
curl_close($ch);
preg_match("/\\total_posts\:([0-9]+)/",$data,$saves);
if($saves[1] == 0){
echo "No one has";
} elseif($saves[1] == 1){
echo "1 person has";
} else {
echo $saves[1]." people have";
}
}
Nifty tip. I’d like to see results from a survey of delicious users that addresses what percentage of users use delicious for mainly personal use rather than publishing to some sort of public “link blog”.
Though I publish my delicious links I treat them often as a personal searchable index of sites I think are important to save for reference and tag them as so.
With a site like delicious where I’d think numbers aren’t the purpose most of the time I wonder if the benefit of all those javascript requests is worth it for the number. Seems possibly overkill. :)
Useful tip there. I still wonder though, if we can achieve this through the del.icio.us feeds. Of course, the moot point is whether we can get the del.icio.us feed URL for the page which displays who all have bookmarked the specific URL.
Nice! You can also use the official Tagometer badge to do this if you aren’t interested in playing directly with the JSON feeds. (Also, when I update the API documentation, I’ll think about adding a note for people looking for non-user-centered stuff…)
Interesting but I am not too keen on implementing it using Javascript I think a serverside solution would be better.
@Arpit: I wrote a bookmarklet a while ago which uses a server-side script to fetch the number of bookmarks,, its not the neatest solution but you might find something of use.
http://foobr.co.uk/2007/03/count_all_delicious_bookmarks/
But after reading this post I might need to update it to use the JSON API :)
If you’re going to use Javascript, why not use FeedBurner’s feed flare scripts? Then you could use the same script and use feedburner to configure it to be delicious saves, technorati links, number of diggs, etc.
They have great instructions for incorporating their script in Blogger, WordPress, Moveable Type, etc. You only have to put it in once and then you can tweak it from their webpage any time afterwards without changing the code. Really elegant.
<script src="http://feeds.feedburner.com/~s/engtech?i=<?php the_permalink() ?>" type="text/javascript" charset="utf-8"></script>
@engtech - That’s what I do, because it’s easy, it works, and I don’t know how to code jack. I just wish they’d let you add an icon or something to each flare item. It would help draw some attention to it, the way it is works, but it looks plain.
Great post! I’m definitely going to have to implement that in my site. I’ve already got the digg functionality and del.icio.us would be icing on the cake. THANKS!
Also, GO JACKETS! Senior @ COM here.
this is a great post! however, i’m trying to figure out how to get a count of ALL links under a domain for a specific url. this posts and others are for a count on a specific url. if you think about it, the popularity of a domain is not only for the front page but for all interior pages of a domain. just like backlink counts for msn, yahoo and google it would be awesome to be able to do this for delicious!
Only works if the looked up page on del.icio.us is the same as the one from which the script is running from.
eg cannot run the script from xyz.com/p.html to show the number of saves of abc.com