Delicious Tagometer Widget

Cart | Your Account | Trade | Sitemap

Want to know more about Packt's Article Network? Interested in contributing your article ideas?

Please visit our FAQ for more information.

In this article by Roshan Bhattarai, we learn how to build a widget similar to the Mybloglog widget using external JavaScript along with PHP. By the time we finish, you would see a popup image whenever you move the mouse cursor over the widget. In the later section, you can see an example for extracting image details from a database and using it in the example.

Delicious provides a well-known widget known as Tagometer which displays the number of saves and tags used for saving a particular URL. In this article by Roshan Bhattarai, we’ll learn how to build a custom Delicious Tagometer widget.

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

http://feeds.delicious.com/v2/json/urlinfo?callback=displayTotalSaves&hash=926a9b7a561a3f650ff41eef0c8ed45d

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.

AJAX and PHP: Building Responsive Web Applications

Enhance the user experience of your PHP website using AJAX with this practical tutorial featuring detailed case studies
Build a solid foundation for your next generation of web applications
Use better JavaScript code to enable powerful web features
Leverage the power of PHP and MySQL to create powerful back-end functionality and make it work in harmony with the smart AJAX client
Go through numerous case studies that demonstrate how to implement AJAX-enabled features in your site such as: real-time form validation, online chat, suggest & autocomplete, whiteboard, SVG realtime charting, whiteboard, web data grid, RSS reader, drag & drop

http://www.packtpub.com/ajax-php/book

Now, first let’s look at the writeWidgetTexts() function for writing the content of Delicious Widget.

function writeWidgetTexts()
{
	
   var delicious_widget_text='<div class="delicious-tagometer-widget">';
   delicious_widget_text+='<div class="display-delicious-saves" id=
"'+del_saved_id+'">be first to save this url</div>';
   delicious_widget_text+='<a class="delicious-save-link" 
href="http://delicious.com/save?   url='+delicious_widget_url+'&title=
'+delicious_widget_title+'">save this url on Delicious</a>';
   delicious_widget_text+='</div>';
   document.write(delicious_widget_text);
}

As you can see, the outer container of the widget is wrapped with division with class delicious-tagometer-widget.

After that there is division with id stored in del_saved_id variable. Remember that this variable is generated with the help of random number.

In the next statement, anchor tag id with class delicious-save-link is placed for displaying hyperlink to be stored in the variable delicious_widget_url for saving this url on Delicious.

Finally, document.write() statement is used to write the content of widget which was stored in delicious_widget_text variable.

Now, let's look at the callback function for handling JSON data returned from Delicious.

function displayTotalSaves(data) 
{
    if (!data[0])
	delicious_total_saves='0';
    else
	delicious_total_saves=data[0].total_posts;
    //if delcious no of saves is more than zero
    if(delicious_total_saves!='0
    {	
        document.getElementById(del_saved_id).innerHTML = "saved 
by <a href='http://delicious.com/url/"+data[0].hash+"' class=
'delicious-saves-count'>"+delicious_total_saves+"</a> users";
	document.getElementById(del_saved_id).innerHTML+="<br /> tags : ";
	//now loop through the object to display tags
	for (tags in data[0].top_tags) 
	 document.getElementById(del_saved_id).innerHTML+="<a href=
'http://delicious.com/tag/"+tags+"' class='delicious-tags'>"+tags+"</a>  ";	
		
    }
}

In the above function, first it is checked whether data returned from Delicious feed is empty or not. You can review back to previous section for the detail of JSON data returned form Delicious.

If JSON data is empty then the 0 is assigned to the variable delicious_total_saves otherwise this variable is assigned the value of variable total_posts of JSON data which can be accessed via variable data[0].total_posts.

If delicious_total_saves variable contains other value than 0, which means that URL is saved in delicious, then we’ll display the number of saves to the widget element with id stored in the variable del_saved_id.

Once number of saved is added, we now add the string "
tags :" to the same element.

After that, top tags are added to widget which is available in top_tags in JSON data using for …in loop.

The for..in loop is very useful loop for accessing object’s property. The basic syntax of this loop is
for (variablename in object)

statement or block to execute

Finally, the initWidget(); function is called to initialize the widget.

After looking at the JavaScript code, now let’s look at the CSS.

.delicious-tagometer-widget
{
	border: 2px solid #CCCCCC;
	width:180px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
.delicious-save-link 
{
	background:url(delicious.small.gif) no-repeat 10px 3px;
	clear:both;
	color:#0000FF;
	display:block;
	font-weight:bold;
	margin:1px;
	padding:0 0 0 12px;
	text-align:center;
	text-decoration:none;
}

.display-delicious-saves 
{
	background-color:#DDDDDD;
	color: #000000 ;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	padding: 2px 0px;
}
.delicious-saves-count
{
	color: #FFFFFF ;
	text-decoration:none;
	background-color:#0000FF;
}
.delicious-tags
{
	color: #0000FF ;
	text-decoration:none;
	font-weight:normal;
}

delicious-save-number 
{
	background-color:#0000FF;
	color: #000000 ;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	line-height:20px;
}

Now, let’s look at some of the important properties defined in the above styles.

As you can see in the delicious-tagometer-widget class, the width of Tagometer is defined as 180px.

In the delicious-save-link class, the delicious.small.gif image is placed at the background of the element with the x-coordinate being 10px and the y-coordinate being 3px. The background image repetition in element is set to no-repeat.

In the delicious-save-number class, line-height property is set to 20px which sets the distance between upper and lower line of element.

Putting the code all together

Since we’ve dissected the code in sections, let’s compile them into single files.

Create delicious_widget.js file and add the following code in it.

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);

var del_rand_number=Math.floor(Math.random()*1000);
var del_saved_id="delicious-saved-"+del_rand_number;
function displayTotalSaves(data) 
{
    if (!data[0])
	delicious_total_saves='0';
    else
	delicious_total_saves=data[0].total_posts;
    if(delicious_total_saves!='0')
	{
	 document.getElementById(del_saved_id).innerHTML = "saved
 by <a href='http://delicious.com/url/"+data[0].hash+"'
 class='delicious-saves-count'>"+delicious_total_saves+"</a> users";
	 document.getElementById(del_saved_id).innerHTML+="<br /> tags : ";
	 for (tags in data[0].top_tags) 
	    document.getElementById(del_saved_id).innerHTML+="<a href=
'http://delicious.com/tag/"+tags+"' class='delicious-tags'>"+tags+"</a>  ";	
		
	}
}


function writeWidgetTexts()
{
	
    var delicious_widget_text='<div class="delicious-tagometer-widget">';
    delicious_widget_text+='<div class="display-delicious-saves" id="'+
del_saved_id+'">be first to save this url</div>';
    delicious_widget_text+='<a class="delicious-save-link" href="http://delicious.com/save?
url='+delicious_widget_url+'&title='+delicious_widget_title+'">save this url on Delicious</a>';
    delicious_widget_text+='</div>';
    document.write(delicious_widget_text);
}

function initWidget()
{
	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://localhost/bookcode/delicious/delicious.css");
    document.getElementsByTagName("head")[0].appendChild(delCss);
	
	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);
	
}

