How to Display Delicious Bookmark Count on WordPress Blog or Any Website Page

Almost all of social bookmark and microblogging sites like Twitter, Facebook, Digg, and Stumbleupon have their own code to display the save or bookmark count for certain website page. Otherwise, you can find easily the third party tools to display the count like Twitter, there’re quite many retweet count tools out there.

Unlike Delicious, I can’t find easily the code to display Delicious bookmark count. By doing little modification of code from w3avenue – How to Get Digg, Delicious and Tweet Counts Using jQuery you can display nice looking Delicious bookmark count for a specific URL using jQuery. So you’ll know easily how many times your url has been added to Delicious. Here’s the preview:

To download the image, please right click on the image then select “Save Image As”.

I have styled the data using CSS and you can also do this without depending on any server side code.

Display Delicious Bookmark Count on WordPress Blog

Here’s the code to display Delicious bookmark count on WordPress blog. On your WP admin dashboard, go to Appearance -> Editor. To place this on your front page, please open your index.php file then paste the code where you wish. To place on your single post, please open your single.php file then paste the code.

<script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script>
<script type=&quot;text/javascript&quot;>
$(document).ready(function() {
    url = '<?php the_permalink(); ?>'; /* your page url */
    // Get Number of Delicious Bookmarks
    $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&callback=?',
        function(data) {
            $('#delicious-<?php echo $post->ID; ?>').append(beforecounter + data[0].total_posts + aftercounter);
    });
})
</script>

<!-- Display the Delicious save count -->
<a href=&quot;http://delicious.com/save&quot; id=&quot;delicious-<?php echo $post->ID; ?>&quot; onclick=&quot;window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>'), 'delicious','toolbar=no,width=550,height=550'); return false;&quot; style=&quot;display:block; color:#000; font:normal 16px arial; text-decoration:none; padding-top:3px; background:url(http://www.webmasteradvance.com/wp-content/uploads/2010/07/delicous_50.png) no-repeat; width:50px; height:60px; text-align:center;&quot;></a>

Display Delicious Bookmark Count on Any Website Page

And here’s the code to display Delicious bookmark count on any website page.

<script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;></script>
<script type=&quot;text/javascript&quot;>
$(document).ready(function() {
    url = 'http://www.webmasteradvance.com.com'; /* your page url */
    // Get Number of Delicious Bookmarks
    $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&callback=?',
        function(data) {
            $('#delicious').append(data[0].total_posts);
    });
})
</script>

<!-- Display the Delicious save count -->
<a href=&quot;http://delicious.com/save&quot; id=&quot;delicious&quot; onclick=&quot;window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;&quot; style=&quot;display:block; color:#000; font:normal 16px arial; text-decoration:none; padding-top:3px; background:url(http://www.webmasteradvance.com/wp-content/uploads/2010/07/delicous_50.png) no-repeat; width:50px; height:60px; text-align:center;&quot;></a>

Please replace the style image background (which it’s http://www.webmasteradvance.com/wp-content/uploads/2010/07/delicous_50.png on this example) with your own image url.

Hopefully you have found this brief tutorial useful. Feel free to share your opinion and suggestion in the comments.