Create Your Own Fast Social Sharing Buttons For WordPress

Image courtesy of stabilo-boss

Social bookmarking buttons are essential for any blog these days – they’re vital to helping people share content that they find useful and interesting. And with WordPress of course, you have a whole host of plugins to help you add social sharing buttons to your site.

In my experience however, it’s hard to find one that displays the sharing networks that you want to use, with the icons that you want, in the alignment that you want.

In addition, many of these plugins either use Javascript, or a whole host of external references, which are a burden on your server and really slow down your site load time. Aside from being a metric by which Google ranks sites now, it’s well known that sites with slow load times have higher bounce rates, as people look elsewhere for their information.

So I set about creating my own social sharing buttons for Do It With WordPress, which helped removed the last remaining external references on my site and speed up my load time to less than two seconds.

Find your perfect icons

Since you’ll be installing your own buttons from scratch, you’ll need the images that will represent each sharing site that you want to make available from your site.

You can use text links if you prefer, however, I strongly advise that you use images, as your readers will be searching for the familiar iconography to share your article, not a small text link.

To find icons that suit your site, just do a Google search and look for “social sharing icons”, or something along those lines. You’ll find a whole array of icon packs with no end of design varieties. For example, check out this article from Specky Boy, which has a collection of some great social bookmarking icons.

You’ll obviously need to find a set which has icons for every network that you intend to use – you don’t want to mix and match icons from different sets because it will look rubbish.

Upload all the icons to your server so that you will know the URLs of all the images. I recommend placing them in an images folder in your active theme’s folder under the wp-content folder.

Where to add the code

The whole idea of using social sharing buttons is to include them automatically on each post, so that your readers can share every article on your site. This also eliminates the need for you to put them in every post manually (though that is certainly possible if you like making life harder for yourself).

In order to do that, you need to code it into your theme files, which requires editing your theme files, namely single.php (which is the file that is used to display single articles). Have a look at this article if you need a little help in learning how to edit your theme files.

Find where you want to put your social sharing icons in single.php. If you want to put them after the content, you’ll need to look for the following line of code, which displays the main content and start inserting it after that:

< ?php the_content('Read more »'); ?>

Of course, you can put the icons elsewhere – just find the appropriate point in single.php and insert your code there instead. Before you get going though, just be sure to make a backup/copy of your file in case you mess it up.

Creating the buttons will consist of two steps: adding the images (icons) that people will click on and then adding in the code that will link to the sharing site when the icon is clicked.

Add the images

Once you’ve settled on where the icons are going to go, start adding in the images. You’ll need the URLs of the images, which you uploaded earlier.

The syntax of the img tag will be as follows:

<img src="<?php bloginfo('template_directory'); ?/>/images/twitter.png" alt="Tweet this!" />

This is based on the images being uploaded where I mentioned earlier in this article (/wp-content/themes/activetheme/images/). You can change it to a specific URL (starting with http://) if it is located elsewhere. Obviously, you’ll need to change twitter.png to the appropriate filename for each network that you’re accounting for. Likewise, the alt tag will also change (the alt tag is text that appears if an image fails to load).

Repeat this process for all the icons that you’ll be adding.

Add the code

Now you’re ready to add the code to the each image. You might even want to save your progress and view an article to see if the images are displaying the way you had hoped.

All we’re going to do is add a hyperlink to each image, so that when they’re clicked on, they go to the sharing site and send the appropriate information.

In order to add a hyperlink to each image, all you need to is add the following code before and after the img tag that you added in the previous step:

<a href="" title="">
<img />
</a>

The href and title will change depending on which network you are working on. Use the following lines of code to create a hyperlink to each sharing site:

Twitter:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - < ?php the_permalink(); ?>" title="Tweet this!"></a>

Facebook:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=< ?php the_title(); ?>" title="Share on Facebook."></a>

Google Buzz:

<a href="http://www.google.com/buzz/post?message=<?php the_title(); ?>&url=< ?php the_permalink(); ?>" title="Buzz it!"></a>

Reddit:

<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=< ?php the_title(); ?>" title="Vote on Reddit"></a>

Digg:

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=< ?php the_title(); ?>" title="Stumble it"></a>

Stumbleupon:

<a href="http://digg.com/submit?url=<?php the_permalink(); ?>&title=< ?php the_title(); ?>" title="Digg this!"></a>

LinkedIn

<a href="http://www.linkedin.com/shareArticle?mini=true&title=<?php the_title(); ?>&url=< ?php the_permalink(); ?>" title="Share on LinkedIn"></a>

Del.icio.us:

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=< ?php the_title(); ?>" title="Bookmark on del.icio.us"></a>

Google+

<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php the_permalink(); ?></a>

Tweaking the Twitter syntax

By virtue of the service, you need to make sure that Twitter messages are as short as possible. You also want to leave room for the reader to add a few words of their own about your article. (Thanks to Kimberly and Brian for this suggestion)

As such, you may want to convert the post URL to a short URL. I’m going to show you how to do using the most popular URL shortening service, bit.ly.

First, you need to create a function to tell WordPress to get a short URL for your post. To do this, you will need a bit.ly account. Once you’ve created an account, go to your Account Settings and take note of your API key and your username.

Now open your functions.php file, scroll all the way to the end and paste in the following code, substituting in your username and API key for yourbitlyusername and yourbitlyAPIkey:

< ?php
function getBitly($url) {
$bitly = file_get_contents("http://api.bit.ly/v3/shorten?login=yourbitlyusername&apiKey=yourbitlyAPIkey&longUrl=$url%2F&format=txt");
return $bitly;
}
?>

Save your functions.php and head back to single.php and change the link for your Twitter button to the following, which replaces the normal full URL with a shortened URL using your bit.ly acount:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - < ?php $bitly = getBitly(get_permalink($post->ID)); echo $bitly ?>" title="Tweet this!"></a>

You can even take it a step further, like I have and drop in your Twitter username to the status message, so that you become part of the conversation. For example:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - < ?php $bitly = getBitly(get_permalink($post->ID)); echo $bitly ?> via @daclements" title="Tweet this!"></a>

Are there any networks that I didn’t cover that you’d like to see a link for? Did you have trouble getting it to work? I’d be glad to help you figure it out.