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: "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:'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'>
<!-- {
url:"<data:post.url/>"
,title:"<data:post.title/>"
,button:"wide"
} -->
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
- 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.
* As in the official button, This plugin includes a MD5 script by Paul Johnston.
Web developer, jQuery plugin author, social media fan and Technology Blogger.
Thanks for sharing. This looks handy
Nice plugin, I love it :)
Thanks @Kawsar & @Paul,
I'm glad you like it
Good stuff, thanks! Now maybe my developer will be able to put a social bookmarking button up that works!
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:)
Thanks @Ronald, Give it a try and let me know :)
Great Job once again Mike :) - this one looks really good . Now can you please make it available as a WP plugin ? pleeeaase????
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.
Great tutorial, the button looks delicious. Thank you.
Thanks for this.
this button always displayed in different line when I put this button side-by-side with another bookmarking button...?
@Arranda,
Please, email me the url