skip to main | skip to sidebar

Quite Delicious Button - A jQuery Plugin
This is a share count button to encourage people to bookmark your content on Delicious. Although Delicious provides their own button and I tried before to style it differently, but still It didn't look quite uniform like other sharing buttons.

So This jQuery-fied one should give you a uniform share button -tall or wide- that looks quite delicious! It works the same as the official Delicious button and looks pretty as in Topsy, StumbleUpon buttons.
check out <DEMO/>

First, Place the Javascript files..
Of jQuery and this plugin once in your page, at <head> section or by the end of the page.
<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>

* Plugin was also tested to work with jQuery 1.4.2, Just replace jQuery Javascript path to "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

Second, Place an Anchor link
1. with the class "delicious-button" Where you want the button to appear. Button will be auto-loaded and use the URL of the container page.
<a class="delicious-button" href="http://delicious.com/save">Save on Delicious</a>

2. OR set Custom options like url, title. and place options array in a HTML5 attribute [data-button]
<a class="delicious-button" href="http://delicious.com/save" data-button="{
   url:'http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html'
   ,title:'Twitter Friends & Followers Widget - A jQuery Plugin!'
}"
>Save on Delicious</a>

Note that, You should escape single-quotes with backslash in the title value. so, you would write 'John\'s Post' instead of 'John's Post'.
And escape double-quotes like this 'John says: &quot;hi&quot;' instead of 'John says: "hi"'

3. OR use wide button and place options in HTML comment <!-- -->.
<a class="delicious-button" href="http://delicious.com/save">
   <!-- {
      url:'http://www.moretechtips.net/2009/12/who-tweet-button-fancy-jquery-plugin.html'
      ,title:'Who-Tweet Button : Fancy jQuery Plugin for Twitter'
      ,button:'wide'
   } -->

   Save on Delicious
</a>

You should escape single-quotes as before. And put a backslash between any 2 consecutive dashes like this 'John -\- Post' instead of 'John -- Post'.
* If you are on Google Blogger, you can insert this code in your template after escaping the comments <!-- --> :
<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>

* If you are on Wordpress, you can insert this code in the loop at your index template:
<a class="delicious-button" href="http://delicious.com/save">
   <!-- {
   url:"<?php the_permalink() ?>"
   ,title:"<?php the_title(); ?>"
   ,button:"wide"
   } -->

   Save on Delicious
</a>


4. OR Load button by a jQuery call.
<a class="delicious-button-2" href="http://delicious.com/save">Save on Delicious</a>
<script type="text/javascript">
$(document).ready(function(){
   $('a.delicious-button-2').deliciousButton({
      url:'http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html'
      ,title:'Google Buzz Widget - A jQuery Plugin'
      ,button:'wide'
   });
});
</script>


Features
  1. Quite uniform button - Tall or Wide- to display the count of Delicious-saves of your post.
  2. As in the official Tagometer, This one calls Delicious API once -No matter how many buttons you got.
  3. CSS3 styles are embedded in the script, to minimize page-loading time. Still, you can disable this behavior and create your custom CSS.
  4. Also, Button doesn't use any images. Delicious logo is just HTML & CSS.
  5. You can customize it by placing optional parameters -like custom URL- in a HTML5 data attribute or HTML comment so It would not break HTML validation of your page.
  6. It would degrade gracefully to a regular Delicious-save link when javascript is disabled.
  7. The button makes use of jQuery DOM-Manipulation (No document.write) for better integration with your code.
  8. Since this is a Javascript-only solution; you can add this button anywhere where you can embed Javascript like Google Blogger, Wordpress, ...
  9. Use a typical jQuery call or auto-load any number of anchor elements with "delicious-button" class.


* As in the official button, This plugin includes a MD5 script by Paul Johnston.

12 comments

  1. Kawsar Ali // July 20, 2010 at 12:05:00 PM GMT+10  

    Thanks for sharing. This looks handy

  2. Paul Andrew // July 20, 2010 at 5:46:00 PM GMT+10  

    Nice plugin, I love it :)

  3. Mike // July 20, 2010 at 6:26:00 PM GMT+10  

    Thanks @Kawsar & @Paul,
    I'm glad you like it

  4. Andy@FirstFound // July 20, 2010 at 9:41:00 PM GMT+10  

    Good stuff, thanks! Now maybe my developer will be able to put a social bookmarking button up that works!

  5. Ronald Bien // July 23, 2010 at 4:11:00 AM GMT+10  

    Nice plugin Mike :) actually I was looking for delicious button lately for my site. So far this one looks better from the others I saw out there:)

  6. Mike // July 23, 2010 at 6:49:00 AM GMT+10  

    Thanks @Ronald, Give it a try and let me know :)

  7. Mia // July 24, 2010 at 10:26:00 AM GMT+10  

    Great Job once again Mike :) - this one looks really good . Now can you please make it available as a WP plugin ? pleeeaase????

  8. Mike // July 24, 2010 at 7:14:00 PM GMT+10  

    Thanks @Mia,
    It should be easy to setup it on Wordpress, if you just insert the HTML code within the loop at your index template.. and include the 2 JS files once at header/footer template.

  9. Muhammad Ghazali // August 5, 2010 at 5:20:00 AM GMT+10  

    Great tutorial, the button looks delicious. Thank you.

  10. nico // June 6, 2011 at 5:58:00 PM GMT+10  

    Thanks for this.

  11. Arranda Saputra // July 17, 2012 at 1:41:00 PM GMT+10  

    this button always displayed in different line when I put this button side-by-side with another bookmarking button...?

  12. Mike // July 26, 2012 at 11:02:00 AM GMT+10  

    @Arranda,
    Please, email me the url

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS