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 ๐Ÿ™‚

Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Follow Kyle on Twitter @KyleEslick!

  1. Timothy says:

    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

  2. jbj says:

    Hey Timothy, glad you liked the turial. You did a great job on your blog!

  3. Peter says:

    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 !

  4. jbj says:

    Peter: I might think about a WP plugin, but there’s already some nice plugins. What do you mean by “simple tutorial wihtout widgets” ?

  5. Kyle Eslick says:

    @ JBJ – Great post!ย ย 

    @ย Peter – If you don’t want to use widgets, I also explained how to hard code it here.

  6. Thanks Kyle, I’m glad you like it!

  7. shawal says:

    Great Tips!

    I’m alway wait for this kind of tips and you provided it successfully.

  8. Glad you liked the tutorial, shawal ๐Ÿ™‚

  9. Peter says:

    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.

  10. David Lau says:

    Great job,I need it right now~

  11. Keenan Payne says:

    Yeah, you should definitely make a tutorial on how to add the Digg count. ๐Ÿ˜€

  12. Timothy says:

    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

  13. @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.

  14. Steve Tolley says:

    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!

  15. Besscabiz says:

    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?

  16. Duffer2205 says:

    Hi,

    Great stuff by as Besscabiz said, do you have the same tricks for wordpress.com hosted sites?

    Many thanks

  17. Laura says:

    Had a question is there a way to do this on a website not a blog??? Any help would be great! Thanks Laura

  18. Sharkurban says:

    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

  19. Sandy says:

    Social bookmark has become a revolution after SEO. and adding those social bookmark buttons helps you to popularize your story or site.

  20. Altin Fiyatlari says:

    Great job, I need it right now

  21. Ritu Rai says:

    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.

  22. Neil says:

    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?

Trackbacks/Pingbacks »

  1. Hot Links To Beat The Heat | This Month In SEO - 8/08 | TheVanBlog | Van SEO Design says:
  2. Making A Social Bookmark Background | Photoshop Tutorials says:
  3. Making A Social Bookmark Background | 256Studio says:
  4. 100+ Killer Wordpress Resources | Steffan Antonas' Blog says:
  5. DivageekDesigns.com » Blog Archive » How to Add Social Networking Icons to your Blog says:
  6. Empower Readers To Distribute Your Content โ€” { Suzanne Ahjira } says:
  7. 50 Wordpress Resources that are Guaranteed to Improve Your Blog! | MattFlies.com says:
  8. Details on the 10 Most Helpful Wordpress Design Blogs | Arbenting Freebies says: