How To Add Facebook Like Button To Blogger Posts

0
207


Facebook Plugins are important for every blog to increase social signals. There are various social plugins available for Facebook. We can add Facebook comment box. Which helps to visitor through post conversation. In the same we add other social sharing buttons like share button, like button. We the help these plugins, readers can easily 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 then within few min. Most important reason to use all social plugins is we built loyal readers like we prefer to use Facebook like box for page. It want to add then read about how to add Facebook like box to blogger. So, Today in this tutorial we will discuss about how to add Facebook like button to blogger posts and readers can like articles. Their are many different styles available for like button. We can adjust and add according to our choice.

How To Add Facebook Like Button To Blogger Posts

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

First of all we need to install basic JavaScript in blogger template to make Facebook social plugins workable. In case you already had installed script then simply 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 = "http://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 next part.

Part 2:- Install Like Button In Blogger Template.

Now there are 4 different layout are available for Like Button.

1. 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 same just need to adjust little as explained below.

  • Now again to Edit HTML section of blogger template.
  • Search with CTRL+F for code <data:post.body/>
  • This may code 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 size of button size=small to size=large

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

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

We hope you have learn 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.

NO COMMENTS

LEAVE A REPLY