New Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed

Categories:

What is the new facebook comments features.

Threaded comments : reply to comments.
User network : now it’s displaying the comment author not only name, but his profile info as well
Permalink to specific comments : Permalinks have now been assigned to each comment so people can share links and be directed to specific comments.
Notifications : sent to users will also go to the permalink, making it easier to respond.

------------------------------------------------------------------------------------------------------------

Step 1. Disable Default Comments.

The first thing you should do it to disable blogger default comments. because you don’t want to have 2 comments forms.
go to your blogger account, navigate to settings >> comments
and next to comments field choose Hide, then scroll down and click save setting.

------------------------------------------------------------------------------------------------------------

Step 2. Generate your Facebook App ID.

now you should generate your own facebook app id, it’s really easy and one step process,
just go to this page, facebook developers then click Create New App
enter your application name, ( you can type any name )

and check agree and click Create Application

just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your facebook App ID:.

At Basic Info for App Domain you must type blogspot.com and fill the rest

scroll dow the page and you will see below image an fill only your website full URL example

http;//alif-azhar.blogspot.com not alif-azhar.blogspot.com

------------------------------------------------------------------------------------------------------------
Step 3. Codes To Add To Your Template.

please go to your blogger account again, and navigate to,

>>Design

>>Edit HTML

>> and check Expand Widget Templates

Hit on keyboard CTRL and F, search box will appear and search the following code,

<html

you’ll find it on the top of your code. second or third line, and after it add the following code,

xmlns:fb='http://www.facebook.com/2008/fbml'

you must type a space before it and after it,
here is an example.

<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >

after done, search for this code or only word body in your code

<body> or <body

point your mouse at the end of <body> or might diffrent with yours and hit enter so we can paste the next code below this <body> code, paste this code

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP 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>

but please don’t forget to change YOUR APP ID to your app id ( you got it in the previous step ).

after that copy the following code to notepad so you can change

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Change MY-SITE-NAME with the one you want to appear when a user likes a page. (Alif likes Helping on Facebook)
Change YOUR-APP-ID with your application ID number we create before.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.

after making this changes add the above code just before

</head>

now we finished adding the facebook codes to your template, please don’t touch anything and continue to the next step.

------------------------------------------------------------------------------------------------------------

Step 5. Adding the Comments Box to your blogger template.

please find the following code.

<data:post.body/>

and after/below it, please paste one of the following codes.

For Light Comments box

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEnS3QTpPP1rssCNk7CEsbL9iXTs4tyKDwi8fikj5wHKV33HEqxsv4-lecou38ZzWcdO_tgDiWgC-RXtZcK_yK640cQLXvrT9SBYYf7LBQnSpQpAnhcp1HJqvtSWZZaw1J3oFS1H9gOg7/s1600/Facebook+Comments+Gif.gif' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://blogger-gadget.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a>  brought to you by <a href='http://blogger-gadget.blogspot.com/' target='_blank' title='blogger templates'>Blogger-gadget.blogspot.com , Get Yours?</a></b></div>
</b:if>

Save Templete, then check your blog, i wish it look great and work perfectly

DEMO HERE

WATCH THIS TUTORIAL VIDEO AND PLEASE PLAY YOUR OWN MUSIC :)