Dynamic Delicious Share Link for Blogger

I was working on adding share links to my blog posts and I discovered that both Digg and reddit have pretty nice dynamic share buttons with instruction on how to use them. These buttons show the number of diggs or up-votes obtained by the article if they have already been submitted.

While delicious also has some nice buttons, the one that shows the number of times an article has been bookmarked does not allow for a url to be specified. It only works for the location of the page it is on. This means I can't put it at the bottom of each post and have it work when multiple posts are displayed.

After looking around, I found a site that uses the Delicious API to grab the total post count. The code he uses though is not very optimized, so I wrote my own. He was also using his own version of the Delicious button and is slightly outdated. This following code uses the button from the Delicious site that pops up a javascript window and includes my code to add the bookmark count next to the link.

In your blogger template, place the following code somewhere inside the head tag:

<script type='text/javascript'>
  function print_delicious_data(data){
    var urlinfo = data[0] || {};
    if (!urlinfo.total_posts) return;
    document.write(urlinfo.total_posts + " save");
    if(urlinfo.total_posts!=1) document.write("s");
  }
</script>

Put the rest inside <div class="post-footer">

<a expr:href='"http://delicious.com/save?url="+data:post.url + "&amp;title=" + data:post.title'
   expr:onclick='
    "window.open(
      \"http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=\" +
        encodeURIComponent(\"" + data:post.url + "\") + \"&amp;title=\" +
        encodeURIComponent(\"" + data:post.title + "\"),
        \"delicious\",\"toolbar=no,width=550,height=550\"
    ); return false;"'
>Bookmark this on Delicious</a>


<script expr:src='"http://feeds.delicious.com/v2/json/urlinfo?url=" +
data:post.url + "&amp;callback=print_delicious_data"'/>

Just for fun, here is the code I use for the Digg and reddit buttons.

<script type='text/javascript'>
  digg_url = '<data:post.url/>';
  digg_title = '<data:post.title/>';
  digg_topic = 'programming';
  digg_skin = 'compact';
  digg_window = 'new';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

<script type='text/javascript'>
  reddit_url='<data:post.url/>';
  reddit_title='<data:post.title/>';
  reddit_newwindow='1';
</script>
<script src='http://www.reddit.com/button.js?t=1' type='text/javascript'/>