How To: Add Social Bookmark Links to your Theme

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