While putting together the recent redesign for this site, I decided it was high time I stuck some share/bookmark links on posts. As far as driving traffic towards the site goes, making it as easy as possible for people to share links to my posts is a no brainer.

The problem I had up to now is that the most obvious solutions (ie, ShareThis) involved including JS files from other sites, which I found was leading to the site loading slowly (and sometimes not at all), and other plugins were a bit ugly and didn’t really fit my design.

The end result was me doing a bit of research into the links each of the popular sharing services used, finding a funky icon pack that would actually fit the site and not just looked like I’d tacked a ton of other peoples logos at the bottom of each post, and a bit of CSS for positioning and blending them into the background. Add the necessary HTML to the top of comments.php and voila! Share links on every page, without the need for a separate plugin.

So, for the benefit of anyone looking to do the same, here’s a breakdown of how I did it:

Find some icons

You’ll need to dig around for some free icons (or you could steal mine, I’d link you to the originals except I forget where I got them from!). Another nice set I found is here.

For this example, you’ll need an image for Email, Twitter, Facebook, Delicious, Digg, Posterous, Stumbleupon, Friendfeed, Google & RSS. You can add more but of course you’ll need to find the relevant links.

Next, you need to put them somewhere on your site. If you know HTML, you can put them wherever you like and simply change the URL in the example links below – otherwise, ensure there is an images folder directly within your theme folder, and inside there create a share folder. Inside there, put the images to each of the bookmarking sites, naming them as [service].png – so twitter would be twitter.png, delicious would be delicious.png, etc. If your icons aren’t .png files, then you’ll need to use that instead (twitter.jpg, etc) and slightly alter the links in the example code below.

Set the permalink, title & short permalink (if available)

First, open up comments.php within your theme folder. Now, at the very top, you want to set the title, full permalink and shortened permalink.

<?php
$pageId = get_the_id();
$pageTitle = urlencode(get_the_title());
$shortLink = (function_exists('get_shortlink')) ? urlencode(get_shortlink($pageId)) : urlencode(get_permalink($pageId));
$permaLink = urlencode(get_permalink($pageId));
$longPageTitle = sprintf(
'%s+|+%s',
$pageTitle,
urlencode(get_bloginfo('name'))
);
?>

A lot of this is a vanity thing – on some sites I want to use the full permalink, but for things like Twitter its better to use a shortened link than to force the user to shorten it themselves. Also, whereas some sites I may want to just show the post title, sometimes I want to tack the site address onto the end. I couldn’t say why I do this exactly, it pretty much comes down to personal preference.

Note: Shortened permalinks are only available if using the WordPress Stats Plugin. If this isn’t installed, the short permalink will just be identical to the same as the long permalink.

Add the share links

Now we have the URLs and titles ready, we need to add the actual links to the page. In comments.php, underneath where you added the code above, add the following code:

<div class="shareIcons">
<a href="mailto:?subject=Check out this article: <?php the_title(); ?>&amp;body=<?=$permaLink; ?>" target="_blank" title="Email this post">
<img src="<?php bloginfo('template_url'); ?>/images/share/email.png" alt="Email this post" />
</a>
<a href="http://twitter.com/home/?status=<?=$pageTitle; ?> - <?=$shortLink; ?>" target="_blank" title="Tweet this post">
<img src="<?php bloginfo('template_url'); ?>/images/share/twitter.png" alt="Tweet this post" />
</a>
<a href="http://www.facebook.com/sharer.php?u=<?=$permaLink; ?>&amp;t=<?=$pageTitle; ?>" target="_blank" title="Share on Facebook">
<img src="<?php bloginfo('template_url'); ?>/images/share/facebook.png" alt="Share on Facebook" />
</a>
<a href="http://delicious.com/save?url=<?=$permaLink; ?>&amp;title=<?=$longPageTitle; ?>" target="_blank" title="Bookmark on delicious">
<img src="<?php bloginfo('template_url'); ?>/images/share/delicious.png" alt="Bookmark on delicious" />
</a>
<a href="http://digg.com/submit?url=<?=$permaLink; ?>&amp;title=<?=$pageTitle; ?>" target="_blank" title="Submit to Digg">
<img src="<?php bloginfo('template_url'); ?>/images/share/digg.png" alt="Submit to Digg" />
</a>
<a href="http://posterous.com/share?linkto=<?=$permaLink; ?>&amp;title=<?=$pageTitle; ?>" target="_blank" title="Share on Posterous">
<img src="<?php bloginfo('template_url'); ?>/images/share/posterous.png" alt="Share on Posterous" />
</a>
<a href="http://www.stumbleupon.com/submit?url=<?=$permaLink; ?>&amp;title=<?=$pageTitle; ?>" target="_blank" title="Submit to stumbleupon">
<img src="<?php bloginfo('template_url'); ?>/images/share/stumbleupon.png" alt="Submit to Stumbleupon" />
</a>
<a href="http://friendfeed.com/?url=<?=$permaLink; ?>&amp;title=<?=$pageTitle; ?>" target="_blank" title="Share on friendfeed">
<img src="<?php bloginfo('template_url'); ?>/images/share/friendfeed.png" alt="Share on Friendfeed" />
</a>
<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=<?=$permaLink; ?>&amp;title=<?=$longPageTitle; ?>" target="_blank" title="Save to Google bookmarks">
<img src="<?php bloginfo('template_url'); ?>/images/share/google.png" alt="Save to Google bookmarks" />
</a>
<a href="<?php echo get_post_comments_feed_link(); ?>" target="_blank" title="Comments RSS feed for this post">
<img src="<?php bloginfo('template_url'); ?>/images/share/rss.png" alt="Comments RSS feed for this post" />
</a>
</div>

Woah! What the hell does all this mean? Unfortunately, if you don’t know HTML then you’ll just have to take my work for it that the links are right. For each one, its simply a case of passing through a URL encoded version of the link back to your page, and the page title. When clicked, each site knows what to do with the info you pass it.

Style it!

I’ll leave it up to you how you want to do this, but as a tip, adding the link p.share { text-align:center; } to your stylesheet will set you well on your way…

The end result – check at the bottom of this post (above the comments).

Hope this is some help to someone. I’ve tried to make it as simple as possible, but inevitably you may need at least a vague understanding of HTML to get this to work. If you’re really struggling, remember there are other options in the form of plugins – such as ShareThis or Add To Any.