Adding Facebook like button to blogger posts will help you to increase your blog traffic and socialize your blog. Having your content shared on Facebook will bring some traffic to your blog. Having social media appearance is very important for success of blogs. Today I’m writing this simple tutorial about adding Facebook like button to blogger posts. You will have different options like adding this like button to start or at the end of post. Further you control this button to appear only on Homepage or only on Post pages.
Adding Facebook Like Button to Blogger Posts
1. Go to Blogger Dashboard >> Template [Backup Template] >> Edit HTML >> Check “Expand Widget Template” >> Search for this code in template:
|
1 2 3 |
<data:post.body/> |
2. Codes of Facebook Like Buttons are given below. If you want to show Facebook Like button at the start of post, then paste Button code before <data:post.body/> in template. And if you want to show Facebook Like Button at the bottom of post, then add button code after the <data:post.body/>.
Facebook Like Buttons
Facebook Like buttons are available in three styles. Now, its up to you which style you like and use. I’m adding the codes of all of them and you can select among them.
1. Vertical Count
2. Horizontal Count
3. Without Count
1. Vertical Count
|
1 2 3 |
<b:if cond='data:blog.pageType != "static_page"'> <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:55px; height:62px;'/> </b:if> |
2. Horizontal Count 
|
1 2 3 |
<b:if cond='data:blog.pageType != "static_page"'> <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. Without Count
|
1 2 3 |
<b:if cond='data:blog.pageType != "static_page"'> <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> |
Now, you can add any of these three styles to your blog. By default these Facebook Like Buttons will be shown every where except Static Pages. But there are chances that you may want to show that Facebook Like Button only at Homepage or just at Post pages. So if you looking for this, then follow these steps:
1. Replace this piece of code of above Facebook Like Buttons :
|
1 2 3 |
<b:if cond='data:blog.pageType != "static_page"'> |
With:
i: this if you want to display Facebook Like Button only on Homepage.
|
1 2 3 |
<b:if cond='data:blog.url == data:blog.homepageUrl'> |
ii: this, if you want to display Facebook Like Button only on Post Pages.
|
1 2 3 |
<b:if cond='data:blog.pageType == "item"'> |
iii: this, if you want to display Facebook Like Button only on any single Page/url of your blog.
|
1 2 3 |
<b:if cond='data:blog.url == "Blog Post URL"'> |
Replace Blog Post URL with url, where you want to show the Facebook Like Button.
So guys, this blogger tutorial was all about How to Add Facebook Like Button to blogger posts. I have added some extra options for you to modify the display of Facebook Like Buttons. Hope this tutorial “Adding Facebook Like Button to Blogger Posts” will help you.
thanks bro .
thanks Taimoor
Hi, I used to have the “Like” button at the bottom of all my posts but once I bought a domain name and switched from wisevibes.blogspot.com to wisevibes.org (still powered by blogger), my “Like” buttons disappeared.
I have figured out a way to have it on my homepage by going to the facebook page and getting the code but then it doesn’t show at the bottom of all posts – it shows only once at the bottom of the page.
I also cannot find on my template (it was there before I switched the name from “blogspot.com” to “.org” but is not there anymore. I am using the dynamic view template in blogger. Can you help me please? Thanks!
in the last post i meant i can’t find in my template.
data:post.body
Hi Aliza,
I have visited your template and can see that you are using “Simple” template by Blogger. I can not see any like button right now, may be you have made some changes. But I will suggest you to install Addthis Widget on your blog. This widget will allow you to add Facebook Like, Tweet, Google Plus and many other buttons to share your content.
Just go to http://www.addthis.com >> Register for an account >> Go to this link https://www.addthis.com/get/sharing to create your widget (add or delete buttons) and click button “Install Blogger Widget” and it will automatically install this widget on your blog.
Reply again if you need any help.