Home > Blogger, Blogging, Facebook, Internet Business > How to Add Facebook (Share/Like) Button Below Post Title in Blogger (Blogspot)

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.

facebook button for blogger

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

facebook share 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

facebook share 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

facebook share 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

facebook like 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

facebook like 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

facebook like 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

Related Posts Plugin for WordPress, Blogger...
Be Sociable, Share!
  1. August 8th, 2015 at 05:19 | #1

    A single click on the Like button will like pieces of content on the web and share them on Facebook.

  1. No trackbacks yet.