230

Add Facebook Comment Box for Blogger with Notifications

Facebook comment box to Blogger blogs

The Facebook comment box is one of the top Facebook plugins that are used on many websites and blogs. Facebook comment box has become a strategy to increase the quality comments and user engagement. When you are using the Facebook comment box on your website, you can reduce spam comments and maintain the quality of your comments. Another thing is, Facebook allows people to share their comments to their timeline.

So, if you have installed Facebook comment box on your BlogSpot blog, you can expect some decent traffic from those comments too.

Luckily for you now search engines, especially Google can crawl content in Facebook comments.

What that means to you?

When your blog get more comments, search engines will crawl the content within comments and add them to search index. So, your blog will get more traffic from search engines to your blog.

That’s a very good, right?

Yes, as normally Facebook comments get more engagements, you can expect increase in traffic in upcoming days. But, it is not guaranteed.

In an earlier post, I shared a detailed post about adding a Facebook comment box to Blogger with notifications enabled. That post got a number of comments when Facebook decided to change their design. The many Bloggers’ main problem was how to create a Facebook app and add a Facebook comment box to Blogger.

So, I decide to take all those steps in my shoulder and show you exactly how to add Facebook comments to BlogSpot blogs.

Therefore, in this tutorial, I will explain you how to add a new Facebook comment box to Blogger with notifications. At the end of this tutorial, you’d be able to add Facebook comment box to your BlogSpot blog and see how i received notifications in my demo blog within a few seconds.

I know you’re a Facebook lover just like me. How will it look like when you receive notifications whenever someone leave a comment on your blog? Yes, you can immediately respond to comments, right?

Note: If you’re finding a way to add a powerful comment plugin for your Tumblr blog, I have shared two Facebook comment plugins for Tumblr blogs. Check Free Facebook comment plugin and Advanced comments plugin for more information. 

Whenever someone comments on your blog, one notification for the comment would be sent to your Facebook account or any one’s account who is the comment moderator. So, you can use this feature to moderate comments and reply to comments quickly.

This will help you to find spam comments and reply to questions asked by busy readers. This is a good way to engage in blogging while on Facebook! (Oh.. Don’t get addicted to Facebook. It is just a waste of time. Instead, read a book or follow these strategies to increase traffic of your BlogSpot blog. )

Without wasting more time, let’s start adding a new Facebook comment box to Blogger.

This tutorial has three major parts. They are,

  1. Create an app for your blog.
  2. Add Facebook comment box to Blogger
  3. Enable notifications for comments
  4. Moderate comments (optional, the later part after adding a Facebook comment box)

I will be explaining these parts step by step.

Create a Facebook App

Before Facebook new design, it was easier to create an app. But after their new design, it was a difficult work to create a new Facebook app for some people. Follow below instructions respectively to create your app.

Go to Facebook developer apps official web page and click on “Create New App” button.

Alternatively, you can click on “Apps” menu link and select on “Create a New App” button.

Create New App

Use one of these buttons to start creating a Facebook App.

Now you would see a pop out box to create the Facebook app. Type the name or your website name on the “Display Name” field. Also, you can add a namespace (Link to your app), but it’s optional. After you entered unique names, you can go to the next step by clicking on “Create” button. Don’t worry about below screenshot. I have installed the Hootsuite chrome extension to manage all my social accounts! (Yes, including Facebook)

App Names

Fill the details as like this example

After you created your new Facebook App, you can change its settings to see everyone. After Facebook’s latest update they have changed their user settings too. For some instances, you can’t see the App secret ID directly (you have to enter your Facebook password to see it) and they have a clear button to promote your App through Facebook advertising. You only want the APP ID, which you can see from the app’s dashboard page.

Now you should do one thing in order to connect new Facebook app with your website or blog (here we’re going to add your BlogSpot blog).

Go to “Basic Settings” page and find “App Domains” field. It’s used to connect your blog platform (you know your blog platform is BlogSpot). So type your blog URL (ex: bestlodge.blogspot.com or problogtricks.com) in the “App Domains” field. Then you should render your exact blog address (ex: www.bestlodge.blogspot.com, www.problogtricks.com, blog.problogtricks or example.com/blog/).

Click on “+Add Platform” button and then select “Website”. Type your blog address correctly starting with http:// or https://( if you use SSL encryption) and ending with / (slash) for the Site URL field as shown in below screenshot. Type the same URL for mobile Site URL, if you’re using a responsive template for your BlogSpot blog. The last steps of configuring the Facebook App are making it live and available to all users. Type your email address in the “Contact Email” field. Then click on “Save Changes” button.

Facebook App : Basic Settings

Facebook App settings for website

Now navigate to “Status & Review” section and select the “Yes” for “Do you want to make this app and all its live features available to the general public?” A popup box will be shown, confirm your change.

Making it a Public App

App Status & Review

Go to your Dashboard and save the app id and app secret on your computer. We need them later.

Add Facebook comment box to Blogger

Now you created a new Facebook app for your Blog. Then you need to install the Facebook comment box on your blog. So follow below few steps respectively.

Step 1: Sign in to your Blogger account and go to Template.
Step 2: Now you have to make some changes to your blog template. So before we put into it, first of all make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 3: Find this “<html” code in your template and in front of this code, paste below code.

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

Make sure to add a space before and after the above code. See the example below.

<html  xmlns:fb=’http://www.facebook.com/2008/fbml’  b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ …….. xmlns:expr=’http://www.google.com/2005/gml/expr’>

Step 4: Use CTRL + F Blogger keyboard shortcuts and find where below HTML element is located.

</head>

Now replace below block of code just above of </head> code.

<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta content=’Pro Blog Tricks‘ property=’og:site_name’/>
<meta content=’Image-Link-Of-Blog-Logo‘ property=’og:image’/>
<meta content=’YOUR_APP_ID ‘ property=’fb:app_id’/>
<meta content=’http://www.facebook.com/problogtricks‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>

Customization

  • Replace your blog title or blog name instead of Pro Blog Tricks
  • Copy and paste the logo image URL instead Image-Link-Of-Blog-Logo.The logo will appear next to your post titles on Facebook profiles of commentators.
  • Replace YOUR_APP_ID with the App ID which you saved on your computer earlier.
  • http://www.facebook.com/problogtricks is the link of Facebook fan page.Just replace with your profile page or like page URL.

Step 5: Find below HTML code using above keyboard shortcut.

<body>

If you could not be able to find above code in your existing blogger template, then try to find below code. It should be located in your template.

<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>

After one of above codes, paste below piece of code.

<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘MY 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>

Make sure that you changed the MY APPLICATION ID HERE with your real application ID.

Step 6: Now you’re half done. You just need to display Facebook comment box on your blog. You can put the  Facebook comment box in your post and static pages manually. But it’s not an easy work to add a Facebook comment box to whole pages manually (think if you have 1000+ posts on your blog, do you use this method to add comment box?). So we use an automatic technique to add the Facebook comment box. It’s done from template editor. So you have to do nothing from post editor. Find below blogger data tag in your template.

<data:post.body/>

or

<p><data:post.body/></p>

If you’re using a magazine blogger template, you will encounter two or three similar codes. As using a wrong <data:post.body/> code, Facebook comment box might not work on your blog. So try all code paces and choose the correct one. In case if you’re not sure which code to add or didn’t work that method, then find below HTML code in your template.

<div class=’post-footer-line post-footer-line-1′>

or

<p class=’post-footer-line post-footer-line-1′>

