Jenson Taylor Blog

24 March 2012

Integrate Facebook Comments for Blogger Tutorial

7 Day Blogging Challenge Day 5 - Facebook Friday
Display Facebook comments on your blog and let Facebook users comment on your blog without signing up for Blogger or other services.

This tutorial assumes that you have a Facebook account and a Blogger account with a blog.

1. First you need to create a Facebook App for your blog. In order to do this go to https://developers.facebook.com/apps 

2. In the top right of your screen click on the "+ Create New App" button as shown in the screen shot below:
3. You will be presented with the screen below in which you need to choose:
  • A name for your app which can be anything you like; I have chosen "JT Blog Comments"
  • A namespace for your app this can be anything you like as well but it must be in all lower case letters without any spaces. I have chosen "jensontaylor". Don't worry about what these attributes do, but just know that they are necessary for any Facebook App.
  • Do NOT tick the web hosting option. This is not necessary for our comment application.
Once you have entered all the details click "Continue"

4. You will then be asked to pass the "captcha" test. i.e. type in the letters in the image in order for Facebook to verify that you are a human and not a spamming computer program. Enter the correct letters or numbers the click "Submit".

4.a) If you have not setup your Facebook account with a mobile phone number you will see the message below. If you don't see the message below skip to step 5 (that means you have already setup your account with a mobile telephone). For those of you - such as myself - who come across this message, click on the link in the red box which says "mobile phone".


4.b) You will then see the screen below;

  • Select your country
  • Enter your mobile phone number
  • Then click the "Confirm" button



4.c) You will be taken to the page below and at the same time receive a text message(SMS) on your mobile phone. Enter the code from the SMS you received on your mobile phone in the box and click "Confirm"


4.d) You will then see a success message as shown below stating that your account has been verified. Close this page and go back to where you left off when you came across the popup at step (4.a).


4.e) Follow instructions in step 3 again.

4.f) Follow only the first part of step 4 which is only entering the skewed text displayed in the image. Then jump to step 5.

5. You will see the page displayed below;

  • Make a note of your App ID or copy it
  • Where is says "App Domain" enter "blogspot.com". (If you host your blog on your own domain name then enter your domain name here)
  • In the "Website" section where it says "Site URL" enter the address of your blog e.g. "http://jensontaylor.blogspot.com"
  • Click "Save Changes"


6. After saving the changes to your Facebook app, you will see a confirmation message in a yellow box at the top of the webpage.

Now your Facebook App is ready. Just make a copy of the App ID as you will need this number when integrating the Facebook comment application into your blog.

7. Change the code below by replacing FACEBOOK-APP-ID with your Facebook App ID number which  you copied at step 5.
<meta content="FACEBOOK-APP-ID" property="fb:app_id" />
So my modified code looks like this: 
<meta content="336995009681830" property="fb:app_id" />
8. Go to your blog dashboard on Blogger.com; Select "Template" then click on "Edit HTML" as highlighted in the screenshot below:


9. You will receive a popup with a few options. Click on the "Proceed" button as shown below:


10. You will then see the code in your template. Try to locate the <head> tag as shown in the screen below:


11. Just below the <head> tag paste your modified code from step 7. Here is how my code looked like after this change:

12. Click "Save Template"

13. Now you need to add some more code to your template (this is the actual code for the Facebook comment section below your blog posts). Go to you blogger dashboard for your blog then select "Template" > "Edit HTML" > "Proceed" to view your HTML code (i.e. follow steps 8 and 9)


Update 21/04/2013: Since 11th of April 2013 step 14 is no longer necessary. This check-box has been removed and instead each widget can be expanded using an arrow to the left of it. Also there is a drop down menu at the top of the editor which allows you to select the widget that you want to scroll to in one click.
14. Tick the "Expand Widget Templates" checkbox as shown below:

15. Find the code below in your template code using Ctrl-F shortcut and paste the code into the search box.  Warning: Do NOT try to type the text below as your web browser could freeze.
<div class='post-footer-line post-footer-line-3'>
The screenshot below shows how it would look:

If you were able to find the tag that you searched for jump to step 16.

15.a) Depending on the blogger template that you are using it is possible that the above search fails. In that case search for this tag:
<p class='post-footer-line post-footer-line-3'> 
15.b) if the search at step 15.a failed then search for the following tag:
<data:post.body/>
16. Paste the code below immediately after the tag you found at step 15(or 15.a xor 15.b)
<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/> </b:if>
So the resulting code would look like this:
Optional: To change the width of your comment box in the code above change width="450" to whatever you see suitable for your blog.

Optional: To change the color scheme of your comment box you can change the word "light" to "dark" for the attribute colorscheme='light' which gives you the two coloring schemes available for Facebook comment boxes.

17. You now need to add the Facebook Namespace declaration in your code. If you go the top of your code you will see a tag as <html as shown below:


You need to add the code below right after the <html tag
xmlns:fb="https://www.facebook.com/2008/fbml"
So it would look like this instead: 
<html xmlns:fb="https://www.facebook.com/2008/fbml"
Here is a screen shot of the code after the change:
Note: The namespace added in the code above is used for all Facebook widgets and apps. So you only need to add this into your code once, regardless of how many different FBML widgets you use.

18. Click "Save Template"

19. Click "Close"

20. Enjoy!


Moderating comments, Administration options and housekeeping
Visit this URL http://developers.facebook.com/tools/comments in order to view all the posted comments on your blog. This is the screen you will see:


