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.
I 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.
Content
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 the <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.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>
2. Box Count.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=62"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:65px;'/> </b:if>
3. Button Count.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>
4. Button.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=button&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' 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 a little, as explained below.
- Now again, to Edit the 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, the 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.