Add Facebook Like Button with Counter in Blogger

How to add facebook like button with counter in blogger template ? ...

1. Get Your App ID by creating application in Facebook Developers

Example of Your App ID : 183470581671QRS

2. Login to blogger with your ID

3. Click design

4. Click edit html

5. Click download full template

6. Tick expand widget template

7. Find code below :

<div class='post-header-line-1'/>

press (Ctrl+F) to easily find.

7. Copy your facebook like button code and paste it just below the above code.

NOTE : If you can not find <div class='post-header-line-1'/> in your blogger template, paste your facebook share button code just before <data:post.body/>

1. Button Count


CODE :

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

<fb:like action='like' colorscheme='light' expr:href='data:Post.url'
layout='button_count' show_faces='true' width='500'/>
</b:if>

2. Box Count


CODE :

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

<fb:like action='like' colorscheme='light' expr:href='data:Post.url'
layout='box_count' show_faces='true' width='500'/>
</b:if>

3. Standard


CODE :

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

<fb:like action='like' colorscheme='light' expr:href='data:Post.url'
layout='standard' show_faces='true' width='500'/>
</b:if>

8. Click save template and done.