If you click the "Settings" link on the above page you will be presented with a few options that are self explanatory such as adding Moderators for your blog or allowing users with different logins to leave comments(e.g. Yahoo or Hotmail logins). Here is a screenshot of the settings page:

Removing Blogger Comments
Although I would not recommend to anyone that they remove blogger's default commenting feature, if you choose to do so you can easily hide or show it from your blogs dashboard by going to

  1. Settings 
  2. Posts and comments 
  3. Comment Location then select "Hide"
  4. Make sure to click "Save Settings"


If the screenshots are too small to read, you can click on them to enlarge them.

If you run into any problems, let me know in the Facebook comments' section ;)

If you'd like to be updated on new blog posts please subscribe to my RSS feed and/or via email.



UPDATE (17/01/2013)

Adding a Facebook Comment Section For Stand Alone Pages on Blogger

If you have a stand alone page such as http://jensontaylor.blogspot.com/p/jenson-taylor.html then the above procedure for adding facebook comments will not work as the above approach only applies for blog posts and not "pages". So in order to obtain the facebook comment section on stand alone pages you need to follow the steps below in addition to the above steps. (Note that the steps below need to be repeated for every single page whereas the above guide which only includes blog posts will cover all your blog posts. Note 2; blog posts and blog pages are two different things)

1. Go to your page then select "Edit" as shown in the screen shot below:

2. Once you go through to the edit page, look at the URL in the address bar at the top of your browser. You will see an address similar to this:

http://www.blogger.com/blogger.g?blogID=363170316363135703#editor/target=page;pageID=1979633926023450196