initWidget();

After that, create delicious.css file and add the following code in it.

.delicious-tagometer-widget
{
	border: 2px solid #CCCCCC;
	width:180px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
.delicious-save-link 
{
	background:url(delicious.small.gif) no-repeat 10px 3px;
	clear:both;
	color:#0000FF;
	display:block;
	font-weight:bold;
	margin:1px;
	padding:0 0 0 12px;
	text-align:center;
	text-decoration:none;
}

.display-delicious-saves 
{
	background-color:#DDDDDD;
	color: #000000 ;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	padding: 2px 0px;
}
.delicious-saves-count
{
	color: #FFFFFF ;
	text-decoration:none;
	background-color:#0000FF;
}
.delicious-tags
{
	color: #0000FF ;
	text-decoration:none;
	font-weight:normal;
}

delicious-save-number 
{
	background-color:#0000FF;
	color: #000000 ;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	line-height:20px;
}

Using Delicious Tagometer Widget

To use this Delicious Tagometer widget we’ve to follow these steps:

Upload delicious_widget.js and delicious.css to http:// yourhost.com/delicious/ directory of your server so that it can be used by the client websites.
Now, we can widget in any web page by placing either of the following JavaScript Code in the website, since though they can be used, the variables delicious_widget_url and delicious_widget_title are optional.

<script src="http://yourhost.com/delicious/delicious_widget.js"></script>

<script type="text/javascript" language="javascript">
var delicious_widget_url='http://yahoo.com';
var delicious_widget_title=’Yahoo A search engine’;
</script>
<script src="http://yourhost.com/delicious/delicious_widget.js"></script>

Summary

In this article, we have seen how we can use data feed of Delicious to create the Delicious Tagometer badge. We’ve used JSON returned from data feed of delicious.com to create this widget which is pretty much similar to original delicious Tagometer widget.

If you have read this article you may be interested to view :

Create scalable, reusable high-quality JavaScript applications and libraries
Learn to think in JavaScript, the language of the web browser
Object-oriented programming made accessible and understandable to web developers
Do it yourself: experiment with examples that can be used in your own scripts
Write better, more maintainable JavaScript code

http://www.packtpub.com/object-oriented-javascript-applications-libraries/book

About the Author

Roshan Bhattarai is an experienced web developer. His core proficiency lies in JAVASCRIPT, CSS, XHTML, PHP and MySQL. Having done his masters in information technology, he has many active websites to his credit. He has worked in various companies as a Technical Lead before moving on as a freelancer. He primarily resolves problems faced by programmers, liaise with the clients to have a better understanding of the projects' requirement and does research on new technologies relating to the project. He also excels in analysis and design of the database and work flow of a web project. He can be contacted on his blog http://roshanbh.com.np.

DWR Java AJAX Applications

Learning Ext JS

Google Web Toolkit GWT Java AJAX Programming

WordPress Plugin Development (Beginner's Guide)

Learning Dojo

Drupal 6 JavaScript and jQuery: RAW

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

PHP Oracle Web Development: Data processing, Security, Caching, XML, Web Services, and Ajax

Visit Packt's Article Network, for all the latest quality, relevant and free content.
See More

This is a 5 part mini series by Roshan Bhattarai, covering basics of Widget, development of Wiki seek Widget, Pop-up Image Widget, RSS Web Widget, and Delicious Tagometer Widget.

The web is becoming more flexible and dynamic from day to day. The service and functionality provided by a particular website is not limited to itself. We can extend it to other websites by placing a few lines of code in their web pages called Widget.

In this article we will explore the technologies that go behind making a Widget and understand its working.