Integrate Facebook Comment Box For Blogger With Notifications Enabled

Wednesday, January 23, 2013

Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they’re already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s Facebook wall. Facebook comment in blogger is the same with the real Facebook page. As you see the image below:

There are about four steps to get this all done. Just follow the guide steps and you will have a nice Facebook comment box installed on your blog in no time.

Step 1. Create a Facebook application. Visit Facebook Developer site. You may need to register first through your phone.

On the next page, enter your domain (if you use a custom domain) or just blogspot.com in App domain space. For App webiste, enter your blog URL (for example www.itbox4vn.com or http://han-thuy.blogspot.com). After finish, scroll down a bit and hit the Save Changes button. Remember to copy your App ID for later use.

Step 2: Adding the codes to your template

Remember to check Expand Widget Template before you continue.

i. Press Ctrl + F and search for this code:

<html

Right in front of this, add the following code:

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

ii. Search for this code

<body

In the next line, paste this code

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

Be sure to replace YOUR APPLICATION ID HERE with the App ID that you copied eariler.

iii. Search for this code to add the open graph meta tag.

</head>

In the line above it, paste this piece of code:

<meta property="fb:app_id" content="YOUR_APP_ID" />

iv. Now here's the last part of tweaking your template to make it display Facebook comment box. Search for this in your template:

<data:post.body/>

OR

<div class='post-footer-line post-footer-line-1'>

In the line just below it, paste this code:

<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.canonicalUrl' expr:xid='data:post.id'/> </b:if>

Save your template, the Facebook comment should appear. You should adjust the width from 450 to 500 to make it bigger. Suite yourself.

Step 3: If you want to hide blogspot comment box, just follow simply tips

Step 4: Enabling notification for comments on every post

Enabling this will help you know whenever someone comments on your blog. Now, visit Facebook comment for developers: https://developers.facebook.com/tools/comments/?id=
YOUR_APP_ID (be sure to replace it with your real App ID)

On the page that opens, click on the settings and add yourself as moderator