Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Tagometer Badge

Delicious provides their own button with a simple styling. You can see it in action here. However, it doesn’t allow you to customize for styling. Just like other networks, Delicious implement their buttons using iFrames which you can’t modify anything inside of it. Thus, it’s recommend only for someone who don’t want to mess up with code or don’t care much about how attractive it should be.

<script type="text/javascript">
    if (typeof window.Delicious == "undefined") window.Delicious = {};
    Delicious.BLOGBADGE_GRAPH_SHOW = false
    Delicious.BLOGBADGE_TAGS_SHOW = false
</script>
<script src="http://static.delicious.com/js/d2-blogbadge.js"></script>

And this is what you got:

In case you are using WordPress, there is a plugin, Delicious Badge With Bookmark Count, which can generate a cool delicious bookmarking button/badge with total bookmark count.

Pure Javascript and JSON callback

This is a good method to display delicious counter which is fully customizable. We will parse the feed(in JSON format) from specific url using query string then callback a function to fill the result into HTML element found by class name (just in case you want to use multiple elements, otherwise use ID instead).

<script type="text/javascript">
    function delicious(info) { 

        if(!info[0]) return;

        var num = info[0].total_posts;

        if(!num) return;

        var delElements = document.getElementsByClassName('delElement');

        //In case you have multiple elements to fill the result             
        for (var i=0;i<delElements.length;i++) {
            delElements[i].innerHTML = num;
        }   

    }
</script>
<script src="http://badges.del.icio.us/feeds/json/url/data?url=URL_HERE&amp;callback=delicious" type="text/javascript"></script>

The value of counter was fetched from total_posts object:

[{
    "hash":"801012767d4ae263dc323b5418c364c4",
    "title":"CSS3 Animation and 3D effects | AEXT.NET MAGAZINE",
    "url":"http:\/\/aext.net\/2010\/06\/css3-animation-and-3d-effects\/",
    "total_posts":60,
    "top_tags":{
        "css3":51,
        "animation":33,
        "css":26,
        "webdesign":24,
        "3d":24,
        "tutorial":22,
        "html5":22,
        "tutorials":18,
        "effects":8,
        "tips":6
    }
}]

Display the Delicious save count:

<strong class="delElement">0</strong> <a href="http://del.icio.us/post?url=URL_HERE">Delicious</a>

This method is highly recommend because it’s using pure Javascript to parse data from a JSON file which is lightweight. Since you got the data in text format then display it to a HTML element, you can easily customize the counter style with CSS.

Using jQuery

Because you are a big fan of jQuery and you love to use it all the time, there is one jQuery solution from a tutorial of W3avenue: How To Get Digg, Delicious and Tweet Counts Using jQuery.

This method is not too much different to what we’ve just done above.

...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        url = "YOUR_URL_HERE";
        beforecounter = " [<b>";
        aftercounter = "</b>]";

        ...

        // Get Number of Delicious Bookmarks
        $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&callback=?',
            function(data) {
                $('#delicious').append(beforecounter + data[0].total_posts + aftercounter);
        });

        ...

    })
</script>

...

<ul>

    ...

    <li><a href="http://delicious.com/save" id="delicious">Delicious</a></li>

    ...

</ul>

...

Quite Delicious Button – A jQuery Plugin

This brand new jQuery plugin has just been released by Mike More that generates an uniform delicious counter in real-time with 2 styles: tall or wide. You can use this share button with the style as same as Topsy or Stumbleupon.

Check out this plugin here and enjoy using it. The plugin uses CSS3 styles which are embedded in the script, to minimize page-loading time. Also, its button doesn’t use any images. Delicious logo is just HTML & CSS.