Screencasts

Creating a Delicious Counter with jQuery

Download Files ↓

Show Notes

Sometimes it's nice to show how many times a page has been bookmarked on Delicious. In this screencast we'll show you how. We'll use HTML5 to help compliment the client side scripting to find out how many times each page has been bookmarked.

We'll be building on top of what we did in the Improving the Delicious Bookmark Button with jQuery screencast.

Links

What you'll learn

  • How to build JavaScript Delicious Bookmark counter with jQuery
  • How to use the Delicious JSON API
  • How to MD5 links for the Delicious API in Ruby on Rails and PHP
  • How to use HTML5's Custom data-*Attributes

MD5 Hashes

Introduction to jQuery: 67077b082dd4a16d289b5e9b38c6f378

Using AJAX with jQuery: c2db344daf466f3880a063b0828d530c

Script

Welcome to this follow up screencast to Improving the Delicious Bookmark Button with jQuery. Be sure to watch that screencast first to familiarize yourself with where we are in the project. In this episode we'll be building on what we started there. Feel free to download the source code below this video on Screencasts.org.

Creating a Counter

Sometimes it's nice to show how many times a page has been bookmarked.

Delicious has provided an API for developers to get a range of information from its service.

The API URL we'll be using is http://feeds.delicious.com/v2/json/urlinfo/{url md5} where {url md5} is the MD5 digest of the URL you want information on.

HTML5 Custom Data Attributes

We're going to use a feature of HTML5 called custom data-* attributes. HTML5 allows us to decorate our HTML elements with supporting data.

A data attribute is defined by writing data- followed by a the name of the data you want to store. In our case we want to create a data atribute data-md5-url. The value of this attribute can be generated on the server-side using Ruby or PHP just like we did with the URL-encoded URLs and titles.

In Ruby on Rails we could make a helper like this:

module ApplicationHelper def md5_url(article) Digest::MD5.hexdigest(article_url(article)) end end

Then in the view, we'd add this:

= link_to "Bookmark on Delicious", "http://www.delicious.com/save?v=5&noui&jump=close&url=#{URI.escape(article_url(@article))}&title=#{URI.escape(@article.title)}", :class => "delicious", :"data-md5-url" => md5_url(@article)

Or in PHP, it would look like this:

<?php echo " Bookmark this on Delicious" ?>

If you want the MD5's for these two URLs and you don't have access to server-side scripting, they're available in the show notes.

Introduction to jQuery: 67077b082dd4a16d289b5e9b38c6f378 Using AJAX with jQuery: c2db344daf466f3880a063b0828d530c

So let's copy and paste the two MD5 hashes of the URLs into the data-md5-url attribute.

Now that we've got those, let's now use jQuery to iterate over the links and submit an AJAX request for each link.

To access the data attributes in jQuery, all you need to call is .data() with name of your attribute, minus the data-. So in our example we need .data("md5-url").

$("a.delicious").click(...).each(function(){ $(this).data("md5-url"); });

Now let's paste in the URL from the Delicious API, prepend it to the MD5 of the URL, and cache it as a variable named url. We'll also add a callback parameter, and pass in the name of the function that we want to pass the JSON data to. Let's call this function updateDelicious

$("a.delicious").click(...).each(function(){ var url = 'http://feeds.delicious.com/v2/json/urlinfo/'+$(this).data("md5-url")+'?callback=updateDelicious'; });

Next let's add the AJAX call with the dataType of JSONP, since this is JSON with padding and is cross domain.

$("a.delicious").click(...).each(function(){ var url = 'http://feeds.delicious.com/v2/json/urlinfo/'+$(this).data("md5-url")+'?callback=updateDelicious'; $.ajax(url, {dataType:"jsonp"}); });

We're almost there now. Next, we need to implement the updateDelicious function.

function updateDelicious(data) { }

We need to know what the data will look like when it gets returned from the Delicious API.

[ { "hash": "67077b082dd4a16d289b5e9b38c6f378", "title": "Introduction to jQuery - Free Quality Screencasts by Screencasts.org", "url": "http:\/\/screencasts.org\/episodes\/introduction-to-jquery", "total_posts": 7, "top_tags": { "jquery": 7, "screencast": 5, "screencasts": 2, "coding": 2 } } ]

So the Delicious API returns an array of key-value pairs, or hashes. From what we've seen, you'll only have one entry in the array. When you pass in an MD5 of a URL that hasn't been bookmarked, you get an empty array. So first we need to check the data size to make sure it's larger than zero. So if(data.lenth != 0) then we need to update our count for each link.

function updateDelicious(data) { if(data.length != 0) { } } ...

In the JSON we get back, you'll see that we have the MD5 hash along with total_posts.

So we're going to have multiple AJAX requests coming in, and we need to know how to match each link with its count. To do this, we can use jQuery's Attribute Equals Selector to match the hash returned from the Delicious API to the data-md5-url .

So we need to use the hash data[0].hash (data at index 0, .hash) and then try and find it in the anchor with the data-md5-url of that MD5 hash. Then we append the data[0].total_posts to the link.

... function updateDelicious(data) { if(data.length != 0) { $("a[data-md5-url='"+data[0].hash+"']").append(" - " + data[0].total_posts);
} }

So when we open the page in our browser now, we can see the count appearing at the end of our bookmark link.

And that's it!

We’re going to be covering more APIs for various web services and social networks in upcoming episodes, so be sure to check back soon.

Thanks for watching! Subscribe to our RSS feed, follow us on Twitter, and please leave any questions, comments or suggestions for new screencasts in the comments below. If you like our videos, and think your friends, followers or colleagues would benefit from seeing them, please feel free share via any of the links below the video. We really appreciate your support.

See you next time!

← Latest Episodes

blog comments powered by Disqus