How to Show the Total Delicious Bookmarks for a Post

Having the posts bookmarked by other people through Delicious is very important because not only you will get repeated traffic from the people who saved the articles you have written but you can also gain more traffic and RSS subscribers especially if some of the posts reach the Delicious front page. That’s why it’s important to ask people to save your articles. One important thing is to show how many times the post was saved on Delicious. If you have articles with quality content chances are you will get a lot of saves. Having a quite large number of saves may signify that the post is worth saving and this could determine other users to bookmark it too.

Whether you use WordPress or not I will show you how to add a “Save to Delicious” link for your articles that will also contain the total bookmarks of the post. To do this we’ll use the power of PHP and JQuery, the famous JavaScript library.

First, make sure you already have the JQuery library included. If you use the latest version of WordPress you should already have it included in the pages of your blog. The second thing is to decide where you will add the “Save to Delicious” link: under the post’s title, after the post content. I would prefer the first option as I have seen that performs very well.

Before adding the link we need to determine the URL of the post. In WordPress it is <?php the_permalink(); ?>. Here’s the HTML code (it can be stylished – just make sure the URL to delicious is correct):

For WordPress

<img width="16" height="16" align="top" alt="" src="http://www.yoursiteurl.com/images/delicious-icon.png" /> <a target="_blank" href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">Save to Del.icio.us</a> <span class="post_delicious"></span>

For other platforms

Note that I have used the get_current_url() function to obtain the URL from the address bar. If you have a better method to get the URL (perhaps one embedded in the platform you are using), do not hesitate to use it

<?php
function get_current_url() {

if(isSet($_SERVER['HTTPS'])) {
	if($_SERVER['HTTPS'] == 'on') {
    $s = 's';
	} else {
	$s = '';
	}
}

if(!isSet($s)) {
	$s = '';
}

return 'http'.$s.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}

$title = '';
?>

it’s nice to have a delicious icon before the link (make sure you set the right path to the image if you are going to use it)

<img width="16" height="16" align="top" alt="" src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/images/delicious-icon.png" /> <a target="_blank" href="http://del.icio.us/post?url=<?php echo the_permalink(); ?>&title=<?php echo the_title(); ?>">Save to Del.icio.us</a> <span class="post_delicious"></span>

Now, we will use JQuery to add the total bookmarks for the current page/post.

For WordPress

<script type="text/javascript">
$(function() {
$(".post_delicious").load("http://<?php echo $_SERVER['HTTP_HOST']; ?>/api/get_delicious_count.php?url=<?php the_permalink(); ?>");
});
</script>

For other platforms

<script type="text/javascript">
$(function() {
$(".post_delicious").load("http://<?php echo $_SERVER['HTTP_HOST']; ?>/api/get_delicious_count.php?url=<?php echo get_current_url(); ?>");
});
</script>

When DOM is ready, an AJAX call is made to the PHP file that gets the total number of delicious posts. You can put the file in any folder you want (even root) of your website. In this case, I have created a directory called “api” where get_delicious_count.php is stored.

Here’s the content of the get_delicious_count.php page:

<?php
include_once 'functions.php';

if(isSet($_GET['url'])) {

$url = $_GET['url'];

$address = 'http://feeds.delicious.com/v2/json/urlinfo/data?url='.$url.'&callback=displayURL';

$output = LoadCURLPage($address);

if($output) {

$output = str_replace('displayURL([', '', $output);
$output = str_replace('])', '', $output);

if(function_exists('json_decode')) {

$data = json_decode($output);

$total_posts = $data->total_posts;

} else {
$total_posts = extract_unit($output, 'total_posts":', '"');
}

echo '('.$total_posts.' hits)';

}

}
?>

How it works?

We use cURL to connect to Delicious and get some information regarding the saved URL (including the total posts). After some filtering, we parse the data using JSON. If you are using an older PHP version (lower then 5.2.0) which doesn’t have the json_decode() function included, you can use the alternative extract_unit function to get the data between total_posts”: and “ (will return the actual number). The SPAN element with the class “post_delicious” will be updated to contain the output generated by get_delicious_count.php.

Note: There is another way of getting the data by using pure JavaScript, call the displayURL function then parse the data using JSON. However, this may result in slow page loading sometimes, because the script needs to get the data from Delicious first, before displaying it. Also, what if you have 10 articles in a page (such as WordPress) and you wish to show the total bookmarks for all? This can result in more loading time. Using JQuery and PHP, the AJAX call is made after all page elements are loaded.

All the necessary functions can be found in the ZIP archive.

If you have any questions or suggestions regarding this script, please post them! Happy coding!