Thursday, June 6, 2013

How to Add Social Sharing Buttons Below Every Post In Blogger

Author: Gagan Masoun
Social Sharing Buttons
If readers share your articles on different social sharing website then you can fetch more traffic for your blog or website. Social media is playing a great role for blogging profession. If you will get more sharing then search engines will improve your blog rankings. Today, In this short tutorial we will show you how to add social sharing buttons widget below every post in blogger.

Add social Sharing Buttons Widget Below Post Title in Blogger

  • Go to Blogger Dashboard >> Template >> Edit HTML
  • Press Ctrl+F & Find </head> Tag.
  • Copy-Paste Given Below Code Before </head> Tag.
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
  • Now, Find <data:post.body/>  or in some blogger template it look like this  <p><data:post.body/></p> and Paste the below code after it.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:4px;'>
<table border='0'>
<tbody><tr>
<td>
<div style='margin-right:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='BlogsDaddy' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<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;'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='margin-right:10px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</div>
</td>
</tr>
</tbody></table></div>
</b:if>
You May Like To Read:

Customization:

  • Replace the pink color highlighted title with your own Twitter username.
  • You also adjust border width by giving value to table border in above code:
We hope this tutorial help you to add social sharing buttons widget below every post in your blogger blog. If you need any further help regarding this then feel free to ask by comment box. Thanks & Happy Blogging!

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

0 comments:

Post a Comment