New Facebook Comment Box for Blogger With Notifications Enabled

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. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won’t index. Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn’t actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, execept the extra traffic you get from Facebook.
I just thought you should know that before you implent it on your blog. As you can see, I do use it too. I wrote a post on this particular topic earlier but Facebook has changed since, lots of things on the post may not look exactly as explained. Also, this one has a feature the previous one didn’t have – getting notified of every comment made on your blog. One other thing, I customized this with a little CSS. Below is a screenshot of what it looks like:

You may also check the live demo on  this blog here.

How to add Facebook comment box to Blogspot

There are about five steps to get this done but chill out, it’s easy, ok? Just follow the steps and you’ll have a nice Facebook comment box installed on your blog in no time.

1. Creating a Facebook Application

i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.

ii. Enter your application name and namespace,input the captcha code and proceed.

iii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.
For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:

iv. Scroll down a bit and hit the Save Changes button. Now you’re done with creating your facebook application but there’s one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.

Now let’s head to your blog and finish this up

2. Adding the codes to your template

We’re adding four sets of codes into your template to make this work the way we want, aight?
i. xmnls attribute
ii. SDK script
iiI. Open graph meta tag
iv. Comment form iframe code
Log in to your blogger account and click on Template > Edit HTML > Check Expand Widget Template
i. Press Ctrl + F and search for this code:

This should be found on the second or third line of your template.
- Right in front of this, add the following code:

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

-Be sure to have a space before and after this code. Take a look at the example below:

ii. Press CTRL + F on your keyboard and search for this:

If you can’t find this, search for something similar. You should search for this instead:

In the next line, paste this code:

Be sure to replace YOUR APPLICATION ID HERE with the application ID I asked you to copy earlier, remember?
iii. Now, let’s add the open graph meta tag. Search for this code in your template:

In the line above it, paste this piece of code:xmlns:fb='http://www.facebook.com/2008/fbml'

YOUR_APP_ID

" /> Replace YOUR_APP_ID with that same application ID you previously copied.
iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:

If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

In the line just below it, paste this code:

Love to hear what you think!