Put del.icio.us Button With Counter In Blogger Posts

This is article will show you how to add a del.icio.us link with a counter displaying the users number that bookmarked the current article in del.icio.us.

del.icio.us is a famous social bookmarking service which gives for all users

a great opportunity to discover millions of unique URLs bookmarked.

Therefore, if you accept to show a simple/reachable link to bookmark your post as well as to show how many users have bookmarked this post, this will doubtlessly be a manner to move up your article’s popularity.

The result will be like this:

How to do that:

1 - Go to your Layout, Edit your template and Expand Widget Templates.

2 - Add the following CSS classes


.delicioushits{
   float:right;
   padding:2px 4px;
   font-size:12px;
   color:#343434;
   background:url(“Use Your 14x14 delicious Logo URL”) left no-repeat; padding:0 10px 0 20px;
}
.delicioushitsbold{
   font-weight: bold;
}

3 – Place this following code snippet just before <b:includable id='post' var='post'> in case of you want to display it like in this site. Otherwise, you can choose your convenient position within the Blogger template and edit the appropriate CSS classes.


<span class='delicioushits'>
<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' target='_blank'>Save to del.icio.us</a> with
<span class='delicioushitsbold' expr:id='"a"+data:post.id'>0</span> hits!</span>

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML = urlinfo.total_posts;
}
</script>
<script expr:src='"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=displayURL"'/>

4- This was successfully tested in Chrome, FF, Safari and IE.

5- Enjoy yourself.