How to Add Social Media Share Buttons in WordPress

Share this post:

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.

In this post i will talk about how to add social media buttons after or before the content area.

1. Open the style.css or custom.css and at the very bottom add:

.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 these social widgets 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. For Thesis Users – please skip this step if you’re not using thesis theme

Open custom_functions.php file and at very bottom add

function footer_buttons() {
if (is_single())
{
?>
<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>
<?php
}
}
add_action('thesis_hook_after_post', 'footer_buttons');

4. 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>

Please note you need to follow the instructions for setting up Google +1 button.

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