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>
<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>
<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>
<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.
Add Facebook Like Button with Counter in Blogger
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>
<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>
<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>
<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.
