Breaking News
Loading...
Tuesday, 14 May 2013

How to add Facebook Comment Box in Blog of Blogger With Notifications Enabled

How to add Facebook Comment Box in Blog of Blogger With Notifications Enabled
In 2009 Facebook developers introduced their best social plugin referred to as "Facebook Comments Box". This plugin is embedded in any web site or web log and guests will use their IDs of Facebook, Yahoo, AOL or Hotmail to depart a comment at your website.

Facebook comment for your web log will function a decent thanks to build your website a lot of participating and encourage readers to drop comments if they’re already logged in to Facebook. It conjointly is a supply of traffic since victimization Facebook comment shares the comment and post page on the visitor’s Facebook wall. One issue ought to be noted though: Facebook comment has no SEO price since it’s being displayed in Associate in Nursing iframe that Google won’t index. Comments created with the regular comment box on your website has a lot of benefits particularly if you get different comment, a lot of keywords you didn’t truly mention within the post content however showing in comments do bring a lot of computer program traffic. this is often one thing Facebook comment lacks, execept the additional traffic you get from Facebook.

use the Facebook comments enclose parallel to your recent Blogger Comment kind in order that you will loose no previous comments and supply users with multiple choices of commenting from completely different platforms.


How to add Facebook Comment Box in Blogger With Notifications Enabled
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.

How to add Facebook Comment Box in Blogger With Notifications Enabled

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

How to add Facebook Comment Box in Blogger With Notifications Enabled
How to add Facebook Comment Box in Blogger With Notifications Enabled

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:

How to add Facebook Comment Box in Blogger With Notifications Enabled

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.

How to add Facebook Comment Box in Blogger With Notifications Enabled

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.

How to add Facebook Comment Box in Blogger With Notifications Enabled


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'

How to add Facebook Comment Box in Blogger With Notifications Enabled


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='&quot;loading&quot; + data:blog.mobileClass'>

Find any one of these codes and just after it paste the code given below,

How to add Facebook Comment Box in Blogger With Notifications Enabled


<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,

How to add Facebook Comment Box in Blogger With Notifications Enabled

<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/RohitMewada' 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'>

How to add Facebook Comment Box in Blogger With Notifications Enabled

Just after it paste the code given below,


<b:if cond='data:blog.pageType == &quot;item&quot;'> <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='Rohit Mewada' href='http://www.BlogofBlogger.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blog of Blogger'>Blog of Blogger</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

How to add Facebook Comment Box in Blogger With Notifications Enabled

- 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.

How to add Facebook Comment Box in Blogger With Notifications Enabled


Update 2: Fix Facebook Comment Box Aligned to the Right

We all understand Blogger recently created some changes and that i noticed this box got aligned to the correct because of some reasons. This appears to be cause by some html tags being incorrectly parsed by the new template editor… my guess.

Anyway, here’s the fix: Replace the code you have under data:post.body with the one below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>

Replacing the whole code pasted earlier under data:post.body or post-footer-line-1 should fix it. I did it on my test blog and it works just fine. Any problem? Don’t hesitate to holla at me.

If this works for you, you'll be able to say thanks by sharing on Facebook, striking the Google +1 button or just victimisation the comment box. Also, it might be nice of you to not take away the credit link to permit others notice this handy contraption. If you’re having issues implementing this likewise, don’t hesitate to let me recognize perhaps I will be of facilitate.

You Also Like:

How To Add Disqus CommentSystem To Blogger
How To Install GooglePlusComments Widget On Default/Custom Blogger Templates

