Create a Digg-Like Delicious Count Button With JQuery
Background
During the conceptualization stages of Winston{YW}, I was inspired by Antonio and so, I wanted my WordPress blog to have a Delicious Count Button on each post too. Ideally, this Delicious Count Button could be used to bookmark the post in Delicious, and at the same time, display the number of times the post has been bookmarked on Delicious.
By referring to the new Delicious API, I managed to build this Delicious Count Button with JQuery, and I even styled it to match the looks of the Digg button. Now, I shall go through the process of building this Delicious Count Button for your WordPress blog. See a DEMO here.
Step 1: The Button Image
Browse to the image on Digg’s website. “Right Click” the image, and “Save Image As”. Place the image in your theme’s IMAGES directory.
Step 2: The HTML
You should be familiar with The Loop in WordPress. Copy this snippet of HTML into The Loop; place it where you would like to have this Delicious Count Button.
<div class='post_delicious'>
<span class='md5hash'><?php echo md5(get_permalink()); ?></span>
<a href='http://del.icio.us/post?v=4&noui&jump=close&url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title('','',FALSE)) ?>' target='_blank'>Del.icio.us</a>
</div>
This snippet of code sets up a DIV that contains a SPAN and an ANCHOR. The SPAN is where the magic occurs as the content would be replaced by a count of the number of times your post has been bookmarked on Delicious through the use of JQuery. The content in the SPAN tag is actually a MD5 hash of the permalink of the post, which is used as an unique key to query the Delicious API for details of this post. The ANCHOR is a link which contains the necessary parameters, populated by the details of each post, to submit the post to Delicious.
Step 3: The CSS
Copy this snippet of CSS into the CSS file, which should be styles.css for most WordPress themes. This would style the DIV which you copied in Step 2, and make it look like the Digg button.
.post_delicious {
display: block;
background: url('images/tiny-submit.gif') no-repeat top right;
height: 20px;
width: 85px;
padding: 2px 45px 0px 0;
font-family: arial, sans-serif;
font-size: 11px;
font-weight: bold;
cursor: pointer;
}
.md5hash {
display: none;
}
.post_delicious a, .post_delicious a:visited {
float: right;
color: #444444;
text-decoration: none;
}
.post_delicious a:hover {
color: #0000000;
text-decoration: underline;
}
Step 4: The JQuery Package
Proceed to download the latest version of JQuery, or use a Google-hosted version of JQuery by reading more about it on the Google AJAX Libraries API. Insert the link to the JQuery package in the HEAD tags of your HTML.
<head> <!-- Misc Stuff --> <script type='text/javascript' src='<directory_to>/jquery-1.2.6.pack.js'></script> </head>
Step 5: The JQuery Code
Copy this snippet of JQuery code. Place it either in the HEAD tags of your HTML, or at the bottom of your HTML, just before the closing HTML tag.
<script type='text/javascript'>
$(function() {
$.each($('span.md5hash'), function () {
var elem = $(this);
$.ajax({ type: 'GET',
dataType: 'jsonp',
url: 'http://feeds.delicious.com/v2/json/urlinfo/'+$(this).html(),
success: function(data){
if (data.length > 0) {
elem.next().prepend(data[0].total_posts + ' ');
}
}
});
});
})
</script>
</script>
This is the MAGIC! Once your blog is loaded in a browser, this snippet of code scans for all the SPAN tags that has the class “md5hash”, and for each SPAN tag found (which should be one per post), it issues an AJAX request to the new Delicious API to obtain details of the post.
On the return of the AJAX request, the content in the SPAN tag (which is the MD5 hash of the permalink) is then replaced with a count of the number of times the post has been bookmarked on Delicious.
Conclusion
Finally, upload your changes and with that, you have successfully placed a Delicious Count Button on each of your posts! I hope you find this post useful, and do let me know in the comments if you have any questions or encounter any problems.
winston.yongwei