Add Social Bookmark Links to your Theme

August 5, 2008 · Print This Article

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

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.


Your choice for site templates and wordpress themes

Comments

Got something to say?

You must be logged in to post a comment.