Change to Facebook Comment for Your Blog

So how to add Facebook Comments on your blog?

oz
1. The first thing is to hide your existing comment from your blog.

– Click the Settings Tab and go to Comments, click the Hide button. You’re done.

2. Go to https://developers.facebook.com/apps. This is Facebook Application that you need to show Facebook Comment on your blog. Then click the Create New App at the  top right corner.

cooiome1

3. Enter any name for your New App and check to agree the PPP. Then, click the Continue button.

cioooiome1

4. Type the Capthca Code and Submit button.
5. Now please see pic below.

coppioome1

– Copy the App ID to your Notepad. Put your domain in the App Domain area if you got others than blogspot and put your blog URL. Then click ‘Save’ button.

6. Go to your blog. If you use blogger.com, Go to Design tab, Edit HTML, and copy the code below and put it just after the <head> tag.

 

<meta content=’YOUR_FACEBOOK_APPLICATION_ID‘   property=’fb:app_id’/>

– Change ‘YOUR_FACEBOOK_APPLICATION_ID‘ with the number that you copy before.

cooipipome1

– Save Your Template.
– The Facebook Application and the above fb:app_id meta tag should be added to your Blog and to smartphone monitoring software. Otherwise you won’t be able to manage/moderate your Comments from a single Place(you will have to go to posts one my one and moderate and that too is possible only if you have added the fb:admins open graph meta tag).

7. You have create the Application now and you need to put the Facebook Comment Form on your blogger template. To do this, go to your blog, click on the Design Tab and Edit HTML. Click on ‘Expand Widget Templates’ checkbox and try to find below code.
<div class=’post-footer-line post-footer-line-3′>

 

-or, if you can’t find it,

<p class=’post-footer-line post-footer-line-3′>

 

-or

<data:post.body/>

 

-And paste the following code just below the code that you found before.

<b:if cond=’data:blog.pageType == “item”‘>

<div id=”fb-root”></div>

<script>(function(d){

var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}

js = d.createElement(‘script’); js.id = id; js.async = true;

js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;

d.getElementsByTagName(‘head’)[0].appendChild(js);

}(document));</script>

<fb:comments width=’450‘ colorscheme=’light‘ expr:title=’data:post.title’ expr:href=’data:post.url’ expr:xid=’data:post.id’/>

</b:if>
-Change ‘450’ to fit your blog width.

8. Declare Facebook Namespace. Why? Because the template want to know the facebook application that you insert to. Am I right? If not just comment below. So how to declare it.

-Just copy below code

xmlns:fb=”https://www.facebook.com/2008/fbml”

 

-and put it right after the <html tag like below.

ciopoome1

-Save your template and it could like like this

comioue2

-You’re almost done.

9. The last part is to how to manage your comment. Log in to your fb account and blog account. You can see the Settings button at the top right of the Comment Form. Click it and change what you want and it’s done.

iopoDon’t forget to save it.

And now your blog comment could appear like this…..

come1uop

or write your comment below…. :). You can moderate your comments from fb URL http://developers.facebook.com/tools/comments