An essential step in your blog promotion is to have people voting for you on sites such as digg.com or StumbleUpon. So, why not make it easier to visitors to vote for your articles on social bookmarking sites? In this tutorial, I’ll show you how to create a fancy multi-widget to tell your readers to go vote for your posts.
The problem
Many visitors will not vote for you posts on digg or stumbleupon simply because they read and enjoyed it. They simply don’t think about it, exepted if they come from one of theses websites.
Most social bookmarking sites provides widgets to add to your blog to provide your visitors an easy way to vote for your post. This is functionally good, but what about create something more personal, which will perfectly fit your blog theme colors?
Creating the widget
Let’s create our very own multi-widget. First of it all, download the sample image I created for you. It will serve as the background image in this example, but of course you can change it, or put a background color instead by using css.
On my blog, I chose to display the multi-widget at the bottom of each post. Like this, the reader will only see it if he finished the article, and will probably vote for it if he liked.
Open the single.php file from your blog theme, and paste the following code after your post:
<div id="cwc-vote">
<ul>
<li><a href="http://del.icio.us/post?url=<?php echo the_permalink(); ?>">Del.icio.us (<span id='<?php echo md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);?>'>0</span>)</a></li>
<li><a href="http://digg.com/submit?url=<?php echo the_permalink(); ?>">Digg</a></li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php echo the_permalink(); ?>">StumbleUpon</a></li>
<li><a href="http://reddit.com/submit?url=<?php echo the_permalink(); ?>">Reddit</a></li>
<li><a href="http://www.dzone.com/links/add.html?url=<?php echo the_permalink(); ?>">Dzone</a></li>
</ul>
</div>
We now got a list with links to directly post (or vote if already posted) articles to the following sites: Del.icio.us, Digg, StumbleUpon, Reddit and Dzone.
You can easily add others social bookmarking sites: I can’t guarantee that it will work for all sites, but basically, the link must look like this:
<a href="http://www.yoursite.com/links/submit?url=<?php echo the_permalink(); ?>">
CSS Styling
For now, our multi-widget is fully functional, but a bit ugly. Happily, pasting the following CSS code to your style.css file will make the widget looks good.
#cwc-vote{
/* Don't forget to change the image path */
background: #fff url(images/cwc-vote.png) no-repeat top left;
width:600px;
height:45px;
padding-top:35px;
}
#cwc-vote ul{
list-style-type:none;
margin-left:-20px;
}
#cwc-vote ul li{
display:inline;
margin-right:-10px;
}
#cwc-vote ul li a{
color:#fff;
font-size:13px;
}
Adding live Del.icio.us count
You probably noticed the (0) next to the Del.icio.us link. We’ll use the Del.icio.us api so we can get how much times the post has been bookmarked by users.
Paste the following code in your single.php file, below the multi-widget.
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById("<?php echo md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);?>").innerHTML = urlinfo.total_posts;
}
</script>
<script src='http://badges.del.icio.us/feeds/json/url/data?url=<?php the_permalink() ?>&callback=displayURL'></script>
It is also possible to get the number of digg, but it’s a little harder, especially for beginners. Anyways, if you’re interested about it, tell me and I should make another tutorial.
Now, you have a working multi widget to nicely tell your readers to vote for your article. On a personal note, I just made my first ever digg front page during the time I was writing this post and I think this multi-widget helped a lot. I wish the same to all of you 
Jean-Baptiste Jung
Jean-Baptiste Jung is a 27 years old blogger/web developper/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WpRecipes where Jean shares useful WordPress snippets on a daily basis. When he's not blogging or having fun with codes, Jean loves to spend time with his wife and cat, and travelling everywhere he can.
I entered elements of code in my post above which don't seem to have appeared, if they appear at a ...
I found this MUCH easier to do :
How to make a page specific stylesheet in a Wordpress multiple-paged site:
1. Go ...
Dave, thanks for giving us a try. I strongly recommend reading the full instructions at http://www.ingboo.com/pvm/plugin .
Also, setting a custom ...
thanks for the additional info, will be giving it a go! 
I just gave this a try and in a few minutes was able to customize and add this to my blog post page. Pretty cool! You can see my implementation on my sake blog (using MimboPro theme). Here is an example.
Thanks for this great tutorial!
Timothy
Hey Timothy, glad you liked the turial. You did a great job on your blog!
Nice one, but there should be option for everyone that not use widgets also, like some kind of plugin for WP, maybe with options to setup it… or simple tutorial wihtout widgets.. Please !
Peter: I might think about a WP plugin, but there’s already some nice plugins. What do you mean by “simple tutorial wihtout widgets” ?
@ JBJ – Great post!
@ Peter – If you don’t want to use widgets, I also explained how to hard code it here.
Thanks Kyle, I’m glad you like it!
Great Tips!
I’m alway wait for this kind of tips and you provided it successfully.
Glad you liked the tutorial, shawal
I was thinking about something with CSS, icons and all that stuff.
For example look here: http://www.hongkiat.com/blog/photoshop-shortcuts-tricks-boost-productivity/
There is Spread/Promote that i would like to implement easy on my blog.
Not only SB plugin with simple icons but something like this. Yours post show the widget stuff tutorial how to make this work but plugin with CSS, images and all that would be better.
Tnx.
Great job,I need it right now~
Yeah, you should definitely make a tutorial on how to add the Digg count.
I tweaked my implementation of your idea a little more and added wording for subscribing along with the social networking links. Here is an example.
I’d also like to see a tutorial on adding the Digg count!
thanks again,
Timothy
@Timothy: Great work! Glad to see people using the tutorial!
@All: Ok for the digg count
I’ll try it on my blog, and then I’ll write a tutorial.
Fantastic thankyou, exactly what I was looking for, it would be nice to know how to do the digg count aswell mate if you wouldn’t mind!
Hmm…We don’t have this level of control over templates etc on WordPress.com, any tricks for achieving the same kind of thing on wordpress.com hosted sites?
Hi,
Great stuff by as Besscabiz said, do you have the same tricks for wordpress.com hosted sites?
Many thanks
Had a question is there a way to do this on a website not a blog??? Any help would be great! Thanks Laura
Hello from Madagascar ( not the movie
)
Great tutorial and hack for wordpress !
i don’t speak english, but i have Understand
Sorry for my poor english
and GOOD WORK
Social bookmark has become a revolution after SEO. and adding those social bookmark buttons helps you to popularize your story or site.
Great job, I need it right now
Thanks to the on digger. I found this resource through his digg. I was looking for the customized social bookmarking code not the social bookmarking plugin.
I’ve been using the ShareThis widget for awhile now, but I’ve noticed there is a newer version avail.
Was wondering if there are any caveats to be concerned about if I should remove and install the newer (has more and LARGER icons) of the main social sites?