• Tweet

• Tweet

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.