Background Concept
Delicious was founded by Joshua Schachter in 2003 and acquired by Yahoo in 2005. This website was formerly used to run in the domain http://del.icio.us hence known as del.icio.us. Now, this domain redirects to the domain http://delicious.com. This website got redesigned in July 2008 and the Delicious 2.0 went live with new domain, design and name.
Delicious is probably one of the largest social bookmarking website in the WWW world for discovering, sharing and storing the interesting and useful URL on the Internet. When saving the URL, user can enter tags for the URL which is quite useful when you’ve to search the particular URL from many bookmarks. The number of saves of a particular URL in Delicious is one of the measurements for checking popularity of that URL.
Delicious Tagometer
As the name specifies, Delicious Tagometer is a badge which displays the tags as well count of the users who have saved the particular URL.
Tagometer gets displayed in the web page which contains the code given below:
<script src="http://static.delicious.com/js/blogbadge.js"></script>
This is the new URL of the Tagometer badge from the Delicious. The URL for the Tagometer used to be different in the del.icio.us domain in past. For more information on future updates, you can check http://delicious.com/help.
The delicious Tagometer looks as shown:
As you can easily guess, the above Tagometer is placed on a web page whose URL has not yet been saved in Delicious.
Now let’s take a look at the Tagometer which is placed on a web page whose URL is saved by many users of Delicious.
In the above widget, the text “bookmark this on Delicious” is the hyperlink for saving the URL in delicious.
To save an URL in Delicious, you have to provide the URL and give a Title on the http://delicious.com/save page.
After clicking on the “bookmark this on Delicious” hyperlink on the Delicious Tagometer widget you can see the image of the web page on delicious.
The Delicious Tagometer widget also shows the list of tags which are used by the users of Delicious to save the URL. Each of these tags link to a tag specific page of Delicious. For example, an URL saved with tag JavaScript can be found on the page http://delicious.com/tag/javascript.
And, the number is linked to the URL specific page on Delicious. For example, if you wish to view the users and their notes on the saves of the URL- http://digg.com, then the URL of delicious will be http://delicious.com/url/926a9b7a561a3f650ff41eef0c8ed45d
The last part “926a9b7a561a3f650ff41eef0c8ed45d” is the md5 hash of the URL http://digg.com.
The md5 is a one way hashing algorithm which converts a given string to a 32 character long string known as md5 digest. This hashed string can’t be reversed back into original string. The md5 function protects and ensures data integrity of Delicious Data Feeds.
Delicious data feeds are read-only web feeds containing bookmark information and other information which can be used third party websites. These feeds are available into two different format: RSS and JSON.
Among the various data feeds on the Delicious, let’s look at the details of the data feed which contains summary information of a URL. According to Delicious feed information page, these data feed for URL information can be retrieved via following call,
http://feeds.delicious.com/v2/json/urlinfo/{url md5}
It clearly specifies summary of URL can be retrieved in the json format only from Delicious.
To get the summary about a URL, You can provide the actual URL in the url parameter of the above URL. Alternatively, you can provide md5() hash of the url in the hash parameter in the above URL.
Now, let’s look at feed URLs which can be used to access the summary of the http://digg.com from Delicious:
http://feeds.delicious.com/v2/json/urlinfo?callback=displayTotalSaves&url=http://digg.com
OR
From the above URLs, it is clear that md5 hash of the string “http://digg.com” is 926a9b7a561a3f650ff41eef0c8ed45d
When JSON is used as the format of data returned form Delicious feed then you must specify the JavaScript callback function to handle the JSON data.
Now, let look at the JSON data which is returned from any of the above URL of Delicious feed.
displayTotalSaves([{"hash":"926a9b7a561a3f650ff41eef0c8ed45d",
"title":"digg", "url":"http://digg.com/","total_posts":51436,
"top_tags":{"news":23581, "digg":10771,"technology":10713,
"blog":8628,"web2.0":7800, "tech":6459,"social":5436,"daily":5173,
"community":4477,"links":2512}}])
As you can see clearly, the above JSON data contains hash of URL, the URL itself, total no of saves in Delicious in total_posts variable. Along with them, different tags including number of times that tag is used by different users of Delicious for saving the URL http://digg.com.
If the URL is not saved in Delicious then data returned from Delicious feed will be like this : displayTotalSaves([])
Now, having understod the information returned above, let’s see how to create Delicious widget step by step.
Creating Delicious Tagometer Widget
Our Delicious Tagometer widget looks very similar to actual Delicious Tagometer widget but has different format and texts. In the Tagometer badge provided by delicious, there is no option for specifying a particular URL whose summary is to be displayed. It automatically displays the details of the URL of the web page containing the code. While in our custom widget, you can also specify the URL explicitly in the badge which is an optional parameter.
For creating this widget, we will use JavaScript, CSS, XHTML and Delicious’s data feed in JSON format.
The above image is of the Delicious widget which we’re going to make and you can see clearly that the provided URL is not yet saved on Delicious.
Now, let’s look at the Custom Delicious Tagometer which we can see for a URL saved on the delicious.
The above badge of delicious is displayed for the URL: http://yahoo.com.
Writing Code for Delicious
First of all, let’s start looking at the JavaScript code for handling the parameters-url and title of the web page, when it is not provided. If these parameters are not defined explicitly then url and title of the web page using the widget is provided for saving the bookmark.
if(typeof delicious_widget_url!='undefined')
delicious_widget_url=encodeURIComponent(delicious_widget_url);
else
delicious_widget_url=encodeURIComponent(document.location);
if(typeof delicious_widget_title!='undefined')
delicious_widget_title=encodeURIComponent(delicious_widget_title);
else
delicious_widget_title=encodeURIComponent(document.title);
As can be seen from the above code, if the variable delicious_widget_url is not defined already then the URL of the current document encoded with encodeURIComponent() function is assigned to this variable.
If delicious_widget_url variable is already defined then it is encoded with encodeURIComponent() function and assigned to the same variable.
The typeof JavaScript operator can be used for checking the type of variable and also serves a very useful purpose of checking whether the variable or function is already defined or not. For example, the statement: typeof xyz==’function’ returns true if the function xyz is already defined.
Similarly, if the variable delicious_widget_title is not defined then document.title, which contains title of current web page, is encoded with encodeURIComponent() function and assigned to the delicious_widget_title variable .
Next, a variable del_rand_number is defined for handling multiple instances of the widget.
var del_rand_number=Math.floor(Math.random()*1000);
The Math.random() function returns random values between 0 to 1 and when multiplied by 1000 results in a random number between 1 to 1000. Since this random number is a floating point number hence floor() function of JavaScript Math Object is used for converting it to the greatest whole number which is less than or equal to generated random number.
The Math object of JavaScript has three different functions which can be used to convert a floating point number to whole number:
Math.floor(float_val) – converts to greatest integer less than or equal to float_val.
Math.ceil(float_val) – converts to smallest integer grater than or equal to float_val.
Math.round(float_val) – converts to nearest integer. If the decimal portion of float_val is greater than or equal to .5 then the resulting integer is the next whole number otherwise resulting number is rounded to the nearest integer less than float_val.
After that, now using above random number let’s define a variable which holds the “id” of the element in widget for displaying total no. of saves and tags.
var del_saved_id="delicious-saved-"+del_rand_number;
Now, let’s look at the initWidget() function for initializing the widget.
function initWidget()
{
//write the elements needed for widget
writeWidgetTexts();
//now attach the stylesheet to the document
var delCss=document.createElement("link");
delCss.setAttribute("rel", "stylesheet");
delCss.setAttribute("type", "text/css");
delCss.setAttribute("href",
"http://yourserver.com/delicious/delicious.css");
document.getElementsByTagName("head")[0].appendChild(delCss);
//now call the script of delicious
var delScript = document.createElement("script");
delScript.setAttribute("type", "text/javascript");
delScript.setAttribute("src",
"http://feeds.delicious.com/v2/json/urlinfo?
callback=displayTotalSaves&url="+delicious_widget_url);
//alert(delicious_widget_url);
document.getElementsByTagName("head").item(0).
appendChild(delScript);
}
At the start of the above code, the function writeWidgetTexts(); is called for writing the content of widget.
The functions createElement() and setAttribute() are DOM manipulation function for creating a element and adding attribute to the element respectively. So, the next four statements of the above function create link element and sets various attributes for attaching CSS document to the page using widget.
Once link element is created and various attribute is assigned to it the next step is to append it to the document using widget, which is done with appendChild() function in the next line of above function.
getElementsByTagName() is a DOM function for accessing the document by the name of tag. Unlike getElementById() which access single element in the document, getElementsByTagName() can access multiple elements of DOM with the help of index. For example, document.getElementsByTagName(“div”)[0] or document.getElementsByTagName(“div”).item(0) refers to the first division element of the document
Similarly, script element is created for getting JSON feed from Delicious. The call back JavaScript function displayTotalSaves() is used for handling JSON data returned from Delicious.