Step 7: Now paste one of pieces of HTML codes of Facebook comment boxes just below of the above codes.

Facebook comment box style #1 for white color background templates

Facebook comment box style #1 for White background templates

Comment box style One

HTML code for comment box :

<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div align=’center’>
<div style=”background: #F8F8F8;“>
<div style=”color: #444444; font-family:Constantia,Georgia,’Nimbus Roman No9 L’,serif; font-size: 32px; text-align: center;”>
<strong>Spread out Your Opinions</strong></div>
<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://alldemohub.blogspot.com/2014/03/facebook-comment-box-blogger-example-01.html’ target=’blank’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
</b:if>

Facebook comment box style #2 for dark color background templates

Facebook comment box style #2 for Dark background templates

Comment box style Two

HTML code for comment box :

<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div align=’center’>
<div style=”background: #414141;”>
<div style=”color: #F0F0F0; font-family:Cambria,’Palatino Linotype’,’Book Antiqua’,’URW Palladio L’,serif; font-size: 32px; text-align: center;”>
<strong>Share your thoughts using below comment form!</strong></div>
<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://alldemohub.blogspot.com/2014/03/facebook-comment-box-blogger-example-02.html’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
</b:if>

Customization

  • Generally the Facebook comment box would appear on post and stationary pages. Stationary or static pages are stand alone pages which won’t add to archives. Usually Static pages are best to add contact form to Blogger, create About page etc. So if you don’t want to display Facebook comment box on static pages, please remove above first and last two conditional code lines.
  • If your Blogger template is not a magazine template or designed for showing whole content in home page, so you can display Facebook comment box on your blog home page or archive pages too. Just remove above highlighted codes.
  • You can change the background and font colors by changing their color values.
  • I have set up the width of comment box to 450 pixels. If you want to change the width to 500 pixels, so update the value to 500 instead 450. Also you can remove the width=’450 CSS code and then Facebook comment box will adapt to the device’s screen resolution. Remember by adding an over-riding value for the width of the Facebook comment box, it can mess up your blog template.
  • Additionally, you can add your own call to action instead of “Spread out Your Opinions” and “Share your thoughts using below comment form!”.
Step 8: Most important part of this tutorial, Save your Blogger template!

 

Enable notifications for comments

Now you are already done almost every hardest work! You can overlook these steps if you don’t want to receive notifications for comments & replies and make some useful changes such as enabling grammar filter, member wishlisting etc. But this tutorial is for receiving notifications for comments. (That’s why we created a Facebook App!). In the last part of this tutorial, let’s see how to enable notifications for comments.

Visit this web page:  https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

Replace YOUR_APP_ID with the your Facebook application ID.


Click on “Settings” link.

Comment moderation tool

Comment moderation tools

Now a pop out box would be shown and you can change some settings. Make yourself as a moderator (important to receive comment notifications). Allow other options to login and comment on your blog. Set grammar filter to maintain the comment quality. Use comment composer to reduce the page loading time. See below screenshot. After making these changes, click on “Save” button.

Application Moderators & Comment Settings
Comment settings

That’s all. Whenever someone comments on your blog, you will receive notifications for the comments to your Facebook account. Tell a friend to comment on your blog to see the results! Here is the notification message for my test comment which is put on our demo website.

Live & Instant Notification message for recent comment

Here is the notification for my recent comment

Need help?

I explained on my best to show you how to add Facebook comment box to and receive notifications for each of comment your loyal readers put on your blog.

During past two years, i helped hundreds of BlogSpot bloggers to set up Facebook comment box on your websites.

As you see, this post alone has got 150+ comments. In fact, i couldn’t count the number of emails and Facebook messages i received to help you for adding facebook comment plugin for Blogger platform.

But, things now have been changed. From SEO aspects to site design, i have to block new comments on this page.

But, i didn’t forget you! You can still hire me for setting up Facebook comments on your blog.

Contact me for setting up Facebook comments on your blog…

 

Chamal Rathnayaka
 

As the founder of Pitiya Internet Marketing blog, I make sure every content I share on this site is helpful and you get something out of them. To stay connected with me and receive latest blog posts, exclusive content, and offers, sign up for Pitiya newsletter.

Click Here to Leave a Comment Below 230 comments
Ashen

Machan lankawe ekek wachayen adambarayi uba ganah 🙂

Reply
Mark

How to add fb comment system to blogger pages also.Plese explain it?

Reply
Akidul Islam

Hi dear, I follow your instruction and at last active google comments in my blog. But Facebook comment plugin not activated.

Reply
Kaye

Im stucked in Step 4. Where will i put this?

Now replace below block of code just above of code.

Where do you exactly mean just above the ” code” ?

Reply
    uling

    same here. what exactly will i put the codes above the head? or below the head

    Reply
dheerandra kumar

hi, it’s very helpful thanks chamal.

Reply
Shilpa Malhotra

Nice blog i like this post i am looking for such information long time & finally i got it from this post,Thanks for sharing this.

Reply
Nico

It didn’t work on my Page. Couldn’t add the Code of the last Step. Blogger doesn’t save the code. All Codes are implemented as shown above, but no Comment Box…

Reply
Dean

If you follow the instructions and it gives you errors when trying to save the template, it is because the pasted html has a different font to that in the Blogger template window…… …specifically the single and double quotation marks….this fixed the save issue….and comments worked for me (but not notifications)

I also don’t like the fact that when someone comments, Blogger tries to force them create a Google plus account, or use a temp Blogger account…it would have been nice if it let them use their Facebook id.

Reply
    christina

    Thanks for this, i just replaced ’ with ‘, and it worked perfectly

    Reply
Trislynn Chan

This is gd for those who need step by step tutorial like me.
keep the good work!

Reply
Taofeeq

Error parsing XML, line 7, column 16: Open quote is expected for attribute “content” associated with an element type “meta”.

Reply
Mazino

I have been longing for notification as sometimes people spam my blog. Hence I removed the facebook comment box. Now with your post, I can now add back.

Reply
Rohan

The codes are partially faulty, the ‘ and ” s are creating problems.

Reply
Giwa Innocent

pls i dnt see were to replace this in my HTML

Pro Blog Tricks‘ property=’og:site_name’/>

<meta content=’http://www.facebook.com/problogtricks

Reply
Vivek Bisht

nice tutorial, but i want to know is this necessary to make a facebook app first?

Reply
Harshit Acharya

hii… chamal thanx for this tutorial……
i need your help in setting up social share for unlocking download content on blogger
please help me…

Reply
Nesha

Same issue as above, Blogger says:
Open quote is expected for attribute “{1}” associated with an element type “xmlns:fb”
And, FB comments wont apear.

Reply
anastasia

hello!! i follow all the steps but i vcant make it work!!! i can t add the bf comment box…..

Reply
christina

Helo, can you help me work on my blog, add facebook comments and more… thanks

Reply
Ruly Manihing

newbie here.. i already follow all the instructions.. but, that was error message appear.. can you help me? nice article btw

here the ss http://imageshack.com/a/img909/6097/128bS8.png

help me pls

Reply
Vinod

Not Helpful at all. Written in confusing manner.

Reply
    Chamal Rathnayaka

    Vinod, read and follow the instructions and you will be able to add Facebook comment box to your blog.

    Reply
      visha

      Error parsing XML, line 213, column 20: Open quote is expected for attribute “{1}” associated with an element type “expr:content”.

      ^^^^getting this error using sidebar template

      Reply
Lakmal

