How to Add Facebook (Share/Like) Button Below Post Title in Blogger (Blogspot)

Social Media like Facebook, Twitter, Pinterest, Google+ has significant effect to help increasing traffic to your blog or website. Although sharing in Social Media doesn’t gives direct effect to increase our website rank in SERP, but Social Media is one of powerful tool to bring direct traffic, especially if you have large community in Social Media. To make people easier to share our blog content in social media, we need to add a share button on our blog. This time, i will give you tips how to add Facebook button (Share / Like) below the title of your blog posts.

Read the following guidelines:

1. Login into your Blogger Dashboard and choose blog you want to modify.
2. Click Template and Click Edit HTML.
3. Click Proceed and don’t forget to check Expand Widget Templates checkbox.
4. Search code below and place the code below it

<data:post.body/>

5. There are two type of Facebook button you can use, which are Facebook Share & Facebook Like button. Copy the script below

Facebook Share Button

Small Counter Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;margin-bottom:10px;'>
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
</b:if>

Large Counter Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;margin-bottom:10px;'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
</b:if>

Small Button without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;margin-bottom:10px;'>
<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
</b:if>

Facebook Like Button

Standard Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding: 10px 0px 0px 0px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
</div>
</b:if>

Small Counter Button

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 5px 0px;'>
<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&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</div>
</b:if>

Large Counter Button

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 5px 0px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
</b:if>

6. Click Save Template and you’re done

Incoming search terms:

• button below
• facebook like counter png
• google like button with box
• facebook share button title description fb_share
• facebook sharer php each post title blogger
• fb twitter share with costume image script
• gadgets for blogger facebook twitter icon
• how to add a facebook twitter share like buuton in side of the blogger

Be Sociable, Share!

•