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 :-)