Hi Chamal, I tried ti add this comment box for my blog. I couldn’t do this. Whats wrong. is it because of my blog template? http://www.lakmalplus.com

Reply
    Chamal Rathnayaka

    Hi Lakmal,

    You have not followed the instructions i mentioned above. Please follow it correctly and let me know if the problem still exists. I will help you set it up on your blog.

    Reply
      christina

      The problem is there is error in the code, not implementing on my blog
      Error parsing XML, line 3, column 16: Open quote is expected for attribute “xmlns:fb” associated with an element type “html”.

      Reply
sagar pandeya

and i am not finding the comment moderation tool as well ….. plz help

Reply
sagar pandeya

some of the comments on my posts of the blog are only seen when i open my blog with my mobile phone but not on pc.
is it so that comments from mobile are only seen on mobile and from pc’s on pc.

Reply
    Chamal Rathnayaka

    Did you follow the entire steps as i mentioned above? If you did, you should not find any problem. Please revert back to your Blogger template editor and follow the steps above again.

    Reply
Mayedul

Wow. Its working now. I was facing problem about it. Now my problem is solved. What a solution it is! just aw-sum. Thanks for sharing your valuable experience. Waiting for another one. Again i will visit here.

Reply
    Chamal Rathnayaka

    Thank you Mayedul. Let me know if i can help you in any other way…

    Reply
Anna Med

Hi! I am pretty sure I followed your instructions to the T, however, the facebook comment box is not appearing on my blog.
AnnaMedBella.blogspot.com
I put the comment box code below both 'data.post.body' codes and that didn't solve it. Please advise.

Reply
    Chamal Rathnayaka

    Hi Anna,

    First sorry for my late reply. Your comment was hidden in my comment section!

    I checked your blog today. Seems like you have followed every step well. But, comment box doesn't appear.

    Did you add HTML code to every part of data.post.body? Try this method. This should work well.

    Let me know if the problem is still existing. If you want me to set up comment box manually, you can hire me now!

    Thanks.

    Reply
Deym Ninja

my blog is densolon.blogspot.com. its not working for me, you can see that in my posts there is a 1COMMENT indicating that 1 commented but my comment box wont show up even if in my settings, comment box is embedded. i followed all of your steps but it wont work for me. please reply.

Reply
    Chamal Rathnayaka

    Is that number for comments of Blogger comment form? or for comments of Facebook comment form?

    I couldn't find the HTML code of Facebook comment form. The reason because the comment box doesn't show up on your blog is that you haven't placed the HTML code in proper places. Please revert back and fix this issue. Let me know if the problem still exists.

    Reply
David

that was very helpful for me and i added facebook comment box to my blogger
i will come back often to visit this page

Reply
Bhawna Sati

followed all the steps but comment box is still not there.
Help please. My blog: http://tailoredfortravel.blogspot.in/

Reply
    Chamal Rathnayaka

    You have follow most of above steps correctly. But haven't placed the HTML code of Facebook comment box on correct places. Please follow above steps again and find the correct place where the Facebook comment box code should be placed. Reply here if you still have the problem.

    Reply
bamike

please i followed all procedures but when i got to the last step i couldn't go further because i cant find any of those tags, please help me out, i really love to have it on my blog.

Reply
    Chamal Rathnayaka

    Hi Bamike,

    I can't actually find the place where you should add the HTML code of Facebook comment box. This could vary as your template type, coding style etc. So find one of above codes on your template. Use Blogger inner search function. It is not actually hard. If you need my personal help, you can hire me for that.

    Thank you.

    Reply
Keerti Surapaneni

Hey Rakehysh,

I wrote a blog post and the facebook comment box is working on Blogger. I shared my blog post on facebook recently and many of my friends commented on my Fb post. But I don't see those comments in my blogger. Is there a way to integrate Fb and blogger, such that comments made for a blog post on Fb are seen in the blogger post as well. The same functionality works for the FB like button though.

Reply
    Chamal Rathnayaka

    Hi Keerthi,

    I don't know is there any other way to integrate comments on Facebook with Blogger. As fas as i know Facebook uses API and Application id (which is unique to your blog) to connect comments on each page of your blog. So, i don't think we can't connect comments on Facebook with Blogger.

    I will let you know if i know any other way to connect facebook comments with Blogger.

    Reply
    Keerti Surapaneni

    Sure, thanks Chamal

    Reply
Odeliaa

Hello Chamal.
Thank you for a great artical. Unfortunately it didn't work for me.
I have done every thing as instructed.
the only step that i had problam with step #4.
I have put the new code above the body but i didnt find what code to replace.
I ll be happy for your help 🙂
My blog is on http://www.odeliaa.com/
Thank you 🙂
Odelia

Reply
    Chamal Rathnayaka

    Hello Odeliaa,

    Just find </head code on your blog and place the meta tags just above of it. Then follow other instructions.

    Let me know if you want any help from me.

    Thanks.

    Reply
    Odeliaa

    Didn't work 🙁
    I have uploaded the original template and done every thing again.
    And i don't have Facebook comments on my post pages.

    Ill be happy for your help and any advice.
    Thank you again
    Odelia
    http://www.odeliaa.com/2015/04/blog-post_82.html#more

    Reply
    Chamal Rathnayaka

    Odeliaa,

    I checked your blog again and seems like you followed above steps correctly. But, i couldn't find the HTML code for Facebook comment box of your blog source code. Make sure you placed the comment box code at right places. I can't say where it is located without checking your blog source code. If you need my personal assistance, you can contact me.

    Reply
Tatiana

The last step isn't working for me. After I add the code for the comment box, it just doesn't show up.

Reply
Syed Ahtisham Hassan

admin blog comment box not showing on http://globalfair.blogspot.com/ plz tell me what i can do to visible it on my blog

Reply
Anonymous

Hi, I added the last code everywhere you suggested but I don't see a comment box appearing. Could you help me figure out if I need to change something? This is my blog: keertisurapaneni.blogspot.com

PS: I have removed the last code now. Please suggest the code for my blog so I can test it.

Reply
    Chamal Rathnayaka

    Hi,

    I checked your blog. It seems like you didn't add the first few codes on your blog template. Please revert back and check your blog template again by following above steps. Find what you missed. I can help you install the Facebook comment box on your blog.

    Reply
GA Cags

doesnr work on me http://www.buzzstalker.com. cant find step 3

Reply
Diogo Souza

Great article! Congratulations!

Reply
Erica

Yeah, everything seems to be set up as it should in Facebook APP settings. Maybe I don't have the comments box code where it's supposed to be, because I just noticed it seems to be on the static pages too? 🙁

Reply
    Chamal Rathnayaka

    No, If you did everything right, followed above steps correctly, you should get notifications. I saw the Facebook comment box appears on your blog. So the problem with your app settings. I have explained how to hide Facebook comment form in static pages in this tutorial. Please check it out, if you want hide it from stationary pages. And check again your Facebook app settings page. Make sure you have chosen the website option as the medium.

    Reply
    Erica

    I have chosen "Website," yes. My Facebook Developers page looks slightly different than the screenshots you have on this site. I guess Facebook has updated it's look since your original blog post, but I was able to figure out where to go to choose "Website" anyway.

    When I visit this link: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID and replace with my APP ID, I don't have all the same options your screenshots on this page show, after I click on "Settings." But I can't see how that might make a difference?

    I really appreciate all your replies. I believe I've followed all your steps correctly, but I'm still not getting notifications. It is very frustrating, indeed. I just don't know where I've gone wrong. I would remove it all and start over, but I'm not sure that would make any difference. Thank you for your help anyway.

    Reply
