First step : You will install a javascript into your blogger template so that the facebook social plugin will work.
HOW TO:
- Goto your Blogger dashboard, choose your preffered blog then click on Template.
- Click on Edit HTML, when it opens search for <body> tag by using CTRL+F.
- Paste the code below immediately below <body>.
<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>
NOTE: If you have such code below the <body> tag before, you don’t need to add it again..so ignore this first step and go to the second step.
Second step : Here we are going to add the like botton so as to display underneath your blog posts.
As i told you earlier before now that i will give out different styles of like bottons ,i have four different types with me you can choose anyone at your wish.
LIKE BOTTONS WITH DIFFERENT STYLES:
(1) 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>
(2) 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>
(3) 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>
(4) BUTTON:
<b:if cond='data:blog.pageType == "item"'>Third step :
<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>
- Again click on Edit HTML in your blogger template, after opening, search for <data:post.body/> using CTRL+ F.
- If you find more than one <data:post.body/> choose the one that appear second.
- Copy any one of the 4 codes styles your want and paste it immediately below <data:post.body/>
I hope i have helped you in knowing how to add facebook like botton to blogger posts with ease. It’s now you turn to do us good by sharing this post and also drop your comments.
Categories:
Blogger/wordpress
hi, how did you add the custom read more button to your blog?
ReplyDelete