In 2009
Facebook developers introduced their best social plugin called "
Facebook Comments Box". This plugin can be embedded in any website or
blog and visitors can use their IDs of
Facebook, Yahoo, AOL or Hotmail to leave a
comment at your site.
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.
use the
Facebook comments box in parallel to your old Blogger
Comment form so that you may loose no previous
comments and provide users with multiple options of
commenting from different platforms.
 |
Both Facebook and Blogger Comment Enable
How Desable Blogger Comment |
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?
PS: Please make sure your
blogger comment form is embedded below posts. For doing this first go to
Blogger > Settings > comments > and then choose embed
comments below posts. After doing this follow the tutorial below.
Log in to your
blogger account and click on Template > Edit HTML
i. Press
Ctrl+F and search for
<html and just after it give a space and add this code
.
This should be found on the second or third line of your template.
xmlns:fb='http://www.facebook.com/2008/fbml'
ii. Press
CTRL+F on your keyboard and search for,
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='"loading" + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<div id="fb-root"></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
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
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined'script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>
- Replace YOUR APPLICATION ID HERE with your Facebook application ID that you saved in a notepad.
iii. Now,Press
Ctrl+
F and search for
</head> and just above it paste the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='RN Hckr' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/RNHckrDotCom' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Replace RN Hckr with your blog title/Name.
- Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size -> 40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
- Replace YOUR_APP_ID with the your Facebook Application ID that you saved in notepad
iv Now Press
Ctrl+
F and Search for this,
<b:includable id='comment-form' var='post'>
Just after it paste the code given below,
<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='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: By <b><a alt='RN Hckr' href='http://www.rnhckr.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='RN Hckr'>RNHckr.com</a></b></div></div>
</b:if>
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
- To change the footer credits size, change this value width:510px
- Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
3. Enabling notification for comments on every post
This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone
comments on your
blog. You get a regular notification on
Facebook and you can visit your
blog to reply the
comment.
- Visit this URL:
https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
- Be sure to replace
YOUR_APP_ID with your real application ID
- On the page that opens, click on settings and add yourself as moderator
- Click on your name when it shows up and save the changes you made. When someone drops a comment on your
blog, you should be notified that instant on
Facebook.
If this works for you, you can say thank you by sharing on
Facebook, hitting the
Google +1 button or simply using the
comment box. Also,
it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.
You Also Like:
How To Add Disqus CommentSystem To Blogger
How To Install GooglePlusComments Widget On Default/Custom Blogger Templates
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.
