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

00:30
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
Posted by at 00:30
Share:

104 comments:

  1. Edgard Ribeiro8 June 2013 at 05:33

    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. Unknown15 June 2013 at 12:16

    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. Rohit Mewada23 October 2013 at 00:27

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

      Delete
    2. Unknown11 December 2013 at 13:42

      i tried bt i failed much complicated

      Delete
  3. Editor Ony16 June 2013 at 04:13

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

    ReplyDelete
    Replies
    1. Rohit Mewada29 October 2013 at 05:35

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

      Delete
  4. SJW17 June 2013 at 11:28

    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. Paranthaman20 July 2013 at 02:00

      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. Pande20 June 2013 at 09:12

    yeah Iv done it thanks :)

    ReplyDelete
  6. Unknown2 July 2013 at 10:52

    Nice Post (o)

    ReplyDelete
  7. Renee Yurovsky5 July 2013 at 23:21

    This should be a cool feature when you use Google

    ReplyDelete
  8. Unknown8 July 2013 at 05:08

    (h) nice
    thank you

    ReplyDelete
  9. Unknown8 July 2013 at 11:59

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

    ReplyDelete
    Replies
    1. Rohit Mewada19 October 2013 at 00:53

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

      Delete
  10. Unknown9 July 2013 at 11:36

    Not working need help.. please..

    ReplyDelete
  11. Dr. Osama14 July 2013 at 05:40

    not worked for me

    مساعدك في الفوتوشوب

    ReplyDelete
  12. Anonymous15 July 2013 at 07:26

    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. Anonymous15 July 2013 at 07:29

      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. Indrė16 July 2013 at 02:27

      Me to - hadn't find this one :(

      Delete
    3. Rohit Mewada29 October 2013 at 05:38

      Try again and add new code also. 8-)

      Delete
  13. Lima che16 July 2013 at 11:04

    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. Rohit Mewada29 October 2013 at 06:09

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

      Delete
  14. Anonymous18 July 2013 at 03:21

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

    First Time Home Buyer Ontario

    ReplyDelete
  15. RJ Legaspi20 July 2013 at 07:32

    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. Rohit Mewada29 October 2013 at 05:42

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

      Delete
  16. Sagor22 July 2013 at 22:47

    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. Rohit Mewada29 October 2013 at 06:07

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

      Delete
  17. Unknown24 July 2013 at 00:53

    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. Rohit Mewada29 October 2013 at 05:43

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

      Delete
  18. Unknown25 July 2013 at 02:58

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

    ReplyDelete
  19. Jane Lacson25 July 2013 at 03:17

    < 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. my thoughts26 July 2013 at 05:36

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

      Delete
  20. Elizabeth J. Neal26 July 2013 at 23:25

    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
  21. jeyel27 July 2013 at 09:03

    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. Rohit Mewada29 October 2013 at 05:54

      Yes Its Possible both comment box are live. :o

      Delete
  22. Wajahat Ahmad31 July 2013 at 22:24

    Thanks it worked for me :)
    Where to Chat993 :)

    ReplyDelete
  23. T-Breakz2 August 2013 at 05:41

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

    ReplyDelete
  24. HUGCAMS3 August 2013 at 01:04

    valuable post thanks for sharing live cam sex

    ReplyDelete
  25. Unknown3 August 2013 at 04:03

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

    ReplyDelete
    Replies
    1. Rohit Mewada29 October 2013 at 05:57

      Thanks for your Valuable Comment. Keep Visiting :-#

      Delete
  26. Unknown3 August 2013 at 19:54

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

    ReplyDelete
  27. Anonymous4 August 2013 at 02:30

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

    ReplyDelete
  28. Unknown4 August 2013 at 11:05

    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. Anonymous4 August 2013 at 11:24

    mayweather vs alvarez live stream: Thanks :).. Its really works!

    ReplyDelete
  30. Bahar Hossain4 August 2013 at 15:47

    This comment has been removed by the author.

    ReplyDelete
  31. Bahar Hossain4 August 2013 at 15:53

    Worked Great . Check from here

    Now my Blog is looking great :)

    ReplyDelete
  32. Gnomo8 August 2013 at 03:35

    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. priatama25 August 2013 at 13:23

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

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

      Delete
    2. Meshielle14 September 2013 at 10:47

      Same here. Help us please...

      Delete
  33. Gnomo8 August 2013 at 04:56

    Me neither.

    ReplyDelete
  34. Alexandros Raskolnick13 August 2013 at 13:37

    It didn't work

    ReplyDelete
  35. Unknown15 August 2013 at 01:53

    not working.
    please help.

    ReplyDelete
    Replies
    1. Rohit Mewada29 October 2013 at 06:01

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

      Delete
  36. Dhakkanz23 August 2013 at 14:32

    It is not working for me. Can you help?

    ReplyDelete
  37. Unknown29 August 2013 at 05:48

    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
  38. Unknown3 September 2013 at 19:04

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

    ReplyDelete
  39. Rohit Mewada19 October 2013 at 00:53

    cheer

    ReplyDelete
  40. Rohit Mewada23 October 2013 at 00:22

    Now Code is Updated Injoy and Happy Blogging (o)

    ReplyDelete
  41. Joly George25 October 2013 at 08:41

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

    ReplyDelete
  42. Rohit Mewada29 October 2013 at 05:36

    Try Again Now code code is updated. :)

    ReplyDelete
  43. Rohit Mewada29 October 2013 at 05:55

    Thanks Keep Visiting.

    ReplyDelete
  44. Rohit Mewada29 October 2013 at 06:10

    But friend I get notification see the screen shot :p

    ReplyDelete
  45. DevicePoint28 November 2013 at 10:29

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

    ReplyDelete
  46. The Dreamer13 March 2014 at 00:50

    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
  47. Jhon Steele27 July 2014 at 12:15

    Thanks for sharing this.

    Increase Conversion Rate

    ReplyDelete
  48. News13 August 2014 at 17:01

    Detailed tutorial helped me too.

    ReplyDelete
  49. Unknown27 November 2018 at 23:17

    You won't believe me, but I was planning to write a blog very similar to the one you have posted here. Great work.

    SEO Training In Chennai

    ReplyDelete
  50. Unknown28 November 2018 at 06:20

    You won't believe me, but I was planning to write a blog very similar to the one you have posted here. Great work!

    Digital Marketing Training In Chennai

    ReplyDelete
  51. Alexfra23 June 2019 at 02:47

    Some websites assign a nofollow tag to some links. That is a message to the search engines saying "I don't trust this link, don't count it". blog commenting

    ReplyDelete
  52. khan books6 August 2019 at 10:03

    This comment has been removed by the author.

    ReplyDelete
  53. khan books6 August 2019 at 10:05

    DOWNLOAD FREE BOOKS

    ReplyDelete
  54. Usama LaDLa21 September 2019 at 06:25

    This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this.. pname com facebook orca

    ReplyDelete
  55. organic_alexa21 October 2019 at 11:44

    Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. There tend to be not many people who can certainly write not so simple posts that artistically. Continue the nice writing Buy Facebook Ads Accounts

    ReplyDelete
  56. Usama LaDLa22 October 2019 at 00:37

    It should be noted that whilst ordering papers for sale at paper writing service, you can get unkind attitude. In case you feel that the bureau is trying to cheat you, don't buy term paper from it. isomaru suisan

    ReplyDelete
  57. Jason Marshall30 November 2019 at 00:19

    This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this.. Buy Facebook Accounts

    ReplyDelete
  58. Jason Marshall18 December 2019 at 01:23

    Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know. beretta urika

    ReplyDelete
  59. haali24 December 2019 at 08:44

    Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here. best blog comment and fast delivery

    ReplyDelete
  60. Danishsingh10 February 2020 at 02:58

    Thanks for sharing such a great blog Keep posting.
    CRM software
    marketing automation companies
    marketing automation software for small business

    ReplyDelete
  61. midn14 April 2020 at 00:10

    replica mont blanc starwalker, combining elegant style and cutting-edge technology, a variety of styles of replica mont blanc capless rollerball, the pointer walks between your exclusive taste style.

    ReplyDelete
  62. Unknown12 April 2021 at 09:06

    Thanks for sharing this informative and useful article.
    Netflix partilhar conta

    ReplyDelete
  63. Unknown16 September 2021 at 03:39

    Do you need an urgent loan of any kind? Loans to liquidate debts or need to loan to improve your business have you been rejected by any other banks and financial institutions? Do you need a loan or a mortgage? This is the place to look, we are here to solve all your financial problems. We borrow money for the public. Need financial help with a bad credit in need of money. To pay for a commercial investment at a reasonable rate of 3%, let me use this method to inform you that we are providing reliable and helpful assistance and we will be ready to lend you. Contact us today by email: daveloganloanfirm@gmail.com Call/Text: +1(501)800-0690 And whatsapp: +1 (501) 214‑1395

    NEED A LOAN?
    Ask Me.

    ReplyDelete

Subscribe to: Post Comments (Atom)
 
Toggle Footer