Add Social Media Buttons to a WordPress Blog

Add Social Media Buttons to a WordPress Blog

You’ve got a blog and now you want to add social sharing buttons to that blog.

Why? Search engines are just one way that people can find your blog. Another is through the use of social media.

Unless you’ve been living in a cave for the past decade, you’ll know that social media is pretty big right now. Facebook has over 750 million users and each user has on average 130 friends. If one of those users visits your blog post and wants to share it with their friends, without sharing buttons they’ll have to copy the URL, visit the Facebook website and manually post it onto their wall.

Sure there’s a chance they would do this but why not make it easy for them by allowing them to share your content with a simple click of a button?

Facebook Like Button

The same goes for many other social networks.

4 key social networks are:

  • Facebook
  • Twitter
  • LinkedIn
  • Google+

Google+ is the baby of these four and, at time or writing, is still only in testing stage. Despite that, it has thousands of users and is set to be a major contender for Facebook.

Google provide a sharing button in the form of “+1”. Adding that button to your blog is actually a little trickier than the others mentioned here so it might be worth checking out our other blog post on the +1 button.

For the remainder, there are two main ways to add them to your WordPress blog post.

One is in the form of WordPress plugins. There are a number of plugins that offer a simple way to add sharing buttons to your blog. However, for me at least, many of these feel quite dated and don’t allow a great deal of customisation.

The second way is to add them manually. Each of the big social networks has a resources page that provides you with the code to add the buttons to your blog posts. At first it might look like you have to manually add them in the ‘html’ tab of each blog post you write, but there is of course a much easier way to add them which means they will automatically display on each new blog post.

First off, if you want to check out the small customisations of these buttons for yourself, the resource pages can be accessed as follows:

You don’t actually have to have your own account in any of the above networks to display the code on your website or blog, but it’s a good idea to so that you can test the buttons for yourself once you have placed them.

The problem with using the above is that it can be tricky to get them display neatly on your post. Buttons could be out of line and with random spacing which can cause a real headache and make your blog look unprofessional.

One way to get them to line up correctly is through the use of a table.

html Code for Social Media Buttons

To save you a heap of effort, you can use the code below. This code is the code used to display the sharing buttons that appear at the bottom of this blog post.

<p><table width=”430″ border=”0″>
<tr>
<td align=”left” valign=”middle” width=”60″><div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=154603594613054&xfbml=1″></script><fb:like href=”” send=”false” layout=”button_count” width=”60″ show_faces=”true” font=”arial”></fb:like></td>
<td align=”left” valign=”middle” width=”50″><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal”>Tweet</a><script width=”50″ type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script></td>
<td>
<script width=”60″ src=”http://platform.linkedin.com/in.js” type=”text/javascript”></script>
<script type=”IN/Share” data-counter=”right”></script>
</td>
<td align=”left” valign=”middle”>
<g:plusone size=”medium”></g:plusone>
</td>
</tr>
</table>
</p>

Just remember that the Google +1 button, used in the code above, won’t display correctly unless you use the extra code mentioned in our other blog post. If you’d rather forget about the Google +1 button, use the following code instead:

<p><table width=”430″ border=”0″>
<tr>
<td align=”left” valign=”middle” width=”60″><div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=154603594613054&xfbml=1″></script><fb:like href=”” send=”false” layout=”button_count” width=”60″ show_faces=”true” font=”arial”></fb:like></td>
<td align=”left” valign=”middle” width=”50″><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal”>Tweet</a><script width=”50″ type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script></td>
<td>
<script width=”60″ src=”http://platform.linkedin.com/in.js” type=”text/javascript”></script>
<script type=”IN/Share” data-counter=”right”></script>
</td>
<td align=”left” valign=”middle”>
</td>
</tr>
</table>
</p>

This code only displays the Facebook Like, a LinkedIn share button and a Tweet button.

Where do I place the code?

As always, it’s not a good idea to try the following unless you have backed up your files. One way is to open Notepad and copy the full existing content of the .php file you’re about to edit into a new .txt file. Should anything go wrong, you can replace your modified code with the code you have saved in your Notepad file.

If in doubt, ask a web professional to help out.

  1. On your WordPress dashboard, head to ‘Appearance’ and then ‘Editor’.
  2. In the list of files on the right column, find the file called ‘single.php’ or ‘single-post.php’, depending on your theme.
  3. Click on that file to load it in the central editor.
  4. Find the line of text that, most likely, says ‘php the_content(”); ?>’
  5. To place the sharing buttons at the bottom of your post (like in this blog post) paste the above code directly after the below the <?php the_content(”); ?>. To place the sharing buttons at the top of your post after the title, paste the code directly above the <?php the_content(”); ?>

Save the file and then head to one of your live blog posts to check that it has worked. If anything displays oddly on the page, restore your old file and find someone that can help you.

If they display correctly, give each one a go for yourself and then check out how it looks on the relevant social network.

Flickr Credit: Ed Yourdon