TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

How to add facebook like button with counter on your blog ? 1. Get Your App ID by creating application in Facebook Developers Example ...

How to Add Facebook Like Button with Counter in Blogger

How to add facebook like button with counter on your blog ?

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.

1 Comment to 'How to Add Facebook Like Button with Counter in Blogger'