How to add media sharing buttons below every post title

For an easy way of sharing your desired information to the internet community. It is then necessary to put media sharing widget on your blog.

A widget today is an enhance version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has a big impact in accumulating blog traffic through the shares made by these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets start adding these valuable buttons to your blog.

Add Social Sharing Buttons Below Post Titles

Here is the method for blogspot blogs. If you are using Wordpress then you may please add the code shared below inside your template by going to template section.

Please follow the steps below if you use Blogger. Go To Blogger > Design > Edit HTML Backup your template Click on the box at top right that says "Expand Widget Templates" Then search for Just above it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MYBLOGGERSNIPERS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

Do these changes:

To change the background color of the container edit #FEE6E6 

Replace MYBLOGGERSNIPERS with your blog title so that it appears on the add this button upon mouse hover. As shown below:

5. Note: skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin> and just below it paste the following code:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

6. Save your template.

Then see your blogs and look what's appearing on post pages and not on the homepage. If you want to show it even on your homepage then just delete the two blue lines from the code above.

I am so grateful to mybloggertricks for the ideas about this post.

Take Care Friends!