Erica

Hi, Thank you for the tutorial. I was able to add the comment box, but I'm not getting the notifications. The blog address is http://thebeatlesthroughtheyears.com (it's a blogspot blog with its own domain name.) Thanks.

Reply
    Chamal Rathnayaka

    Hi Erica,

    Facebook comment box doesn't appear on your blog post pages. Only in Homepage. Make sure you placed the HTML code for comment box in proper places. I recommend you to check your blog template code again and fix this error. If you still can't receive notifications, let me know. I will help you out.

    Thanks.

    Reply
    Chamal Rathnayaka

    If you set up all things right, yet don't receive notifications for comments on your blog, then the problem is on your Facebook APP settings. Please go to Facebook app page and check whether you have input correct values for each important fields. Make yourself as a comment moderator. Else you won't receive Facebook notifications. Let me know if you don't receive notifications for comments.

    Reply
    Erica

    Thank you for replying. I see what you mean and I've moved the code to one of the other places you mentioned. I think it's showing up in the blog post pages now? But, we're still not receiving notifications.

    Reply
Naija Youths Blog

Please help, coded didn't work on my blog

http://www.naijayouthsblog.com

Reply
Rattus Yu

Hi, thank you for this wonderful tutorial! I did everything as instructed but it's not appearing on my blog. I'm not sure what I did wrong or if I missed something. http://www.ladyrattus.com/

Reply
    Chamal Rathnayaka

    Hi, The problem is you didn't place the Facebook comment box HTML code in the original place. Please revert back and place the HTML code anywhere possible. After appearing the Facebook comment form, you can remove each code one by one. Let me know if you are struggling to add the Facebook comment box.

    Reply
Anonymous

I need a comment box that should be working on mobile device also

Reply
8eworld. in

But i dint get the code in point 5.
Please help more…

Reply
    Chamal Rathnayaka

    You need to find the body element of your Blogger template. Then add the particular HTML code right after the code. Search this code: <body

    Let me know if you want further assistance.

    Reply
8eworld. in

Hi CHAMAL PRIYADARSHANA ,
Friend please suggest me… i dnt get this code body expr:class='"loading" + data:blog.mobileClass' in my blog http://www.8eworld.in/
Please suggest me, now what i do?

Reply
karl brown

There's no dispute that Facebook is a huge deal. I mean a really BIG deal. Just recently CNN reported that for the very first time Internet users spent additional time on Facebook Comment Box for blogger.

Reply
    Chamal Rathnayaka

    Wow, that's a good news for especially bloggers who have added Facebook comment system on their blogs. Actually, it's not a surprise that many people spend additional time on Facebook comment box, because it really increase the engagement than traditional comment systems.

    Reply
Aero Spot

Thanks you for this info. I only have problems by testing my facebook integration on my website, blogspot. I m unable to verify, so I m not allowed, and they don't give me the script codes

Reply
    Chamal Rathnayaka

    Sorry for too late reply. Did you follow the above steps correctly? make sure you chose the website as the application platform. Else you might not receive the script code. Read above steps carefully and create a new app for your blogspot blog. Then let me know if there is the problem still exists…

    Reply
Buzzstalker

I carefully followed all the steps, it didn't work on mine. 🙁 http://www.buzzstalker.com is my site

Reply
Renu Agrawal Dongre

Hi, Its not working for me, followed all the steps. Also I was not able to add the notifications part in facebook. Thank you. My blog is : cookwithrenu.blogspot.com

Reply
    Chamal Rathnayaka

    Hi renu,

    You haven't added the JS and HTML code of Facebook comment form. Follow the tutorial and add them. Let me know what happens with your blog.

    Reply
Lindsey

Hi Chamal. Thank you for the detailed tutorial. I've walked through and double checked each step about 10 times and nothing is appearing. Do you mind taking a look? http://www.bwanaluana.com/

Reply
    Chamal Rathnayaka

    Hi Lindsey,

    I visited your blog and saw that you have already installed the Facebook comment box. Let me know if you are not getting notifications to comments on your Facebook account.

    Reply
solomon

please i have tried the above code and i got this error message when trying to save the template

Error parsing XML, line 8, column 134: The reference to entity "source" must end with the ';' delimiter.

please help me out heres my blog url https://www.yctalks.blogspot.com

Reply
    Chamal Rathnayaka

    Hi Solomon,

    I can't visit your blog. Make sure your blog template is from a reliable place. There is a malicious code installed on your template.

    In your case, above warning message appears when your blog template isn't coded properly and/or you place the Facebook code without a part of it. Revert back and check out your blog template structure. I will help you set up Facebook comment box on your blog,

    Reply
adberv

Thank you for this sir! It works on my blog! http://adberv.blogspot.com/
Now readers can comment using their facebook account. Cheers!

Reply
Sankalp Singh

Hi my blog is http://www.sankz.com I am unable to integrate this on my blog . Please help

Reply
    Chamal Rathnayaka

    Hi Sankalp,

    I see you have followed the steps correctly. Revert back and check out where you got wrong. I think you didn't pasted the Facebook comment box HTML code in proper place.

    Reply
Ali Abrahm

