While you blogging with your own blog, you may interest in enabling your viewers to share your blog content through social media to their profiles or friends. It enables your blogger friends to share information easily and help to increase your blogger traffic through sharing content over social media. Such a way is Facebook Like button. It interpret you, how many Facebook users interest in particular post in your blog and sharing it over their Facebook profile. Now Facebook Like plugin includes a Share button along with it. So while your friends sharing your blog contents over their profile, they may able to share your posts with their Facebook friends too.
It doesn't matter you are Facebook member or not. You can implement Facebook Like button to let other Facebook members to vote on your blog posts. There are two implementations of Like button, XFBML and Iframe. But here we gonna use XFBML version and its also available in HTML5 markup which is more versatile and supports Share button.
But the only disadvantage with Facebook like button is, if you migrate to another domain after implementing like button, the likes will be vanished and you can't restore them back. If you wish to migrate to another domain, just don't depend on your Facebook likes. It's just a motivator and believe in the content you provide on your blog. So you won't need to worry about likes. The most important thing is content quality and you can gain likes back for them anytime.
Before You Go:
* Unless if you have implemented Facebook JavaScript SDK in your blog, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.
* If you are a Facebook member, you can see insights for your posts being liked and shared on Facebook and you are allowed to customize image and snippet posted on user's wall whenever they like your posts through Facebook Like social plugin. If you would like to grab those features, implement Facebook Open Graph Protocol on your blog.
But the only disadvantage with Facebook like button is, if you migrate to another domain after implementing like button, the likes will be vanished and you can't restore them back. If you wish to migrate to another domain, just don't depend on your Facebook likes. It's just a motivator and believe in the content you provide on your blog. So you won't need to worry about likes. The most important thing is content quality and you can gain likes back for them anytime.
Before You Go:
* Unless if you have implemented Facebook JavaScript SDK in your blog, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.
* If you are a Facebook member, you can see insights for your posts being liked and shared on Facebook and you are allowed to customize image and snippet posted on user's wall whenever they like your posts through Facebook Like social plugin. If you would like to grab those features, implement Facebook Open Graph Protocol on your blog.
Steps:
1. Go to Blogger Dashboard.
2. Click on your Blog Title.
3. Navigate to Template tab.
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.
4. Click on Edit HTML button.
5. Search for <data:post.body/> in template and add one of following code according to your preferred implementation code and layout style just after that. You can use XFBML or HTML5 markups.
Notes:
* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.
* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.
i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">
* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.
* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.
* If you are planning to use XFBML markup of this plugin, then it may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.
xmlns:fb="http://ogp.me/ns/fb#"
i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">
Standard Layout Style
XFBML Markup
<b:if cond='data:blog.pageType == "item"'>
<fb:like expr:href='data:post.url' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' width='450'/>
</b:if>
<fb:like expr:href='data:post.url' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' width='450'/>
</b:if>
HTML5 Markup
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-like' expr:data-href='data:post.url' data-share='true' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
<div class='fb-like' expr:data-href='data:post.url' data-share='true' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
Box Count Layout Style
<b:if cond='data:blog.pageType == "item"'>
<fb:like expr:href='data:post.url' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' layout='box_count' width='450'/>
</b:if>
<fb:like expr:href='data:post.url' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' layout='box_count' width='450'/>
</b:if>
HTML5 Markup
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-like' expr:data-href='data:post.url' data-share='true' data-layout='box_count' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
<div class='fb-like' expr:data-href='data:post.url' data-share='true' data-layout='box_count' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
Button Count Layout Style
<b:if cond='data:blog.pageType == "item"'>
<fb:like expr:href='data:post.url' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' layout='button_count' width='450'/>
</b:if>
<fb:like expr:href='data:post.url' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' layout='button_count' width='450'/>
</b:if>
HTML5 Markup
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-like' expr:data-href='data:post.url' data-share='true' data-layout='button_count' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
<div class='fb-like' expr:data-href='data:post.url' data-share='true' data-layout='button_count' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
Color Indication Information:
- Color Scheme of Button
Change this value to dark if you wanna change the color scheme of button into dark.
- Like Button Text/Action
Change this value to recommend if you need the button text to be appeared as Recommend.
- Share Button
You can specify false if you wanna get rid of Share button displayed with Like button.
- Profile Pictures below Button
If you wanna show profile pictures, then set this value true. It will display friends of user who liked it, below the like button.
- Width Acquired by Plugin
Specify the value in pixels if you wanna change the width acquired by Like button plugin.
- Font Family
Specify font family you wanna use with Like button here.
i.e: font="arial" or data-font="arial"
6. Now save your template and check your individual posts for Facebook like button.
More Information:
* You can find more insights for your posts being shared on Facebook at Facebook Insights page.
* If you are planning to implement multiple Facebook Like buttons on same page, make sure to add xid attribute with the unique value for each button.
For example, if you planning on adding two Facebook Like buttons,
1st button : <fb:like xid='1000' ...
2nd button : <fb:like xid='1001' ...
For example, if you planning on adding two Facebook Like buttons,
1st button : <fb:like xid='1000' ...
2nd button : <fb:like xid='1001' ...
Enjoy :-)
Thanks for sharing this step by step guide :)
Hi ItsmePri,
Welcome to Mayura4Ever... Thanks for your kind comments dear... :)
Cheers...
expr:data-href='data:post.url' don't get applied no matter what I try including using XID attribute for different buttons. They all show the total count. Do you have any update to solving this post URL problem with Facebook. I have buttons for twitter and Google+ both of which work with expr:data-href='data:post.url'. It is strange with Facebook. Someone said it is to do with open graph meta tags.
Hi Sreedhar,
I just implemented and see if Facebook like button code has something wrong. But it doesn't. Open Graph tags let you customize information being shared on user's wall and enable more advanced features such as insights. Make sure you have implemented Facebook JavaScript SDK as I recommended on Before You Go section. And let me know the exact problem mate :) I ll help you to figure it out.
Cheers...
Hello it's me again lol. So I tried to do this and followed all the steps but it didn't work. I was wondering if you had any suggestions?
Hi Nikki,
Did you add Facebook like button code into your template?
Cheers...
I've been trying for weeks and I just can't seem to get the Facebook like button just for liking my posts not the same on count on each post. I want people to be able to like each individual post. I have done everything above exactly and the button come up but is the same on each of my posts! Please help me! Thanks!
Hi,
Can you drop me your blog URL where you have implemented Facebook like button to provide further assistance? :)
However I didn't make your comment as a spam and thought it's a genuine query. Next time please use personal name when commenting. OK? :) I hope you won't mind being comply with comment guidelines here.
Cheers...
Hello,
How can I add multiple like buttons on a single page ?
lets say I have 5 posts per page, I added a like button after each post. but whenevr anyone click on any like button the like goes to the url of the page n not to the url on the post.
m using Blogger.
Help me
Hi Dinesh,
I think you are referring to Blogger homepage where display multiple posts, right mate? :) So add Like button code mentioned in this post above beneath post header (I think that's where you wanna add) in your blog. It will display multiple like buttons for posts and will share your post URL not current page URL.
Hope it helps :)
Cheers...
Hello,
I did everything you mentioned above, but unfortunately it doesn't work. I think the problem may be that I am using "Read More" plugin. What should I do?
Hi Ceyhan,
Can you drop me your blog URL here, so I can check out and give more suggestions on it.
Cheers...
I added "add this" plugin to my blog. I want also add a facebook send button. But I couldn't do it. This is my blog: http://ceyhankoseoglu.blogspot.com/
Hi Ceyhan,
This post is about official Facebook Like button implementation mate :) If you wanna add Facebook Send button with AddThis, check this out ~ AddThis Facebook Send Button.
Cheers...
Hi,
I noticed that I made a small mistake. That's why it didn't work. Now it works properly :)
Thanks.
Btw, you have a great blog :)
Hi Ceyhan,
Woohoo... So you did it :) Glad to hear that mate. It is learning...
Thanks for your compliments mate :)
Cheers...
Hello, I want to use Segoe UI as displayed font. How can I insert it to the markup code?
Which one is correct,
using space
font="segoe ui"
or using dash
font="segoe-ui"
Hi Andi,
Using a space is the correct form mate :) When it comes to fonts, the dash doesn't work for 'em :)
Cheers...