For many of my most popular articles I've written on my website I've tracked Delicious bookmarking totls via their RSS feed they provide on their website. This method works fine for a few articles but I've written 30+ articles over the past year and it's impossible to track them all. So I set out to include a counter next to my "post to Delicious" link at the bottom of each of my articles. This adds a bit more value to the link by letting visitors know the popularity of each of my articles.
I recently started using JQuery on my website so it seemed like the perfect opportunity to dive in and start truly using it. I found out early on that if I was going to use JQuery to fetch my Delicious bookmarks I couldn't use it's AJAX method with XML due to cross site script (XSS) blocking. So I proceeded by using the Delicious JSON API.
Including The JQuery Library from Google's Servers
The first step is to include the JQuery library on my website. I like to use Google's hosted JQuery library when possible as it should offer users a quicker load time than my own site's server. It also allows our users to cache the file should they visit another website referencing the same file on Google's servers. If you worry about your monthly bandwidth bill it will probably save you some money in the long run as well.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Including the MD5 Hash Plugin for JQuery
Next we need to include the MD5 Hash Plugin for JQuery:
<script type="text/javascript" src="jquery.md5.js"></script>
Getting Total Delicious Bookmark Using JQuery And JSON
Below is the major chunk of the code we'll use to get the JSON from Delicious. We use the $(document).ready function to ensure that our page/DOM is full loaded before we manipulate it. You can swap out the URL I have with your own. After that it converts the URL to a MD5 hash which is what Delicious uses. If you check out the resulting file you get from the full path generated you will notice it resembles a JavaScript array. On of the array items is called "total_posts". We can retrieve this value by using data[0].total_posts. You can replace "total_posts" with another array item to retrieve some other piece of JSON data.
<script type="text/javascript">
$(document).ready(function(){
url = "http://www.nealgrosskopf.com/tech/thread.asp?pid=17"
$.ajax({ type: "GET",
dataType: "jsonp",
url: "http://feeds.delicious.com/v2/json/urlinfo/"+$.md5(url),
success: function(data){
if (data.length > 0) {
$("#delicious").text(data[0].total_posts);
}
}
});
});
</script>
<p>Delicious: <span id="delicious"></span></p>
Putting It All Together
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.md5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
url = "http://www.nealgrosskopf.com/tech/thread.asp?pid=17"
$.ajax({ type: "GET",
dataType: "jsonp",
url: "http://feeds.delicious.com/v2/json/urlinfo/"+$.md5(url),
success: function(data){
if (data.length > 0) {
$("#delicious").text(data[0].total_posts);
}
}
});
});
</script>
<p>Delicious: <span id="delicious"></span></p>
To see an example of this in action simply check out the source code of the page you are on.
