Quite Save Delicious Button With jQuery

Home Buttons & IconsQuite Save Delicious Button With jQuery

Quite Save Delicious Button With jQuery

13 years ago Views

6166

1540

moretechtips

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.

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.htmldrive.net'
   ,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: "hi"' 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:'#'
      ,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:'#'
      ,title:'Google Buzz Widget - A jQuery Plugin'
      ,button:'wide'

Features

Quite uniform button - Tall or Wide- to display the count of Delicious-saves of your post.
As in the official Tagometer, This one calls Delicious API once -No matter how many buttons you got.
CSS3 styles are embedded in the script, to minimize page-loading time. Still, you can disable this behavior and create your custom CSS.
Also, Button doesn't use any images. Delicious logo is just HTML & CSS.
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.
It would degrade gracefully to a regular Delicious-save link when javascript is disabled.
The button makes use of jQuery DOM-Manipulation (No document.write) for better integration with your code.
Since this is a Javascript-only solution; you can add this button anywhere where you can embed Javascript like Google Blogger, Wordpress, ...
Use a typical jQuery call or auto-load any number of anchor elements with "delicious-button" class.

The article source:http://www.moretechtips.net/2010/07/quite-delicious-button-jquery-plugin.html

Tag: button