How to Add Social Media Share Buttons in WordPress

Share this post:

[UPDATE] This tutorial was written in 2013, since then a lot has changed. There are a dozen of new and powerful social media WordPress plugins available that can do a better job, so if you don’t like getting into technical side of things, then you should check out our post on popular social media plugins.

WordPress is one of the best platforms for blogging and has several advantages over other content management platforms. Because of its popularity, you will find a ton of tutorials, plugins, and code snippets, to help you get started with WordPress. Today, we will show you how to add social media buttons at the bottom of the content area without using any plugin or third party app.

The process is pretty much straightforward, but we will suggest you to backup your theme files, before making any changes. If you don’t want to download the full site backup, then just download the files that are making modifications to.

1. Add the following code in your stylesheet (style.css):

.wpshare {width:100%; margin:10px 2px 10px 2px; }
.wpsharer {float: left; padding-right: 6px;display: inline;}
.wpsharer-digg {margin:0 15px 0 10px;display: inline;float:left;}

2. Add the following code after or before the content tag in single.php file

<div class="wpshare">
<div class="wpsharer">
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>&via=wpkube&count=horizontal">Tweet</a>
</div>

<div class="wpsharer">
<div id="fb-root"></div>
<p><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo urlencode(get_permalink($post->ID)); ?>" send="false" layout="button_count" width="15" show_faces="false" font=""></fb:like>
</div>

<div class="wpsharer">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&r=<?php echo urlencode(get_permalink($post->ID)); ?>"></script>
</div>

<div class="wpsharer-digg">
<a><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script></a>
</div>

<div class="wpsharer"><g:plusone size="medium"></g:plusone>
</div>

<div class="wpsharer">
<script type="text/javascript" src="http://www.blokube.com/evb/button8.php"></script>
</div>
</div>

3. If you’d like to add extra button/widget code then just before last closing div tag add

<div class="wpsharer"><!--Social widget code--></div>

Final Thoughts

While social media buttons do help you get more social shares and better engagement, it is important to split test and see how these social media buttons perform on your site.

Here at WPKube, we are using Floating Social Bar plugin, to show the horizontal floating share buttons. The reason why we prefer to use a WordPress plugin over custom coding the social media buttons, is that it gives us more options (for example, it comes with an option to enable / disable social media buttons anytime we like). Plus Floating Social bar is a fast loading plugin and doesn’t effect our site speed.

If you have any questions, please let us know in the comments below.

We hope this article helped you add social media buttons in your WordPress site. If you liked this article, please follow us on Twitter and subscribe to our newsletter.

About the Author: This post is written by a member of our Editorial team or a guest contributor. If you are interested in writing for us, please get in touch.Get more from Editorial on  and Twitter.
14 comments… add one
  1. Cartoon Coach says

    Hello Dev,
    Thanks for this informative post…and yes you are right…WordPress is by far the best blogging platform! ;)

    J

  2. Ryan Biddulph says

    Hi Dev,

    Thanks for sharing the code. Nice and straightforward, perfect for a non-techie like me ;)

    Ryan

  3. Jym @ Blog Tools and Resources says

    Bit of a technical one hey Dev?

    Still this is useful info for anyone learning more about how to use CSS or wanting to apply sharing buttons above or below posts.

    Thanks for sharing mate,
    All the best,
    Jym

  4. Felipe Brandão says

    Very nice, but I think its not working properly here.
    The twitter icon doesnt appear. Only the word “Tweet”.

  5. Nick @ WP Wiz says

    Clean and concise explanation, thanks for sharing it. Of course there are plenty of plugins out there for automatically dropping in your own share buttons but I, too, prefer to code them into my theme of choice by hand, mainly because it gives me more control of how my buttons’ container appears. In addition to the standard Twitter, FB and G+ buttons, I’ve been seeing a lot of users add Buffer buttons to the collection as well.

Leave a Reply

Disclosure: This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.