95 comments:

  1. hello.
    Thank you for your article.
    Unfortunately, in my case I'm getting this message after paste the code: "The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements."
    Could you help me?
    Thanks.

    ReplyDelete
  2. wot man i tried ur every step with full concerntarion .But time & again i failed to applied ur steps on my blog

    ReplyDelete
    Replies
    1. Dear Friend Please tri again Now Code is updated and some new code is also added.
      thanks Keep Visiting 8-)

      Delete
    2. i tried bt i failed much complicated

      Delete
  3. Bro it's not working on my blog please help mee. ;((

    ReplyDelete
    Replies
    1. Dude Now I am update some code now its work for you. 8-)

      Delete
  4. Worked fine for me. Thanks! See it here: http://www.shadesofgood.com/2013/06/yes-you-are.html

    The only thing I still have to do is remove the blogger comment widget somehow.

    ReplyDelete
    Replies
    1. You can do that but before remember,You will never get traffic from google,since your comment will act as keyword during user search...Be brave enough to act...If you have enough visitor's go for facebook comment..

      Delete
  5. Tried on facebook-girls.com.. unsuccessful!

    ReplyDelete
    Replies
    1. Try Again Now code code is updated. :)

      Delete
  6. I Am Not Getting Notifications In Facebook When Someone Is Commenting In My BLog :(

    ReplyDelete
    Replies
    1. But friend I get notification see the screen shot :p

      Delete
  7. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    Software companies in indore

    ReplyDelete
  8. This should be a cool feature when you use Google

    ReplyDelete
  9. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    website development in indore

    ReplyDelete
  10. The trick worked for me.. But can I have the blogger comment box removed?

    ReplyDelete
    Replies
    1. yes go to your
      Blogger.com >> Setting >> Post and Comment and than change Comment location "Hide" :d

      Delete
  11. Not working need help.. please..

    ReplyDelete
    Replies
    1. Please try again now its working. :o

      Delete
  12. Replies
    1. Please try Again Now It's worked. (o)

      Delete
  13. Thank you for this tutorial. I can't seem to find the following line in 'iv':



    It doesn't seem to exist in my template. I'm using New Blogger (I think), so I'm not sure if it's called something different. I did a couple searches for parts of the code, but to no avail. Thanks for any help you can give me.

    ReplyDelete
    Replies
    1. Whoops, the code didn't show. It's:

      < b:includable id='comment-form' var='post' > (no spaces at the beginning and end of code)

      Hope that works!

      Delete
    2. Me to - hadn't find this one :(

      Delete
    3. Try again and add new code also. 8-)

      Delete
  14. Hi dear
    I just tried this tutorial but the comments don't appear on Facebook. Can you help me?? The only thing that changed is that now I can reply every comment one by one but the comments don't appear on Facebook. What can I do ??
    I really would appreciate it if you answer me!! Thank you so much!!!!!

    www.limaswardrobe.com

    ReplyDelete
    Replies
    1. Try Now Now Code is Updated and some new code is also added. :)

      Delete
  15. I really enjoyed this post. You describe this topic very well.

    First Time Home Buyer Ontario

    ReplyDelete
  16. Thanks for this tutorial... It's working on my blog now...
    There's some issues about the notifications... I'm not receiving any notifications also when someone leave a comment...
    And the blogger comment box is still there... how to remove or hide this? I'm having two comment boxes on my blog now... the facebook-comment-box and the blogger-comment-box...

    ReplyDelete
    Replies
    1. Follow All Step from Last to First. But Now It's work :-?

      Delete
  17. Can't find

    < body expr:class='"loading" + data:blog.mobileClass'>

    on my template,,i just found

    < body onLoad='Menubar()'>

    some1 help me

    ReplyDelete
    Replies
    1. Dear now Facbook comment box is fixed. Add the New code. :d

      Delete
  18. Nice Tutorial Bro..I added this comment box with custom css to my site MalayalisCorner.Com. But when I hide default comment box from blogger settings,fb comment box is also hiding :o . So How To hide Only Default Comment Box?

    ReplyDelete
    Replies
    1. Add the New code also in your blogger template. :o

      Delete
  19. yipeeeeeeeeeeeeeeeeeeeee
    its working on my site, thanks admin
    http://cyber-sol.blogspot.in/2013/07/a-complete-set-of-command-prompt.html

    ReplyDelete
  20. < b:includable id='comment-form' var='post' > (no spaces at the beginning and end of code)
    I also cannot find this code. Is there another code to check aside from this?

    ReplyDelete
    Replies
    1. ya i cant find this code either, is it becos we are using the new blogger?

      Delete
  21. Facebook comment for your web log will function a pirater un compte facebook decent thanks to build your website a lot of participating and encourage readers to drop comments if they’re already logged in to Facebook.

    ReplyDelete
  22. when i post with google id , all facebook comments are hide from the page. only gmail user comments are displayed. so i deleted all google comments then it will appear. how can i use both face book and other comments by googe,live journel etc.. ;-(

    http://gallery.jeyel.in/

    ReplyDelete
    Replies
    1. Yes Its Possible both comment box are live. :o

      Delete
  23. I can't seem to get the notification to work...

    ReplyDelete
  24. valuable post thanks for sharing live cam sex

    ReplyDelete
  25. I loved the way you expressed that! Keep sharing! i am also willing to add emergency notification

    ReplyDelete
    Replies
    1. Thanks for your Valuable Comment. Keep Visiting :-#

      Delete
  26. its working
    proof: http://everything--about.blogspot.com/

    ReplyDelete
  27. thank . its working . my blogger http://www.khmerloft.com

    ReplyDelete
  28. Working fine on me.. http://pakforfun.blogspot.com/2013/08/things-ill-do-when-i-wake-up.html
    thanks for the great tips..

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. Worked Great . Check from here

    Now my Blog is looking great :)

    ReplyDelete
  31. Done! http://blog.gnomo.eu/
    But there's a weird bug: if someone comments on Blogger comments, then Facebook comments box disappears :S
    Any idea?

    ReplyDelete
    Replies
    1. I also got this problem.
      Any idea to fix it?

      when someone post using google blogger comment, the comment plugin disappears..

      Delete
    2. Same here. Help us please...

      Delete
  32. Replies
    1. Tri again some new code is added :d

      Delete
  33. Replies
    1. Tri Again Now Its work. I am add some new code because blogger template is updated their template. :)

      Delete
  34. It is not working for me. Can you help?

    ReplyDelete
    Replies
    1. Tri Now Some more Codes are added cheer

      Delete
  35. nice and awesome work you have done.... its very interesting and nice one i really like it very much keep sharing this type of nice and awesome stuff.. http://www.technologyexplores.com

    ReplyDelete
  36. too much ads on your blog make me felt annoying ..

    ReplyDelete
  37. Now Code is Updated Injoy and Happy Blogging (o)

    ReplyDelete
  38. very nice.....i have tested and its working superbly...... Make Money , Blogging Tips
    (k) :d

    ReplyDelete
  39. Nice tutorial author, thanks for sharing.
    I am also share helpful tutorial: Facebook Comment Plugin

    ReplyDelete
  40. I followed this tutorial step by step but the error message keeps on coming. I have difficulties in adding the logo link. Help me please

    ReplyDelete
  41. Facebook comment for your web log will function a decent thanks to build your website a lot of participating and encourage readers to drop comments if they’re already logged in to Facebook. Blog Comments

    ReplyDelete

 
Toggle Footer