Hey Chamal..!!! you saved my day! Finally got it working (though I've to remove 'something' inside the code)..I owe you a week or 2 of exposure…drop by my site then u know what I mean. But the main thing is, U are God-sent! Cheers!!

Reply
Bikash Mahata

Hello. I have add your code in my blog in blogger (http://iandroidplanet.blogspot.com) but I am confuse to entering facebook comment box. I have used a responsive blogger template. plz help me.

Reply
    Chamal Rathnayaka

    Hello Bikash,

    Yes, Facebook comment form is not responsive. It uses iframe tags. There are a few ways to make the Facebook comment form responsive, but they are not very useful.

    Reply
Anonymous

Go to Facebook developer apps official web page and click on “Create New App” button.

And that url would be … ?

Reply
Bouy Bourany

sorry it is not working for notification i already allowed all options but when they reply on comment i can't get notification also my user . Please help !

Reply
    Chamal Rathnayaka

    Did you add the appropriate blog URL? If you don't use a custom domain name for your blog (use the default sub-domain), then your blog should be country redirect. Make sure you set up the blog address correctly in Facebook APP settings page. Let me know if the problem still exists. I will help you add FB comment box in Blogger.

    Reply
    Bouy Bourany

    Yes my blog was used custom domain and i added it in app setting such as app domain ,Site url,Mobile site url . fill app domain with my domain without http. but i seem not getting any notification to my moderator page .. I have been tested by using other facebook account. Help me please and check my site [7khmertv.com]

    Reply
misteri dunia

Thanks a bunch, worked at first try but seems like I can't receive notifications on both personal and page Facebook address

Reply
    Chamal Rathnayaka

    First add yourself as a comment moderator, else you won't receive notifications. Then logout from your Facebook account and comment on your blog through another account such as Yahoo. Let me know how it works out for you.

    Reply
makemoneyblogging

hey dude I've tried your method to add fb comment box to my blog http://www.makemoneyblogging.in but after doing this the comment box did not appear then i tried back another method, still comment box not appearing can you please check my blog at once to find out actual problem…

Reply
    Chamal Rathnayaka

    You haven't followed above steps correctly. Make sure you placed the Facebook comment box HTML code just below of proper data tag. Follow above instructions correctly and let me know how it works out for you.

    Reply
Frederico Santos

Hi Shamal, I'm blocked on step 5 I cannot trace in my template < body>. Until now I didn't save nothing because of this. My website is fredericosantos.com. You ve already help me once I hope you can resolve this one more time 😉 thanks

Reply
    Chamal Rathnayaka

    Hi Frederico,

    If you can't find <body> tag, then simply search this code: <body

    You'll find only one code. I have found that your blog template has styles for body element too. Do let me know if you have any problem.

    Reply
Lance Elot

Hello again Chamal,

Thanks for your concern regarding the use of xmlns:fb in my blog. However, you must have landed in the wrong blog. My blog has it configured. (See source in this link: view-source:getlostproblems.blogspot.com ). You will see in line no.531 that the metadata are also properly configured.

I had fb comment box already implemented, about a year ago. So everything works out great. I just didnt know the trick involved in auto-posting comment box for each new post. Thanks for that!

This is the blog I mentioned last time [ http://www.gundrukpost.com/ ]. Please study their layout for mobile. I am impressed by their simplistic design.

Also I've noticed, when you google "The Gundruk Post", only their result is at the top & comes in expanded form (that makes it standout and must have got much impressions from that. I'd like to do that too. Any ideas? )

Reply
    Chamal Rathnayaka

    Hello Lance,

    Glad Facebook comment box works perfectly on your blog. I just specified Facebook comment box to appear on specific pages such as post pages. Do you get notifications for comments?

    In the case of mobile design, they have used a responsive theme. You too can use a responsive template on your blog, so the screen will adapt to the screen resolution.

    The reason your blog don't appear for certain search term is that your blog's SEO is poor. Read my complete Blogger SEO guide to learn how to optimize your blog for search engines.

    Do let me know how it works for you.

    Reply
    Lance Elot

    Yes Fb comment box works like a charm! I have just one problem with it. Whenever someone comments, I receive a message similar to the one you've posted in your article.

    This is the format: "[SOMEONE] has commented in your blog [MY_BLOG_LINK]". The problem is, that wherever I comment from my blog – be it just from [HOME] or one of my [PAGES] or [POSTS], I always get the same message.

    Therefore, I know that someone has made a comment, and can also see it in the developers app moderation tool , but I do not know the EXACT link or post where the comment came from. That is a hassle I have had to face.

    I am thinking of implementing DISQUS in my blog. What do you think? I would appreciate if you could give me hints about making Tabbed comments for different [Facebook], [Disqus], and [Blogger Default] Comment boxes.

    -x-x-x-
    On a different note, I found out that those things that show up with Main Site Link on google searches – They're called Sitelinks. Your [THIS] site doesn't have sitelinks as well. Here's an example of a site using sitelinks [This leads to google search : The gundruk post > http://goo.gl/xktsoi ] . Help me make one if you have time. okay? Thanks in advance. Hoping for a reply soon ^_^

    Reply
    Chamal Rathnayaka

    Hello Lance,

    Yes, even through you receive a short message on FB, you can actually find where the comment is located. Just go to https://developers.facebook.com/tools/comments and select the particular app. Then select on "Moderator View". Hover on "Visit website" link and you can see where the comment is located on.

    Yes, Disqus is far better than Facebook comments as my opinion. It has a few versatile features than Facebook comments. You can create a tabbed widget to include Facebook, Blogger and Disqus comments. It needs a few codes. I have seen many bloggers are using these types of widgets. Simply search on Google and find a good tutorial. If you couldn't find, check out Blogger Template publications and search for templates with tabbed widgets.

    No, ProBlogTricks also has site-links on Google. But, Google has its own technology to detect user interests, so can decide when and where to show sitelinks in SERPs. Your search page direct to a Google country domain. The reason Google shows sitelinks for your domain in local search results might be the blog is optimized for a regional audience. Check the ProBlogTricks on Google.com and you'll find it also as site-links. (remove history (Google), clear cache, cookies, else you won't see it correctly)

    Actually, no anyone can control the site-links in Google. But, you can demote site links through Google webmaster tools. Sitelinks is a good indicator that Google regards website as a brand. So you need to build a few backlinks and post quality content on blog. It could takes months or only a few weeks. Take a few hours and work on your blog. Create social channels for your blog and build a few links with the anchor text of your brand name.

    Hope this helped you. Let me know if you have any other question.

    Reply
عبيد ٿهيم

Dear.
i'm from Sindh,Pakistan.
i used your trick, i applied blogger facebook comment box but it doesn't appear in blog's Page. it shows only blog post not on Blog Pages.
so please help me & tell me that how to apply comment box in blogger Page also.

thanks.

Reply
    Chamal Rathnayaka

    I have mentioned how to show Facebook comment box in blogger static pages. I think you couldn't read above statements. To your notice, here is how to do it.

    Go to your Template editor and find the HTML Facebook comment box code. Then find below conditional tag/code line.

    <b:if cond='data:blog.pageType == "static_page"'>

    remove it and make sure you also deleted the closing tag of above code.

    That's it! Looking forward know to how it works for you.

    Thanks.

    Reply
Mayedul

This is very effective for me. Thanks for your article.

Reply
Mayedul

This is very effective for me. Thanks for your article.

Reply
    Chamal Rathnayaka

    Hi Mayedul,

    Add Facebook comments to blogger is not difficult if you followed above steps correctly. Glad you followed above steps and successfully and installed the Facebook comment box on Blogger.

    Thanks for commenting here. Look forward to hearing more from you.

    Reply
Sudhin Venu

Hi Chamal! Your code is working perfectly fine on my site, however, I am not receiving the notifications. I can see all the comments on Comment Moderation Tool, and I've added me as a moderator on it as well. Still I am not getting any notifications on it. Is there any way that you could help me out? My site is http://www.chordzone.org

Reply
    Chamal Rathnayaka

    Hi Sudhin,

    Glad Facebook comment box code is working perfectly on your blog. Make sure you comment NOT using your Facebook account. You can comment on your blog through another account or Fan page account.

    Let me know if the problem still exists. I will help you get comment notifications to your Facebook account.

    Reply
kIRON

Very necessary article for beginner. Thanks for sharing.

Reply
Lance Elot

Yo Chamal! Thanks for the tip last time. Sorry for troubling you without trying out the code before. You should mention in your post that the auto-commentbox code only works when the code is written in the html template.(Doesn't work if we place the code in layout or the post itself). This was the only reason why the code didnt work in my blog before. Now as I have implemented it in my main template, its working nicely! Thanks again. This trick would have completely slipped my mind, had I not seen your article 🙂

But there still seems to be a small problem. The comment box in my site (and as given in this post) is NOT optimized for mobile. Which means it will NOT appear in mobile sites. I should not write URL here, so I'm just giving a blog title. There is a clever blogger at [TheGundrukPost] who has implemented Facebook comment-box and hovering like button(I think from his own implementation technique). Can you help me reproduce the same effect. I need to have comment for my mobile site too. Thanks.

My blog is [GetLostProblems] if you should know. Just google. Tell me whats wrong with my comment box implementation okay? Thanks!

Reply
    Chamal Rathnayaka

    Hello Lance,

    Yes, if you implemented Facebook Comment Box code in Blogger layout boxes and posts pages, this method wouldn't work, as there are a few elements such as Blogger data tags which only work on Blogger template.

    By default, Facebook comment box is not responsive. Uses JavaScript and frames. There are a few ways to make the Facebook comment box mobile-friendly on WordPress and Joomla. But, i couldn't find a way to make Facebook comment box responsive on Blogger. (And i didn't try to make it!)

    Lance there is no any restriction to share a useful page URL here. I searched on Google, but couldn't find the tutorial page. Can you share the page URL here?

    I checked your blog and saw that you haven't properly set up the Facebook comment box code on your template. Revert back and follow each steps respectively. I found that you even didn't add the xmlns:fb tag. No Facebook cookies variable definition on the code.

    Let me know what happens on your blog.

    Thanks for reply Lance. Glad i could help you.

    Reply
Ugly Potatoes

when i click to make it public for visitors they want me to to update app details what is the problem ?

Reply
Vishal sharma

not working for me??????/
notfication not received

Reply
    Chamal Rathnayaka

    Vishal, you should create a Facebook application in order to receive notifications to your email. If you followed above steps correctly, you should receive notifications.

    If the problem exists, please let me know. provide me your blog address.

    Reply
Lance Elot

Hello Chamal, please REPLY to this as soon as possible. I need a method to automatically add facebook comments for every blog post I publish. Doing it manually is ardent job. I found a method for wordpress… butcouldnt find one for blogger. can you help me in this one?

Reply
    Chamal Rathnayaka

    Yes, Lance, The steps i explained in this tutorial is how to add Facebook comment box to Blogger automatically and get notifications. Follow above instructions and add Facebook comment box. Let me know if you have any problem. I will help you install Facebook comment box on your blog.

    Reply
Anonymous

Pls the facebook comment box is not displaying on mobile devices.

Reply
Data Profiling

Thanks for taking time to write this easy guide. I am really impressed with your post.

Reply
Customer Care Numbers

thanks for sharing this article. thanks a lot..

Reply
The Damn Beast

Hey! Thank you so much for this easy to follow guide. For some reason, even though I followed your instructions beat by beat, it's not working. I don't get any error messages at all on my HTML template editor , but when I check the posts, nada. Tried it on FireFox and Chrome and it's not working.

Any idea why this could be happening?

Thank you very much!

Reply
    Chamal Rathnayaka

    Hi,

    I think you might have placed the HTML code of Facebook comment box in wrong the place. Please check your Blogger template's <data:post.body/> code again and add the comment box code to the correct place.

    Tip: If your blog template has three similar codes, add Facebook comment box code to all those places and then remove one by one to find the correct place.

    If you have any problem adding Facebook comment box to your blog, reply it here. I will help you set it up.

    Reply
Michael Molli

Hello Chamal,

please check my template source code, here is my blog =

http://naja-also.blogspot.de/

I have followed all the steps but it does not work for me.
Only the last Step 7: "Now paste one pieces of HTML codes of Facebook comment boxes just below of the above codes." … I'm not sure what piece of HTML code you mean. I used this:

"Facebook comment box style #1 for white color background templates"

Is that supposed to be a code?
Anyway, if you could help me get the facebook comments box to appear, I would love that.
Thanks

Reply
    Chamal Rathnayaka

    Hello Michael,

    The HTML code for Facebook comment box Blogspot is showing below each examples.I removed social content locker, so you can copy the HTML code easily.

    Michael, I saw that you have added Facebook comments box to your blog. If you want to get notifications to your Facebook profile, make sure you set up the website address correctly. By adding country-based urls (ex: blogspot.de, blogspot.jp) in Facebook app settings page, you will not get notifications from certain people.

    I am looking forward to help you set up the Facebook comments on your BlogSpot blog. If you have any problem, share it with us here.

    Reply
    Michael Molli

    Hello Chamal,

    your HTML codes below each examples (Style #1 and #2) are showing up now, thanks very much for that. I have added Facebok Comment Boxes for a number of my last entries on blogspot manually by following this guide:

    http://www.devetol.com/how-to-add-facebook-comment-box-in-blogger/

    However it would rather use your method, as the comment box would not need to be added for each (new) posting separately. I'm not sure whether my blog uses a magazin template or not – would you be able to tell? Depending on the answer I apparently would need to remove the highlighted part of the code in yellow, explained under step 7 / customazation / second bullet point from above.

    Should I better remove the individual html codes of each of the few postings?

    In regard to notifications, you mean I should avoid using country based URLs in Facebook app settings page ….. does it mean I should just use the .com domain like this?

    "http://naja-also.blogspot.com/&quot; instead of "http://naja-also.blogspot.de/&quot; ….. is that right?

    Thanks very much for your help. That's nice of you.
    Michael

    Reply
    Chamal Rathnayaka

    Hello Michael,

    You don't need to worry too much about your Blogger template. Yes, it's a magazine template. so you would copy the whole code and place it on the proper place. What those highlight codes do is that only execute the code in Blogger post and static pages. That means Facebook comment box will not show in home page (That we don't want!).

    Yes, i suggest you to remove individual HTML codes. By using this method, you never need to worry about Facebook comment box. This script will show comment box in every individual post and static pages automatically.

    If most of your readers are coming from blogspot.com and you want receive notifications for those comments, i would suggest you to add .blogspot.com version.

    Here is a tutorial on how to prevent Blogger blog from redirecting to country specific domain. You can follow the instructions on this post to redirect country based traffic to .com version.

    http://www.labnol.org/internet/prevent-blogger-country-redirection/21031/

    You can prevent this issue very easily, if you use a custom domain name for your blog.

    https://www.pitiya.com/2014/10/how-to-set-up-custom-domain-name-in-blogger.html

    Do let me know whether you have any problem setting up Facebook comments on Blogger.

    Thank you for your appreciative feedback Michael.

    Reply
Stanislaus Okwor

Thank you for the guide. Please I find it difficult to save the template after editing. Help please. Blog Address: http;//www.talknigeria.com.ng

Thanks

Reply
    Chamal Rathnayaka

    Stanislaus, i didn't find the Facebook comment box code on your template source code. Check your template again to make sure you followed above steps correctly.

    The reason your template doesn't save might be you mistype any code (ex:without ending tags) or your internet collection might be low.

    Reply me here, you get the same problem again. I will help you set up Facebook comments on your blog.

    Thank you.

    Reply
Okewumi Kenny

its not working on my blog i don't know why

Reply
usman ashraf

not working on my blog
uvasclinic.blogspot.com

Reply
Angraj

Hi bro! I'hv implemented this code and working like a charm but I and not getting the notification of the comments. Plz help and check where I am doing it wrong. My blog is hinditracks.blogspot.com
Thanking you in anticipation.

Reply
    Chamal Rathnayaka

    Hi Angraj, I checked your website. You didn't placed the HTML and meta codes in proper places. Recheck and add the FB comment box codes in relevant places. If your problem is same, reply to this comment, i will help you to get notifications to your Facebook profile.

    Thank you.

    Reply
Rock Stone

I did as asked but never worked, Really frustrated now >:( have been trying to do it since past 2 days Please help 🙁

Reply
    Chamal Rathnayaka

    Hello Rock, Make sure you added the Facebook comment box code in the proper place. If you can't find out the problem. reply to this comment with your blog address. I will help you set up the Facebook comment box in your blog.

    Reply
    Rock Stone

    My blog address is http://www.hmhao.blogspot.in
    And the problem is that, I do everything as said but the template never gets saved

    Reply
    Chamal Rathnayaka

    I didn't found the Meta tags and the HTML code of Facebook comment box in your blog. Make sure you followed above instructions correctly and added the codes in proper places (placing in wrong places might cause Not to save your template and not showing the Facebook widget). Recheck and reply here if the problem still occurs.

    Reply
    Rock Stone

    I don't know how but I finally got your facebook comments,Please do check If I have doen anything wrong, Have Tweaked it a little, But Am not getting any notifications on FB though , PLease helo ????
    Also I wanted Blogger And facebook comment box side by side can u tell me how to do that ???
    And thank you so much for all your help in advance !!!

    Reply
    Chamal Rathnayaka

    After adding Facebook comment box code into your BlogSpot blog, you need to make user-self as a comment moderator. Only comment moderators can receive notifications for comments on your blog. Make sure you can control the Facebook App.

    To use both Facebook and Blogger comment systems, you need to add a tabbed widget.

    Reply
Paluch

Hey Chamal,
Any chance to make it work inside tabs together with blogger comments? I was using other script and it works ok, but the problem is that it doesnt show facebbok comments on static pages. Your script seems to work on static pages but I can't figure out how to change it in order to have it inside tabs. Any idea?
http://www.roadsideletters.com

Reply
    Chamal Rathnayaka

    Hi Paluch,

    Yes, we can use both Facebook and Blogspot comment systems together in Blogger within tabs. But need some codes to do. Make sure your tabbed widget code includes conditional tags which hide comment box from Blogger static pages.

    Reply
    Chamal Rathnayaka

    Yes, this tutorial is all about Facebook comment box with notifications. I will try to post another tutorial on adding tabbed comment systems on Blogger. Thanks for your idea Paluch.

    Reply
    Paluch

    I actually want to show it on static pages, but the code I use that comes from http://www.jsblogstop.com/2011/03/blogger-how-to-add-facebook-comments.html doesn't work on these kind of pages. I added a conditional tag but still it doesn't show. That tutorial is quite old and your code is very different, so I don't know how to change your code to put comments in tabs.
    Maybe you could write a new tutorial about how to add tabbed blogger and facebook comments with notifications and working on static pages. I think there is a lot of people who would like to have it in their blog. Most tutorials about tabbed comments are at least two, three years old, so a bit outdated.

    Thanks

    Reply
Nikos

When I hit on "save" button on Facebook "Edit Comment Settings", it cannot save. I hit the button but it doesn't work and I can't save the changes.

Reply
    Chamal Rathnayaka

    Nikos, Make sure you added correct Application ID. And also check out your Internet connection. If the problem is still remaining, delete the cookies and follow the steps again. If you have any question related to FB comment box, reply here. I will help you to install it on your blog.

    Reply
Kristine Mae Ledda

Hi! I have followed your directions step by step and I am pretty sure that I did not miss anything. But the comment box is still not on my page. What could possibly be wrong? Here's my site http://kmledda.blogspot.com I hope you can help me. Thanks!

Reply
    Chamal Rathnayaka

    Hi Kristine,

    I examined your Template now. But didn't see anything related to Facebook comment box in your Template. Follow above steps again and reply here. I will help you to add Facebook comments box to your BlogSpot blog.

    Reply
    Kristine Mae Ledda

    Yeah. I decided to revert it back. I figured that I haven't used the right html for step 7. I appreciate your effort examining my template. Thanks and more powers!

    Reply
    Chamal Rathnayaka

    Hope Facebook comment box works well on your BlogSpot blog. Thank you for your feedback Kristine.

    Reply
gnz©

Thank you, works like miracle (k)

Reply
Ajay Agade

I followed your method correctly for several times. The good news is before visiting ur post, everytime it said html error, but this time everything went well except that nothing is showing on my blog. please help. My blog is (dnbpediatricsdotcom). thank you;

Reply
    Chamal Rathnayaka

    Ajay, Make sure you placed the HTML code in relevant place. Just experiment by adding comment box code in every place and then exclude one by one to identify what's the correct data:post.body code.

    Reply
Manish Gautam

hey please remove floating sharing buttons from your site . i am unable to read articles

Reply
Marina Casapu

Why is it not working? I did everything correct, i'm sure. I've tried to put the comments box on my blog, more than 15 times, and it's just not working.

Reply
    Chamal Rathnayaka

    Marina, Make sure you put Facebook comment box source code in proper place. There may be more than two data:post.body codes in your Blogger template. So, copy and paste comments bo x code in all places and check your website again.

    If you can't see the Comment box, reply here.

    Reply
Movie Kangz

Hi, I love this plug in, ive got it to work on my desktop website http://www.biggbunnz.com, but i need help with making this facebook comment box also show on mobile blog site. HELP ;(( please.

Thanks

Reply
    Chamal Rathnayaka

    I'm glad you like this plugin. If it works on your desktop blogger version, so it should also work on mobile devices. Make sure your Blogger template doesn't disallow widgets to be preview in mobile views. Change your template view in mobile devices from template section.

    Reply
Mani

When I am trying to add my blog in the basic setting page it is showing this error
"This must be derived from Canvas URL, Secure Canvas URL, Unity Binary URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains: http://www.itoocaninvest.blogspot.in&quot; . I dont understand what it is. Please help

Reply
    Chamal Rathnayaka

    When you add App domains name, don't add your full blog address. And you might added blogspot.in instead blogspot.com. This could block Facebook comment box showing for other peoples who are visiting your blog. So, when you add App domains name, add this itoocaninvest.blogspot.com.

    Also for site URL, you would add your full blog address as http://www.itoocaninvest.blogspot.com

    If you have any problem, share your questions here.

    Reply
حسام عامر

Hello Chamal thank you for this tutorial
I followed your tutorial and double checked everything carefully
but It is not working in my blog. Can you please help me out?

this is my blog link http://latshetklm.blogspot.com

Reply
    Chamal Rathnayaka

    If you followed all steps correctly (including create a Facebook application), you may lost your way on the adding Facebook comments widget code. Double check where Facebook comment box code placed. Let me know your progress and i will help you adding Facebook comment box to your blog.

    Reply
Sheikh Nazmul Islam

dear bro pls tell me what's MY APPLICATION ID HERE?

Reply
    Chamal Rathnayaka

    Sheikh, I recommend you to read and follow tutorial thoroughly. Actually you don't need to create an Application, if you don't want to receive comment notification to your Facebook profile.

    Reply
pradee.dvg

Hi,
Admin

Your step by step tutorial explanation is very helpful to beginners..
and one thing i suggest publish complete coding in a singe page it's much better

thanking you…
(h)

Reply
Reverie

Had no luck. I followed and double checked everything carefully.
Upon checking, I noticed that the end of the FB Comment box code was in red.
Why's that?
The one that ends the paragraph and if clause.

Would still try to work on this though.

Reply
    Chamal Rathnayaka

    Reverie, Make sure your Blogger template coding structure is looking good. Also the copied code for Facebook comments box. If you pasted the code in wrong place or lose any ending tag, Blogger will alert you. In your case, you might not add the ending tag of if condition tag. Double check your template and do let me know your progress.

    Reply
    Gyro De Leon

    I was able to work it out. Though it took me some time since I was having second thoughts if it will affect my traffic and trust ranking. I'm only a newbie in this blog thing.

    BTW, will this affect my current SEO score or trust rank? It's still low so I don't want to end up even lower.

    Thanks for this! It works perfectly. I'll just wait for comments there now to check the notifications. Thanks again!

    Reply
    Chamal Rathnayaka

    Hi Gyro,

    Facebook comment box is just another comment box. Yes, there are a few times which decrease your blog post page's SEO rankings. ex: irrelevant comments (which dilute the keyword densities)

    Anyway, having a good working and enticing comment box is very important. Because comment boxes add user-generated content. Look how forums such as warriorforum get lots of traffic from user-generated content.

    In earlier days, search engine bots couldn't crawl content in Facebook comment boxes. Because, Facebook uses frames and JavaScript to load comments. But, now everything has changed. Now Googlebot can crawl JavaScript codes.

    That means Google index Facebook comments. So, you get more benefits additionally user engagement through Facebook comments.

    Make sure you checked out my ultimate guide on BlogSpot On-Page SEO which will teach you how to set up BlogSpot blogs for search engines and drive lots of traffic.

    https://www.pitiya.com/2014/10/blogspot-seo-tips-best-on-page-seo-strategies-for-bloggers.html

    More comments your blog posts have, for more long tail keywords they'll rank. Facebook comment box with notifications enabled doesn't hurt SEO performance of your blog.

    Glad it works great on your blog. You can test comment notifications of Facebook comment box by commenting as a different user.

    Thank you for commenting here Gyro. Happy blogging!

    Reply
Erniesha Tibs

Perfect…all done here…everydaytibs.blogspot.com….I had to improvise to display the facebook comment box on posts..not the homepage… thank you so much for this..

Reply
Onur Batur

Thank you. 🙂

Reply
Dhara

Hi. After following your old tutorial I couldn't get the comment box. So I was starting to follow your new tutorial. I already had an application ID as I had use the comment box before. I was trying it again and on my developers page, when I enter "blogspot.com" in APP DOMAINS box, it says "top-level domains are not allowed" with a red triangle on the side.
DO you know, why that is? Is that the reason I am not getting the comment box?
http://mycactusdress.blogspot.com/

Reply
Elpida Vitsara

Ok thank you ! So let me check and see what have I done wrong and be right back ! And when you say redirect to com and not to gr … you mean I have to fill the app I made with my urls blog but not on with my country's domain … the one that redirects to that … .com … right ??

Reply
    Chamal Rathnayaka

    If you set app domain to blogspot.gr, so Facebook comment box could appear only on this domain, not blogspot.in etc. I recommend redirect your country specific domain to the .com domain. And then follow the instructions to add FB comment box to blogger.

    Reply
Elpida Vitsara

Hello there, thank you for this post !

My blog is http://tusitusis.blogspot.gr/

I tried and what went on was that a comment box was created as a gadget and it has inside this code =>

div class="fb-comments" data-href="http://example.com/comments&quot; data-width="430" data-numposts="5" data-colorscheme="dark"></div

(with the proper opening and closing div – I just could not paste it here – it prevented me from that)

Please tell me what I should to to fix this.

1. how should I modify the code in the gadget & 2. I want readers to be able to post on every post

Thank you in advanced,
Yours Trully !

Reply
    Chamal Rathnayaka

    Hello Elpida,

    Looks like you're going to add Facebook comment box to a country-specific domain (.blogspot.gr not .blogsot.com). If you do that, Facebook comment box will not appear for US, India, Pakistan, Malaysia people. Yes, It will only display for who are viewing the above domain. So i recommend you to redirect country specific traffic to your .com domain and add Facebook comment system to that.

    It looks like you haven't followed above steps correctly. If you done it well, the data-href URL should not be 'http://example.com/comments&#39; and it should be your post page URL. Other thing there are more codes than above.

    I recommend you to scan your blog template again and check that you followed above instructions correctly. If you done it well, Facebook comment box will appear on every blog post and you will receive notifications to your Facebook account.

    If you need any help to show up Facebook comment box on your blog, reply to this comment. I will do my best to help you out.

    Thank you!

    Reply
Sirius BlackFx

Hi, very helpful !!!
Very thank you
everything seem to be prefect !! but some problem :
when I try to comment my blog (other FBid and browser) why it don't have notifications to mod facebook ? ;((
and "developers.facebook.com/tools/comments/?id…" don't got any comment

may be I use same IP ?

Thank you.

Reply
    Chamal Rathnayaka

    Yes, IP address may matter. But, I think it's because you use the same Facebook account. It doesn't need to send a notification to your FB account, showing that you commented on your blog.

    So i suggest comment on your blog using a different Facebook account or use your Facebook account as different user. (EX:- Your Fan page)

    Thank you Sirius for sharing your feedback. I appreciate it.

    Reply
El Sayed Ramadan

I can not find the codes in step 5 what shall I do ?? this is my blog http://5minuteenglish.blogspot.com/
pls. I need ur help

Reply
Lorianne Mariais

Hello, thank you for this tutorial which helped a lot. I have just one problem though I'm not sure if you can help. I have listed the website and domain in the app form with a french extension (blogspot.fr) and noticed that comments will only show to people using that extension. For instance, anyone visiting through a (blogspot.co.uk, blogspot.com, blogspot.no, etc.) will not see the comments made on (blogspot.fr) and vice-versa. I tried to fix this by including every extension blogger has in the "App Domains" section of the app form, but it's still not fixing the problem. Any ideas? Thank you.

Reply
    Chamal Rathnayaka

    Hello Lorianne, First thank you for sharing your problem with us. Yes, If you added french domain name extension to Facebook app, it will only the comments to french extension site.

    BlogSpot is a website. it has different country domains such as blogspot.in, blogspot.co.uk like google.in, google.co.uk, google.co.th and google.co.nz. If you search on google.co.uk Google website, there are more likely you will get more results related to United Kingdom.

    There is a one solution to this. redirect country domains like blogspot.co.uk and blogspot.in to blogspot.com and then add it to Facebook app domains.

    Then comments notifications will come to your Facebook account just like above instance. Do let me know how it worked.

    Reply
Sudhin Venu

It is not working in my blog. Can you please help me out?
My site is http://www.chordzone.org

Reply
    Chamal Rathnayaka

    Sudhin, It looks like there is not the default comment form on your blog. And you have enabled Disqus comment system. So this may be the problem to not working the Facebook comment box on your blog. But if you followed above steps correctly, Facebook comment box should appear on your blog.

    Do you get any error message? Or does Facebook comment box not appear? Do let me know. I will help you to add Facebook comment box to your blog.

    Reply
    Sudhin Venu

    Hi Chamal! Thank you first of all for replying to my comment. I have seeked help in many other forums but yours is the only one who replied. You are awesome !!!

    Well, I am not getting any errors or anything while saving the template. I have tried refreshing the page, but still the facebook comments are not appearing.
    Is this caused due to disqus?
    I want to keep disqus as well as facebook comments on my blog. Can you tell me what to do?

    Reply
    Chamal Rathnayaka

    If you did everything well, then Facebook comment box widget should appear on your blog. Open your blog on a different web browser. If still Facebook comment box didn't appear, then there might be wrong in your code.

    Yes, you can use both Facebook and Disqus comment systems on your blog. I will share a post how to use multiple comment systems on Blogger. If you have backed up your Blogger template, then restore it and followed above steps again correctly.

    Do let me know what happened Sudhin, I will help you to add FB comment box.

    Reply
    Sudhin Venu

    Hey Chamal,
    I have checked in another browser(Firefox), but only Disqus is loading up.
    If it's not too much to ask, can you check my source code to see the problem?
    I can also email you my template if you can fix it.
    Thanks for your help!!!

    Reply
    Chamal Rathnayaka

    Contact me Sudhin Venu.

    Reply
Anna Ho

Thank you for this tutorial. It was very useful.

Reply
ibrahim adel

it's done here : http://www.alnaharweb.com/
thank you (h) (h)

Reply

Leave a Reply:

Generate Little-known, High Traffic Keywords Without Struggling

Steal my step-by-step blueprint.