How can I add submit buttons for sites like Digg and del.icio.us to my WordPress blog?
Adding a set of sharing buttons to your WordPress blog posts isn’t too complicated of a matter. All you need is a dash of PHP, a little HTML, and some CSS rules to make everything look pretty. In this article, I will step through the different pieces of code necessary to put together buttons to submit a WordPress blog post to Digg, StumbleUpon, del.icio.us, and Facebook.
In order to add this feature to your blog posts, you must be comfortable editing the PHP files that power your WordPress theme. If you have never done this before, I suggest you use Google to find a few “introduction to PHP” programming tutorials. After that, start reading up on WordPress theme development. If you make a mistake, you may render your blog useless until you either figure it out, or find someone who can do so for you.
You’re still here? OK, let’s get on with it…
Modify single.php
I chose to add my sharing buttons to single.php, which is the theme file WordPress uses to format the permanent location of a blog post. These modifications will also work within “the loop” in index.php.
In order to construct the hyperlinks for each of the social networking/sharing sites in this example, I referred to “How to Add Social Networking and Sharing Buttons to Your Site“.
<?php
// Construct the URL to the current page and URL-encode it.
$share_url = urlencode(get_permalink($post->ID));
// Get the WP title for the current page, and URL-encode it.
$share_title = urlencode(the_title('', '', FALSE));
print <<<EOF
<div class="share">
<a href="http://digg.com/submit?phase=2&url=$share_url"><img src="/images/sharing/digg.png" alt="Digg icon" /></a>
<a href="http://www.stumbleupon.com/submit?url=$share_url&title=$share_title"><img src="/images/sharing/su.png" alt="StumbleUpon icon" /></a>
<a href="http://del.icio.us/submit?url=$share_url&title=$share_title"><img src="/images/sharing/delicious.png" alt="del.icio.us icon" /></a>
<a href="http://www.facebook.com/sharer.php?u=$share_url&t=$share_title"><img src="/images/sharing/facebook.gif" alt="Facebook icon" /></a>
</div>
EOF;
?>
Output:
Well, it works, but it is not very attractive. Using a few simple CSS rules, we can spice up these icons a little bit.
Pull it together with CSS
div.share a img {
padding: 5px;
}
div.share a:hover img {
background: #eeeeee;
border: solid 1px #cccccc;
padding: 4px;
}
Output:
Amazing what a little whitespace and hover action can do, eh? That is all there is to it. If you wish to add or remove buttons from this little menu, all you need to do is construct the proper URLs and append hyperlinks to the content of <div class=”share”>. For instructions on how to construct submission URLs for sites similar to the ones used in this tutorial, consult “How to Add Social Networking and Sharing Buttons to Your Site“.
