How To Add Facebook Like Button To Blogger Posts
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 increase 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 them within few min. Most important reason to use all social plugins is to collect 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 = "//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 == "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 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
Post a Comment