3. Make a note of the last number from the URL address. (This will be unique to your own page so don't copy the number I have shown here.) In my example the number is 1979633926023450196.

4. Click on the "HTML" tab as shown on the screen shot below:

5. Now you will see the HTML code behind your page. Go to the bottom of this code and "Cope & Paste" the following text:

<div id="fb-root">
</div>
<script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments colorscheme="light" href="http://jensontaylor.blogspot.com/p/jenson-taylor.html" title="Jenson Taylor | Jenson Taylor Blog" width="450" xid="1979633926023450196"></fb:comments>

6. The above code is an example used for one my blog pages so you have to change 3 parts that are highlighted (in red) in the above code to suit your own blog page.
6.a. The URL of your blog page. (In my example it's http://jensontaylor.blogspot.com/p/jenson-taylor.html)
6.b. The title of your page. (In my example it's Jenson Taylor | Jenson Taylor Blog)
6.c. The page id of your page. This is the number that you made note of in step 3. (In my example it's 1979633926023450196)

7. After you have entered the code in your page it should look like the below screen shot so just press update and your page should be ready for facebook comments.


If the screenshots are too small to read, you can click on them to enlarge them.

If you run into any problems, let me know in the Facebook comments' section ;)

To stay updated on new blog posts subscribe to my RSS feed and/or via email.

222 comments:

  1. I was kinda hoping this would be an integrated feature for all blogs. Having Facebook connectivity can surely help a blog become more interactive.

    Nice post.

    ReplyDelete
    Replies
    1. I agree but with Google+ and Facebook competing against each other, we might never see a full integration :(

      Delete
  2. Thats Good Jenson,
    Happy to know and
    note that, I am
    the first one to
    test it. Hi Hi Hi
    Bye
    T C
    Phil

    ReplyDelete
  3. Thank you :) Well explained tutorial.

    ReplyDelete
    Replies
    1. thanks, glad it was of use to you ;)

      Delete
  4. Hi Jenson!

    Thank you so much for such a detailed tutorial... I followed it step by step on my blog (blog.BlogDesign.es) yet the comment box isn't appearing below my post... I've followed over a dozen tutorials already with no luck yet. Could you please help out?

    Thanks in advance,

    Kind regards,

    Louma

    ReplyDelete
    Replies
    1. Hello, I just checked your blog and it seems to be working. Do you know what was causing the problem?

      Delete
    2. Hi Jenson!

      Thank you so much for checking my blog! I just kept trying and trying and it finally worked, don't remember what was wrong exactly...

      I recently installed a new template on another site of mine (AmorMaternal.com) and the comments are acting all weird... They show up on all posts, but the same comments, as though FB assumed the whole blog was one "item" so to speak, instead of individual blog posts, each with different comments. Any idea how I can fix that, please?

      Also, I no longer see the FB admin option, although I installed that piece of code: it was working on the test blog (amormaternal-new.blogspot.com) but then when I installed that template on the site itself (amormaternal.com), that option disappeared and I'm neither receiving notifications or able to moderate the comments on my site...

      Third and last problem (and sorry to bug you, and SO grateful for your help): now every time I post a link from that site on FB it takes the default thumbnail rather than the post image. I tried the FB debug tool with no luck.

      Any idea how I can fix these problems?

      Thanks again,

      Best regards,

      Louma

      Delete
    3. Hi again, Jenson!

      I kept trying and now the admin appears and there are no longer the same FB comments on every post. However, I'm not getting any notifications on FB when someone comments.

      What am I missing? Any ideas?

      Thanks again,

      Best,

      Louma

      Delete
    4. Hello,

      Regarding the first problem, I have just tested it on your website and it appears to be working correctly now. I assume you have fixed it, right?

      Regarding the second issue; I believe you have to make sure that you are using the correct website address for your blog so if you're using a different domain to the one you tested it on, then you need to make these changes in step 5. i.e. go to facebook app section and update the URL. Then go back to your new blog which sits on a different URL and change references to the old address with the new address.

      Regarding the last issue; I tried to post something from your blog on my facebook wall and it gave me the option to choose from 3 different thumbnails.

      I am not sure whether you have already solved these problems by the time I am writing this reply but if you're still having problems, let me know.

      Delete
    5. Regarding the notifications; there are two aspects to check for:

      1. Sometimes it just takes a long time before the notifications appear on facebook, particularly when you first setup the comments widget on a new webpage.

      2. Make sure the website domain name in your app setting's page on facebook is the same as the domain that you're hosting the comments on.

      Delete
    6. Hi again, Jenson,

      Thanks! Well, I've checked the app's settings and they're pointing to the same domain, I have no clue why I'm not getting notifications. With nearly a thousand posts, it's really not an option to go through my posts one by one checking the moderator tab :(

      Any other ideas?

      Thanks again,

      Best,

      Louma

      Delete
    7. I am not sure why this happens.

      I have one suggestion though:
      Instead of going through your posts one by one and checking the moderator tab. You can view all comments inside facebook so all comments from all different posts will be visible under one single moderator tab:

      https://developers.facebook.com/tools/comments?id=111111111111111

      Replace the ones with your facebook app id.

      I know this is not a real solution but it might make your work slightly easier.

      Delete
  5. I think it is much more fun to have Live discussion box instead or together with comments . People tend to chat more often than comment.
    May such free services are available one i use is http://confaber.com

    ReplyDelete
    Replies
    1. the problem is that people are not online at the same time particularly when you factor in different timezones

      Delete
  6. Hi Jenson--have been wanting to add this to my blog--got it installed but now there is coding showing across the very top of my blog -- please advise:))! http://dreamatolleperry.blogspot.com

    ReplyDelete
    Replies
    1. Hello, I think you have made a mistake when changing your template code. Please have a look at step 17 and how the final code in that step compares to yours.

      Delete
  7. I can see the comments but I cant see the actual post itself on facebook. Can you help with this?

    ReplyDelete
    Replies
    1. Visit this page on facebook and you should be able to see all the comments http://developers.facebook.com/tools/comments

      Delete
    2. This is not working for me.. any hel??

      Delete
  8. I can only see the comment box on facebook, not the actual comment itself. How can I see both the comment and the post at the same time on face book??

    ReplyDelete
    Replies
    1. The comment itself will not be published to your stream but if you visit the link below you can see all the comments for each of your blogs or applications http://developers.facebook.com/tools/comments

      Delete
  9. Hello. great post. I tried following every steps, but the FB comment box still not working. any help is much appreciated. thanks in advance.

    http://khairul-animecollections.blogspot.com

    ReplyDelete
    Replies
    1. I just check your blog and it seems to be working.

      Delete
  10. at the end blogger gives this error
    "Error parsing XML, line 3, column 7: Element type "html" must be followed by either attribute specifications, ">" or "/>""
    how to solve this?

    ReplyDelete
    Replies
    1. I think you might have miss-typed something from step 17. Please have another look to see if you have mistyped any quotes or greater than signs.

      Delete
    2. No. Nothing miss-typed. I have triple checked and just done so again meticulously. Sorry JT, you seem to be in error somewhere?

      Delete
  11. Hi Jt,
    I am always skeptical on using Facebook Comment Aps on any site, because the comments does not reside on the db of your site, but on FB servers.
    I am able to get one good FB Comment App (on Wordpress blogging platform) that injects the comments in you your site DB as well as on FB servers, though looks like duplicate contents, but its better I am able to transfer my comments in case I want to move ship, than not having something to show for it at the end of the day.

    Please is this achievable on Blogger Platform?

    I will be so glad to have such review.

    Thanks

    ReplyDelete
    Replies
    1. you're right. This is one of the problems with facebook comments. As far as I know facebook comments made using this approach can not be moved.

      Despite various problems with facebook comments, one of its big advantages is that when people leave a comment on your blog it will usually post a status update on their facebook account which could potentially give your blog more exposure. It's a compromise.

      I would not recommend moving from wordpress to blogger, because blogger has a lot of problems.

      Delete
  12. thanks for the post. made the integration easier than I expect.

    ReplyDelete
  13. Jenson, I can view the comments in the developer comment page, but it does not show where the comment was made. I am trying to figure out how to find the page for quite some time, but nothing I tried (including facebook activity plugin)worked.

    ReplyDelete
    Replies
    1. if you're logged into facebook when viewing the webpage then you should see a "Moderator View" tab that you can click on to see the comments.

      I am not sure whether the change in blogspot country has caused some of these problems. http://jensontaylor.blogspot.com/2012/03/blogger-changes-top-level-domain-names.html

      Delete
  14. please i can see people's comments right below my post on my blogger

    ReplyDelete
    Replies
    1. Is there a way to get the comment box right under the post and the comments under the box, so people don't have to scroll through all the comments to comment themselves?

      Also, mine doesn't seem to be working at all. I followed all your directions exactly, and the code saved fine.

      Lastly, once I get it working, will any instance of my blog post being shared on facebook send the comments to my blog? Or do I need to attach my blog to my facebook page for the comments from my page to show up?

      Delete
    2. No, unfortunately the user has to scroll all the way down.

      I'm not sure what caused the problem but have a look through these comments to check if anyone has similar problems and how they solved it.

      Once someone comments on your blog post using the facebook comment widget then you will see a typical red notification on facebook. You will have the ability to delete comments or rank them higher etc as a moderator.

      If you share a link to your blog post on facebook and people leave comments below that link inside facebook then those comments will not appear on your blog.

      Delete
  15. hy JT. I follow you'r tutorial step-by-step and its dosen't work :(:( can u help me? (sorry for my english)

    ReplyDelete
    Replies
    1. what part failed to work? I need some more details in order to help you.

      Delete
    2. The Facebook comment box will not appear. I can send to you my template please? Can you help me?

      Delete
    3. The Facebook comment box will appear now, but i can't moderate comments :(

      Delete
    4. login to facebook first then refresh the page and it should be there.

      Delete
    5. I guess in the worst case scenario you will always be able to moderate the comments from facebook itself.

      Delete
  16. it doesn't work on my blog, http://revo-reva.blogspot.com
    please help me.. -.-
    also, I found 4 code like this,
    --'

    ReplyDelete
    Replies
    1. If you're getting an error then you have probably mistyped something.

      Delete
    2. oh, I know. The symbol " (from step 16), automatically become & quot ; (without space) when I click save. So, what must I do?
      *sorry if me english isn't good -.-

      Delete
    3. this is really weird because it shouldn't change when you click save. I have no idea what is causing this.

      Delete
  17. Thanks Jenson. I tried but i get this error message:(

    We're sorry, but we were unable to complete your request.

    When reporting this error to Blogger Support or on the Blogger Help Group, please:

    Describe what you were doing when you got this error.
    Provide the following error code.

    bX-xkkhu2

    This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.

    ReplyDelete
    Replies
    1. This error message means there has been a problem with Blogger on its own regardless of your actions so I can not help with it.

      I would recommend to keep saving and checking your template when editing it instead of doing all the steps in a single go. That way it is easier to pinpoint the problem.

      Delete
  18. This is great - thank you. Problem is, there's a test post I made using a facebook page, which I then chose *not* to publish to facebook. It came up on the blog, but now I can't get rid of it as it doesn't show up in the moderation cue on the facebook app page :( Any ideas? http://coyopa.blogspot.com

    ReplyDelete
    Replies
    1. That's very strange but you should be able to get to the moderation page both on the blog itself as well as through facebook app section.
      All comments must show up on both places for moderation however there might a delay as to when they show up there so I would recommend that you check back in 24 hours.

      Delete
  19. i've followed your tutorial but where i can find the comment box? can't see it anywhere asianhorrormoviesdownload.blogspot.com

    ReplyDelete
    Replies
    1. I just had a look at your blog and it seems to be working fine.

      Delete
  20. Thanks for this great tutorial! I really appreciate it! Could you please help me out with a problem on our blog.. www.hansandnicole.blogspot.com I had added Facebook comments from another website tutorial. That had simple directions and it made the comments appear, however some people commented and I realized it is using the same comments below every post on our blog. I can't remember exactly where I got those directions, I thought it was working fine. Marie Mosley referred me here. I have done all your directions and added all your codes. I don't know how to get rid of the other codes though. I tried getting rid of some code but I got errors. Our blog is still showing the comments the same under every post. If you can help, I would really appreciate it! thanks!

    ReplyDelete
    Replies
    1. Basically the Facebook code in my example recognizes that each page is unique based on the web address however my assumption is that the code that you are using is made for one page only, so it can not distinguish between the web page that it sits on. Hence it shows the same comments on all pages.
      What you need to do is to go to the code section of your template and get rid of all the code from the previous solution. If it's not clear which code is from which solution then it's probably best to delete all references to facebook in your code and then once your blog is without any facebook comments, start implementing the above steps again.

      Delete
  21. Thanks for the reply. I've tried to delete what I find to be the old Facebook comments, but then the template won't save, says it's an error. Is there any way you could look at the blog and find what to take out?

    ReplyDelete
    Replies
    1. I could look at it but I would need access to your source code first.

      Delete
  22. Your tutorial worked wonderfully! However, I am not receiving notifications of my posts on facebook. Is there a setting I need to change?

    Also, can I activate the normal "blogger" comment box and have the facebook comment box at the same time?

    ReplyDelete
    Replies
    1. You should receive notifications on your facebook however it might not be instant.

      You can have both Blogger comments and facebook comments enabled at the same time.

      Delete
  23. Great tutorial, thanks. Worked perfectly but only shows in Firefox. I don't know what's wrong but the comment box does not show in my Google chrome... Help please.

    ReplyDelete
    Replies
    1. Maybe you have an addon/extension in Google Chrome that blocks adverts and perhaps incorrectly blocks the facebook comments along the way.

      Delete
  24. Works great but noticed that on main page with all my posts it does not show but when I click on an individual post it is there. I have had this issue with other apps so I do not think it is specific to this app, more like a general setting fgor blogger.

    ReplyDelete
    Replies
    1. This is the intended way for it to work. Basically each blog post has a unique web address(URL) this is what is used to distinguish between comment sections for each blog post.
      So if the comment section were to be on the homepage the comment section would not be able to distinguish which blog post the comments are related to because the web address(URL) would be the same for all blog posts.

      Delete
  25. thank you!! its an amazing tutorial! Bravo

    ReplyDelete
  26. I've got it going on ilrsmc.blogspot.com

    Two problems:

    1) The code is showing up IN the post, not under it.

    2) Disqus is popping up, for some reason, even though I've removed the Widget.

    ReplyDelete
    Replies
    1. I just tested the comment section on your blog and it seems to be working. Also, it's located at the bottom of your post. If you want to place the comment box somewhere else then you need to do so in step 14,15 where we place the comment box.

      Regarding Disqus, you need to go back in your source code and remove all the code that is associated with disqus.

      Delete
    2. Gotcha on the Disqus part. But how do I get it below the post (i.e., below the "Posted By" part?

      Delete
    3. This depends on the template that you are using. If you look at step 16 where we copied the code, however instead of copying it to that exact location you need to look through the code of your template to guess which part of the code refers to the "posted by author" section then paste the code after that. I don't know the exact location on your template but you can find it with try and error.

      Delete
  27. Hi, JT, I tried this also and it does work, but this new window for FB commenting overlays with the existing one on my blog ... any idea how to fix that?

    Thank you very much for this, you're awesome!

    Link to my blog:
    http://www.fotoblogatec.com/

    ReplyDelete
    Replies
    1. I believe this is due to your modified template. I would recommend to go to the source code of your template and add two "div" elements and set the style to "clear:both;". So one before and another one after the FB comment section.

      Delete
  28. Thanks for the reply, Jensen, but the fact is, this is nearly sci-fi for me; I feel like on top of the world already because I managed to implement this FB comments thing ...
    Is it possible to somehow contact you the way I could send you my HTML code so you could try to help me out with this ...?
    I'll understand if you won't be willing to go that route, but it doesn't hurt asking ;)

    ReplyDelete
    Replies
    1. lol at sci-fi.

      Send me your code for step 16.

      You can send it to me on facebook. http://www.facebook.com/jenson.taylor

      Delete
    2. Hi, Jenson; I cannot contact you via FB; the message service looks dissabled/not available?

      Delete
  29. Thanks for the great tutorial! Bravo! It works splendid on my website! Mightymums.net (Singapore)

    ReplyDelete
    Replies
    1. If works and for me but I had to make some little changes: public-holidays.blogspot.com

      Delete
  30. Hi JT,
    i've followed every step on the tutorial. Nothing gone wrong but i don't see it on my blog. What did i do wrong? Here's my blog : drumhood.blogspot.com

    ReplyDelete
    Replies
    1. I just tested it on your blog and it appears to be working perfectly.

      Delete
    2. Thanks a lot Jenson. It seems to be working fine now but what should i do in order to have the comments to be only displayed under a post instead of displaying that particular comment on every post in the "Home" section of my blog?

      Delete
    3. If that's the outcome then you have copied the code to the incorrect location. Please have another look at step 15 and 16.
      Because the comment box is intended to be unique on each blog post and should not appear on the home page at all

      Delete
  31. Hello,

    This is a fantastic tutorial and works perfectly well for me.

    Since I am hiding the google comments (Facebook is allowing for less spam and more accountability and honest discussion-- big plus for my site), there is no comments link or button on my main blogger page.

    Do you know of any link/anchor syntax in Blogger that I can use in posts that will get readers to the Facebook comments on the post they're reading, as comment sections are not shown on the main page?

    Thanks for all your help,
    Eric

    ReplyDelete
    Replies
    1. I agree that this is good for accountability and fighting spam.

      The reason you can not see comments on your home page is because each comment section refers to a unique web address(URL) however on your blog's home page the code is not able to distinguish between various posts. So if you're using this tutorial, you will not be able to see comments on your blog's homepage.

      Delete
  32. what a great job. working for me. thank you so much.

    ReplyDelete
  33. I have a FB page for my blog but it is not connected to my real name. Can I respond to comments using my FB page name and not my actual name or will the app only work if I am using FB as myself? (If what I am saying isn't clear, when I log into FB, I can be me, but everytime I write on my FB page, it shows the name I choose there. I have the option to "use FB as Scooping it Up." I just don't want to mix my worlds and I wondering if this is possible.

    ReplyDelete
    Replies
    1. Yes, you will be able to use your facebook page to post comments. You need to login to facebook then use the option "Use Facebook as: your_page".

      So afterward if you visit any blog or webpage which uses the facebook comment box you will be able to post comments as that page.

      Delete
    2. thank you so much, your time and effort in answering this questions is truly a gift. I appreciate it and can't wait to give this a try tonight. My template is OLD and very tweaked with years and years. The html is a hot mess, so I hope I can find the proper spaces I need to make this work.

      Delete
  34. THANK YOU!! Works perfectly, best explained blog tutorial ever. See here, shiny and new, I love that non-FB readers and still comment the traditional way, or using FB. Brilliant. http://scoopingitup.blogspot.com/2012/08/soft-and-hard.html

    ReplyDelete
  35. fantastic tutorial! thanks for taking the time to share it... it worked like a charm :-)

    ReplyDelete
  36. thanks for the tutorial, it update and works for me ^_^

    ReplyDelete
  37. awesome man. thank you verymuch

    ReplyDelete
  38. After following and triple checking the step 17, I still keep getting the message: Error parsing XML, line 3, column 52: Element type "html" must be followed by either attribute specifications, ">" or "/>".

    I think you may have missed something JT?

    ReplyDelete
    Replies
    1. this is impossible because so many people have got it to work including myself. If you have not missed the > sign then possible reasons could be:

      1. you have two single quotes following one-another which might look like a double quote

      2. a quote has not been closes either single or double.

      if you could copy the text from your blog to here then I would be able to have a look at it.

      Delete
  39. Thanks loads JT...... I followed your tutorial step by step and it worked like magic!

    ReplyDelete
  40. This comment has been removed by a blog administrator.

    ReplyDelete
  41. Thank you for the tutorial! I had problems though, until I searched and found that there is a space behind the <html xmlns:fb="https://www.facebook.com/2008/fbml" It wasn't clear in the screenshot, but it definitely added the comment box. Thanks so much for offering your knowledge!

    ReplyDelete
    Replies
    1. thanks for mentioning this. Hopefully others will find it useful.

      Delete
  42. HOW CAN CHANGE facebook comment LANGUAGE TO ARABIC?

    and

    how can keep blogger comments also like your blog ?

    ReplyDelete
    Replies
    1. Facebook comments' language depends on the user's language settings in facebook.

      on the last screen shot select "embed"

      Delete
  43. Thanks JT it worked perfectly!
    Actually I did it before but for some odd reason it stopped showing the facebook comments but i'm glad I found your post so I fixed it with no problem, only that I had to add after all that code, the plugin for the comments to show up, from the facebook developers & then it finally worked nicely :)

    ReplyDelete
  44. Excellent tutorial.
    I think you would save yourself a lot of work by saying that it only works when you go to the individual post and not the blog in general.
    :)
    Thanks again!

    ReplyDelete
  45. Hello Jenson
    Firstly thank you SO much for the simple tutorial, I am so bad at this kind of thing but I took it slowly through the steps and I think I've been successful - thanks for the confidence boost that I can do this!! Just one question, I have set it so that I moderate each comment via facebook, I know you mention there will be a delay when someone comments, I wondered how long this normally takes and where it will come up on facebook? Keen to not miss comments and make sure I approve them! Only way I can see them currently is by checking each post (although its only been 30 mins since I asked someone to comment to test it). If you can guide me on the normal delay time that would be amazing - thank you again! www.burgersandbruce.com

    ReplyDelete
  46. Hello Jenson,
    Firstly I want to say a big thank you for this simple tutorial, I was nervous I wouldnt be able to do it but your guide really helped and gave me a confidence boost with making changes to my blog! Just one quick question, I have set it up so that I can moderate comments. you mentioned that there will be delay between someone leaving a comment and me seeing on facebook - do you know how long this delay is? I asked someone to do a test comment but it hasn't come up yet - does it appear as a notification? i think it was about half an hour ago. Would really appreciate your help as I don't want comments to get lost and I can't approve them! Thank you again, www.burgersandbruce.com

    ReplyDelete
  47. Hello Jenson, sorry me again! I've set all my settings to have comments approved before being visible but for some reason it doesn't seem to be working, as there are already comments on my blog that I haven't received notifications for or approved! Also sometimes they seem to be visible, other times they aren't (even when I do it logged into facebook and when logged out!) Any idea why I am not able to moderated them when the correct box seems to be ticked in my Fbook settings? Many thanks again! www.burgersandbruce.com

    ReplyDelete
    Replies
    1. I have no idea how long the delay is but if you are in facebook a notification icon should appear.
      Also, regarding the moderating; you can moderate the comments from within facebook which is what I always do.

      Delete
  48. Hi Jenson, i used your instructions and the facebook comments work perfectly. I have a small problem though; after i made the changes, now in the main page of my blog, every post shows in full. I want them to show partially, so someone who wants to read one post in full will have click on it. Have i done something wrong in the code? Thank you in advance. My blog is caroulia.blogspot.gr

    ReplyDelete
    Replies
    1. On my blog all posts show up in full without clicking on them so I guess this setting depends on the template that you're using.
      There is some help on this issue on the Blogger help pages on http://support.google.com/blogger/bin/answer.py?hl=en&answer=42215

      Delete
  49. Thank you very much, i found exactly what I wanted!

    ReplyDelete
  50. wow awesome tutorial. It worked immediately. Thanks much!

    ReplyDelete
  51. Hi It works great, but it embedded it into my grey post footer. Is there a way to make it UNDER the footer? Thanks, Alicia

    ReplyDelete
    Replies
    1. well, it depends on your template and where you place the code within your template. So you need to do a variation on steps 15/16

      Delete
  52. Ok Thanks JT....Just saw your response...I'll try that....now I have a new problem....the APP is giving me an error message after working great for a week! EEk!! I really have no clue what to do. It says "Warning: 'URL HERE' is unreachable. With the page's URL listed...on every plugin. When you click it it goes to the App page on Facebook. Help?? Example: http://www.wwnrockport.com/2012/12/austin-street-general-store-retirement.html THANKS!!

    ReplyDelete
    Replies
    1. it seems to be working correctly when I try it. I think you can ignore that warning. I used to get it as well initially when I setup the comment box for my blog.

      Delete
  53. very helpful. thanks. i have recently started to write on blog and tinkeringwith it to explore the possibilities.

    this post does help me a lot.

    ReplyDelete
  54. Hello,

    I have been trying to put Facebook Comment box on my blog from the last two days. Tried 3 different methods… BUT, it doesn’t just show up!!! My template is a pinterest themed template (magazine template).. my blog’s link – http://www.healthnwellness365.blogspot.com

    So, I have 3

    Please help me out!! I want it badly and that too, ASAP..!!!

    ReplyDelete
    Replies
    1. you have to provide me with more details so that i can figure out what has gone wrong. Did you manage to follow and complete all the outlined steps?

      Delete
  55. i did it for my old template and it worked, but now i changed to the simple blogger template (used same app id as before) and it's not showing up;
    i've found 3 instances of and i tried putting the code after each one but nothing worked!
    any help ?!

    ReplyDelete
    Replies
    1. can you please give me the link to your blog?

      Delete
  56. ah i forgot to mention my blog: 'androidyard.blogspot.com' please take a look and see if i've done sth wrong?!

    ReplyDelete
    Replies
    1. it seems to be working correctly when I try it. I guess you have solved the problem

      Delete
  57. hey there, never mind my previous comments! it's working fine now, the delay came from facebook :-)
    thanks

    ReplyDelete
  58. How about adding facebook comment just like this http://tab5atmama.d1g.com/gallery/show/4928425
    from rigth to left.
    any idea?

    ReplyDelete
    Replies
    1. My assumption is that the same thing would work for arabic as well. You probably only need to change language settings and text direction. However I must admit that I haven't tried it yet.

      Delete
  59. thanks, you're life saver...

    ReplyDelete
  60. hey, i tried to do this on my dynamic views in blogger...doesnt seem to work. please help.

    ReplyDelete
    Replies
    1. I don't think this approach works with dynamic views, however all you need to do differently is the position the code from step 16 differently.

      Delete
  61. i tried but comment box cant find.....
    plese help me my blog site
    hiractg.blogspot.com

    ReplyDelete
  62. It came out nicely! :) Thanks so much!
    http://bungirlsearchforbeauty.blogspot.com/2013/01/beauty-tips-face-massage.html

    ReplyDelete
  63. Nice tutorial, i followed your step, but comment box dont show, please help me.. my blog site :
    http://kompilasi-tulisan.blogspot.com/

    ReplyDelete
  64. Never mind, it must be delay from facebook, thanks anyway..

    ReplyDelete
  65. Question...I added this and it worked nicely on the site. However, it does not show up when I look at the blog in a mobile view. Is there a way to make it show up in the mobile version?

    ReplyDelete
    Replies
    1. Well, blogger uses a different template for when it is accessed via mobile devices hence the facebook comments won't show up. I predict that if you follow the same approach for you blogger's mobile template then it should show up there as well.

      Delete
  66. Hi Jenson, Thanks for the great tips

    If you don't mind I translated it in Indonesian for my blog, along with the credit and link to this post
    Will be published for friday (15'th march) on www.foodgrapher.com

    Link : http://www.foodgrapher.com/2013/03/cara-tampilkan-facebook-comment-di.html

    Thanks

    ReplyDelete
  67. It seems as if the facebook platform has change or I am doing something wrong because I went to the link & cannot find the 'create new app' button anywhere. I have tried to navigate the facebook site to find it, but I just feel lost. I'd love to add this app, but don't know where to start. Any help would be so greatly appreciated. Thanks!

    ReplyDelete
    Replies
    1. that's very strange. I just checked the link again and the "create new app" button still exists towards the top right hand side of the page.
      I would recommend to add your phone number to facebook just in case FB is using as a security measure before it allows you to create a new app.
      My other suspicion is that you might have an addon or ad blocking program that is removing this button from your view.

      Delete
  68. I have completed all the steps but not able to see comment box.. please help.. my url is www.didyouknowearth.com
    domain is attached with blogger

    ReplyDelete
    Replies
    1. seems to be working for me. The comment box does not show on the home page but on individual posts!

      Delete
  69. lumayan mantap nich artikel satu gua suka banget

    ReplyDelete
  70. really good information about this content, I am really appreciated at this articles.

    ReplyDelete
  71. Can't locate neither step 15a nor 15b. Help.

    ReplyDelete
    Replies
    1. that's fine. 15a and 15b are alternative steps for those who couldn't perform step 15. So as it says in the guide before step 15a "If you were able to find the tag that you searched for jump to step 16."

      Delete
  72. 15 failed that's where I tried 15a and 15b. But all failed. Can you check yourself?

    ReplyDelete
    Replies
    1. Well, I can't check unless, you make me an administrator for your blog.

      Delete
  73. Hello ! Looks amazing but I'm stuck at

    14. Tick the "Expand Widget Templates" checkbox as shown below:

    I ain't got this box appearing !!
    ???

    ReplyDelete
    Replies
    1. this step is no longer relevant since the recent changes blogger has made to their interface.

      Delete
    2. I have written a small update above step 14 to point out the recent changes. Thanks for letting me know.

      Delete
  74. the EXPAND WIDGET thing is disabled since april 11th as it seems
    http://blogging.nitecruzr.net/2013/04/the-option-to-expand-widget-templates.html

    ReplyDelete
  75. Hi there, I think I could make it work but here's my question/issue (because of course I got one !)
    When i look to a post on a dedicated page like here
    http://www.wastemen.net/2012/11/jose-wastemen-video-clip-one-more-time.html
    that's fine I can see the comments that have been posted
    BUT if I look through the archives I don't see the comments, like in here (for the same post)
    http://www.wastemen.net/2012_11_01_archive.html
    or here (at the bottome of the page)
    http://www.wastemen.net/search?updated-max=2013-02-18T03:01:00-08:00&max-results=5
    IS that "normal" or is there a way to have the comments visible, regardelss of the actual seen page/url ???

    ReplyDelete
    Replies
    1. The comments are uniquely identified based on the URL. I haven't found a practical solution for this problem yet. It was a long time ago when I wrote this tutorial, I need to check the Facebook API to see if the URL can be replaced by an in-page attribute to avoid this situation. If I get the chance to look into it I will post it on this blog.

      Delete
  76. Thank you! It was very helpful!

    ReplyDelete
  77. Thx so much for this tutorial! Just what I was looking for!

    ReplyDelete
  78. Hey JT..

    Your post seems more clear cut to the other tutorials floating about. Now ive managed to install the comment post successfully, I THINK. But im also not getting any notifications. Is there any chance you could check my site and see where ive gone wrong @ http://moviekangz.blogspot.com ??

    Ive been at this for days and im baffled..now im not sure if im supposed to be using my own domain name www.moviekangz.com or just the blogspot url.

    Also. I used to use disqus for commenting which ive removed to install this facebook one. And as disqus was installed as a widget i was able to add a small code of mobile=yes which enabled the commment box to show to everyone viewing blog from there mobile device.. how can i get this facebook box to show on mobile devices???

    Your help is much appreciated. And thanks in advance..

    ReplyDelete
    Replies
    1. Regarding notifications; they are usually not instantaneous but will appear after a while. Facebook behaviour regarding the notifications don't seem to be 100% correct, i.e. some comments are missed. But fear not, you can view the moderator page to see all your comments in one place on:
      http://developers.facebook.com/tools/comments

      Regarding the use of own domain or blogspot subdomain; it shouldn't make a difference. But I would recommend using the same one that you used when setting up your facebook comment application.

      Regarding mobile devices; Blogger has two different templates for mobile devices and desktop devices. So in order for the facebook comments to be available to your visitors from mobile devices you need to go your Blogger's mobile template and add the facebook comment code in the appropriate places. The procedure is the same but where you insert the code is slightly different.

      Delete
  79. Hi Jenson; I've created the app (whoever knew I could be a Facebook Developer...hmm) and followed your steps, but when I reach Step 15 I have to stop because I cannot find any of the three tags you suggested, even after expanding every single arrow within the HTML text. I'm scared to save anything now because I have no experience with this and don't want to save the wrong thing. Any suggestions?

    ReplyDelete
  80. I found the code! It wouldn't find it with Ctrl-F, which is weird...but I searched the whole text and found it. Now have followed your instructions to the letter and saved it...I am terrified to see if it's working or now...

    IT WORKED! Thank you!

    http://goodbyedating.blogspot.ca/

    ReplyDelete
    Replies
    1. ok, looks like I am too late to reply, but glad it worked for you. Based on the template each blogger uses the code to find can be slightly different which I guess is the reason you couldn't find it.

      Delete
  81. Fine working in this site: http://miscrits-news.blogspot.com/
    Thanks a lot....

    ReplyDelete
  82. Hi there.

    I followed all the steps and runs great, i appreciate it.

    Well, i have a question that might be a little crazy or stupid. I want to let visitors to create mini posts after they logged in on their facebook account on my blogger´s blog.

    Any hint or tip how to do something like that??

    ReplyDelete
    Replies
    1. what exactly do you mean by "mini-post"?

      I guess a facebook comment could be considered a mini post.

      Alternatively, Blogger allows you to let other people create posts on your blog without having full access to everything. Maybe this would address your need?

      Delete
    2. Hi JT.

      As i said before, it sounds crazy my idea. But the blog will be "open" for everyones posts on it. Not from invitation or email (blogger´s choices).

      People will be free to post small posts like quotes. Im thinking creating a form that visitors type it there and then "publish it".

      Delete
  83. Hello and thank you for this tutorial! =)

    I dont receive any notification/alert when somebody posts a comment =/
    what can I do?

    thank you!

    ReplyDelete
    Replies
    1. Sometimes it takes some time before you receive notifications. You can always go directly to facebook and check for all the comments there on http://developers.facebook.com/tools/comments

      Delete
    2. thank you! that link will help me a lot!
      i noticed that i had a comment from may 7, and only now i know that it's there. I was not notified about any comment. Is it normal, almost a month? =/

      anyway i will check that link! thanks again! =)

      Delete
    3. Yes, it appears that facebook has stopped giving notifications for the comments. I checked my one and I am having the same problem.
      I guess the burden is now on us to check regularly for new comments.

      Delete
  84. It worked for me! thanks a lot :)

    ReplyDelete
  85. its work great, many thanks :)

    ReplyDelete


  86. I guess someone forgot to mention to you that the whole 'ban this' thing stopped being funny months ago. Now it's just a sign you can't think up anything intelligent to add to the conversation.

    ReplyDelete
  87. very nice and easy. thank you dear..!

    ReplyDelete
  88. Hey its not working.
    I just started blogging.
    i followed the steps.
    I think there is an update came on July 2013 something like that.
    please help me.
    my blog is techieclicks.blogspot.in

    ReplyDelete
    Replies
    1. you're using the new templates which is not something I have looked into yet. Basically you need to figure out where to place the same code into your template.

      Delete
  89. When I hide bloggers box, facebook box disappears too. Any help?

    ReplyDelete
    Replies
    1. you have placed the facebook code in the incorrect section, you need to move the facebook code from step 15 outside of the section that belongs to the blogger comments

      Delete
  90. I have done that you are describe here..but this is not working my blog.. would you like to check out my blog and make me know the mistake of that.
    blog url : http://technicalbix.blogspot.in/

    ReplyDelete