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 of our post on popular social media plugins.

WordPress is one of the best platforms for blogging and has several advantages.

Because of its popularity, its support community is awesome. You will find various tutorials over internet, which will help you to get started with WordPress. We already have a ton of tutorials that can help you improve and enhance the functionality of your website. Today, we will show you how to add social media buttons at the bottom of the content area.

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

1. Add the following code in your stylesheet (probably 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 increases the number of shares and engagement on your site, but there are studies / reports that confirm that not having any buttons actually increases the shares. So make sure to test and see how theses social media buttons perform on your site.

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 website. If you liked this article, please follow 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.