How To Add Facebook Like Button To Blogger Posts

How To Add Facebook Like Button To Blogger Posts

Facebook-Plugins are essential for every blog to increase social signals. There are various social plugins available for Facebook. We can add a Facebook comment box, which helps to increase visitors through post conversation.

In the same, we add other social sharing buttons like the share buttons, like button. We help these plugins; readers can quickly like and share any article. But we need to install all these plugins manually in our blog.

It may appear a difficult task. But little guidance can help to add them within a few mins. The most important reason to use all social plugins is to collect loyal readers like we prefer to use Facebook like boxes for a page.

It want to add then read about how to add Facebook like box to blogger. So, Today, in this tutorial, we will discuss how to add Facebook like the button to blogger posts, and readers can like articles.

There are many different styles available for the like button. We can adjust and add according to our choice.

How To Add Facebook Like Button To Blogger Posts

Part 1:- Install the Facebook Social Plugin Script For Compatibility.

First of all, we need to install the necessary JavaScript in the blogger template to make Facebook social plugins workable. In case you already had established a script, then skip this portion.

  • Open Blogger Dashboard Of that particular blog >> Then go to Template Section.
  • Click on Edit HTML and Search for code <body> with CTRL+F.
  • Now paste Below given code just below <body> tag.
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1065595340222456',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
  • Now its time to add Facebook like button. For that purpose, follow the next part.

Part 2:- Install Like Button In Blogger Template.

Now there are four different layouts available for Like Button.

1. Standard.

facebook like button standard


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

2. Box Count.

facebook like button box count


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

3. Button Count.

facebook like button count


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

4. Button.

facebook like button


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

Coding for all layout is the same. Just need to adjust little, as explained below.

  • Now again, to Edit HTML section of the blogger template.
  • Search with CTRL+F for code <data:post.body/>
  • It may appear 2, 3 times in codding. Choose which comes 2nd time while searching.
  • Now copy-paste layout code just below to above-searched code.

Layout Settings for Like Button.

To Adjust the size of button size=small to size=large

To Add Share button change send=false to send=true

Note:- For better results, you need to adjust height & width. Otherwise Like button will not display accurately.

We hope you have learned a method to add Facebook like button blogger post and also already how to customize if you have any question, feel free to leave your comments.