Now follow the below tutorial to add Facebook comment box on your blog . The below steps is divided into two parts;
Related : 'Add Facebook Like Box below every post on blogger'.
Note : Backup your Blogger Blog Template
Part 1 : creating a Facebook apps id
1. First of all to create a Facebook apps id , go to Facebook developer page .and register their a Facebook apps developer .
2. Now, click on Add a new app . Now, you will get 4 option, then click on Website.
3. Now, Enter your apps name My Comment box. Then click on Create a New Facebook apps id. see below picture
4. Then, again a pop up message will appear. Then choose your category Apps for pages. Then click on Create app ID. see below picture,
5. Now, a message will ask for Captcha. Then enter Captcha and then click on Submit. And wait for sometime.
6. Now, Your apps id is created. Then Copy and Paste the code on your Notepad. See below picture,
Part B : Add comment box to your blogger blog
Note : First Backup your Blogger Template, if you don't know, then click on the below topic, 'How to backup blogger blog and Template'
1. First, Login to your blogger account.
2. Go to Dashboard > Template > Edit template.
3. Now, Search for <html
4. And then, Replace the Above code with the below code. .
<html xmlns:fb='http://www.facebook.com/2008/fbml'
5. Now, again Search for < body > And Paste the below code just after it.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FACEBOOK-APPS-ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Note : Replace FACEBOOK-APPS-ID with your Facebook app id which you copied in Notepad.
6. Now, again Search for < /head > And then Paste the below code just above it.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Hugestreet' property='og:site_name'/>
<meta content='Your Blog Logo Image here' property='og:image'/>
<meta content='FACEBOOK-APPS-ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/hackerz.worldd' property='fb:admins'/>
<meta content='article' property='og:type'/>
Note :
* Replace Hugestreet with your Blog name.
* Replace Your Blog Logo Image Here with your Blog logo image URL.
* Replace FACEBOOK-APPS-ID with your Facebook apps id which you copied in Notepad.
* Replace hackerz.worldd with your Facebook page .
7. Now again Search for <b:includable id='comment-form' var='post'> And then Paste the below code Just after it.
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:530px;'>Facebook Blogger Plugin by <b><a
alt='blogger templates' href='http://hugestreet.blogspot.com' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger
templates'>hugestreet</a></b> Enhanced by <b><a alt='blogger widgets' href='http://hugestreet.blogspot.com/2014/12/add-facebook-comment-box-in-blogger.html'
style='text-decoration:underline;
color:#fff;' target='_blank' title='Blogger Widgets'>Get this widget</a></b></div></div>
</b:if>
Customization :
* Scheme is in light, If you Want to change to dark, then simply replace light with dark.
* Width is 540, Change the width size accordance to your blog template.
* Change footer width size. Size is 530.
8. Now Save the Template. You have done now.
Comments
Post a Comment