Add A Beautiful Delicious Counter Button

Delicious counter buttons are quite essential for every blogger, but there are many counter buttons out in the field which actually doesn’t work. It was my experience, when I was in search of delicious counter buttons. Finally I found a way to make our delicious button. The tutorial which I am going to teach you was made by Mike. So, this is going to be a little detailed version of what he has written on his blog.

delicious counter button

Live Demo

WordPress

Step 1: Go to header.php on your WordPress dashboard and insert the below code within </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>

Step: 2 Now go to single.php and paste this code after <?php the_content(); ?>

<div style='float:right; margin-right:10px;'>
<!-- {
   url:"<?php the_permalink() ?>"
   ,title:"<?php the_title(); ?>"
   ,button:"wide"
   } -->
   Save on Delicious
</a>
</div>

For horizontal button, remove ,button:”wide” from the step 2.

Blogger

Well, I don’t want to miss Blogger platform and here we go to the installation.

Step 1: Go to Edit HTML in your Blogger dashboard and paste the below code within </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>

Step 2: Search for <div class=’post-header-line-1’/> if you are not able to find search for <data:post.body/> and paste this code below to that

<div style='float:right; margin-right:10px;'>
<a class='delicious-button'  href='http://delicious.com/save'>
   &lt;!-- {
      url:"<data:post.url/>"
      ,title:"<data:post.title/>"
      ,button:"wide"
   } --&gt;
   Save on Delicious
</a>
</div>

For horizontal button remove ,button:”wide” from the step 2.

Hope this tut is helpful to add a beautiful delicious counter button. Finally thanks to Mike for making this awesome piece of work.

August 31, 2010. This entry was posted in Blogger, Tutorials, WordPress and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

25 Responses so far!

  1. This is really awesome. I am searching for this widget from long time ago. And today I found it here! Thanks for sharing :)
    .-= Anup @ Hack Tutors´s last blog ..50 RSS Directories to Increase your Subscribers =-.

  2. cool i do hope it is added to the social networking plugins like sociable for wordpress soon thanks for the heads up
    .-= lawmacs´s last blog ..When Should You Change Your Blog Template =-.

  3. Nice, man!
    .-= afEkenholm Web Design´s last blog ..ScrollectBox jQuery plugin =-.

  4. nice social media buttons for sharing the information
    .-= shenoyjoseph´s last blog ..Baby Scared by seeing the Jedi Yoda =-.

  5. Hi ,

    I am really thankful to you for showing me a simple and working tip.
    .-= Madav´s last blog ..Facebook want users to make facebookcom as home page =-.

  6. I really loved the layout of the button in the above screenshot but when I tried to implement in my WP powered blog it resulted in Parse errors. Several attempts at fixing the code implementation resulted in nothing. I’d appreciate if you could help!
    .-= TechChunks´s last blog ..How to Repair and Fix 5 Common Cellphone Problems =-.

  7. I tried a number of codes but none worked. That is the counter never worked properly. But yours was spot on. Thanks buddy!

  8. Many Many thanks :) i have finally inserted the delicious code very simply after a long search. i suggest you to add a tag or label as delicious share button code and delicious button code :) Thanks man 😉

  9. Very nice indeed. However, on firefox it throws the counter under the icon. I want to use the small horizontal version, but cant manage to make it work on firefox. Why does it throw the number under the icon? Works fine on all other browsers except firefox.

    Am i the only one facing this?

    Thanx.

  10. Franklin,

    Thanks, works like a charm.

    One question. I’m Belgian and my weblog is in Dutch.

    How can I translate the word “Save” to the Dutch equivalent?

  11. Thanks for the tutorial, I was looking for this delicious button on delicious.com website but they don’t have any info about it?

    Finally after finding this tutorial I have add delicious button on my blog :)

  12. Something happen to the code :(( and just when i tought i found it..

  13. Pingback: YouTube founders cooking up a site that’s more 'delicious' | NothingButSoftware Blog

  14. Am i the only one that can’t see a number but just “save…” text?

  15. Some code seems to be missing in the WP-Version.

    I’m talking of…

  16. Thanks for sharing man, awesome tut!

  17. Pingback: Delicious buttons | Mummabearcards

  18. Great.
    Was looking for a delicious button.
    Thanks a lot… :)

  19. Not sure how the code works in a HTML blogger widget box.

    I have the calls to the scripts in the head ( there is always conflict between 3.2.1 and newer versions jquerry used for other widgets) and the division in the widget along with many other buttons. I had to unescape the code like this


    <!– {
    url:"”
    ,title:””

    } –>
    Delicious

    Not sure if it works as Delious output page comes up blank.
    Appreciate your help

Leave a Reply

Your email address will not be published. Required fields are marked *