DIY Social Bookmarking buttons in WordPress

I recently redesigned the theme I am using for this blog and one of the things I’m happiest about is that the social link buttons are now in the footers of my posts along with the tag, category and poster information. This is where I’ve always wanted these buttons to live and I thought that how I achieved this may be of interest to others.

I’ve wanted to add link buttons to the end of my tops for social bookmarking sites like Digg, StumbleUpon and reddit, etc for a while now but never quite managed to get the syntax correct when trying to build the links myself in php. Recently I discovered the excellent sociable plug-in for WordPress that allows you to add link buttons for almost sixty different social bookmarking sites to the end of your posts, which is very handy. However I was not a great fan of where these buttons were inserted: right at the end of the text body of the post.

I decided I’d really prefer the buttons be placed in the post footer area for each post, so I started looking through the source of the sociable plug-in to see how it generated its links and it turns out it was pretty simple. The following php function is what I ended up with. It will build link buttons for five social bookmarking sites: del.icio.us, digg, reddit, stumbleupon and technorati.

function my_social_links() {
	$post 		= $wp_query->post;
	$permalink 	= urlencode(get_permalink($post->ID));

	$title 		= urlencode(get_the_title($post->ID));
	$title 		= str_replace('+','%20',$title);

        $templateDir = get_bloginfo('template_directory');

	echo '<a href="http://del.icio.us/post?url='.$permalink.'&amp;amp;amp;amp;amp;amp;amp;title='.$title.'">';
	echo '<img src="'.$templateDir.'/images/delicious.png" title="del.icio.us"/>';
	echo '</a>';

	echo '<a href="http://digg.com/submit?phase=2&amp;amp;amp;amp;amp;amp;amp;url='.$permalink.'&amp;amp;amp;amp;amp;amp;amp;title='.$title.'">';
	echo '<img src="'.$templateDir.'/images/digg.png" title="digg"/>';
	echo '</a>';

	echo '<a href="http://reddit.com/submit?url='.$permalink.'&amp;amp;amp;amp;amp;amp;amp;title='.$title.'">';
	echo '<img src="'.$templateDir.'/images/reddit.png" title="reddit"/>';
	echo '</a>';

	echo '<a href="http://www.stumbleupon.com/submit?url='.$permalink.'&amp;amp;amp;amp;amp;amp;amp;title='.$title.'">';
	echo '<img src="'.$templateDir.'/images/stumbleupon.png" title="StumbleUpon"/>';
	echo '</a>';

	echo '<a href="http://technorati.com/faves?add='.$permalink.'">';
	echo '<img src="'.$templateDir.'/images/technorati.png" title="Technorati"/>';
	echo '</a>';
};

The programmers amongst you will notice the recurring pattern in how the permalink and title are concatenated into the required URL format for each site. And that the interesting bit of code is the first part where the post permalink and titles are retrieved and then URL encoded so they can be embedded into the links. I added the above function to my functions.php file, so I can access it from anywhere and I currently call it from the loop on my main index page and on the single post pages.

I’d also like to recommend using the SyntaxHighlighter plug-in for WordPress for your code highlighting needs as it is more wordpress compatible and does not have issues with the TinyMCE editor stripping out tags or replacing ‘ with %27.