June 7, 2011

Widgets

Add Facebook Comments Box To Blogger Blogs - New!



UPDATES: 

1. If you wish to completely hide the blogger comments form then read Replace Blogger comments form With Facebook

2. Show both Facebook and Blogger Comments inside Tabs! 

facebook-comments-boxIn 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from Allblogtools this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the Facebook comments box in parallel to your old Blogger Comment form so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.


Live Demo

This is how the Facebook Comments box looks like,
LIGHT SCHEME
facebook-commentS-box LIGHT
DARK SCHEME
Facebook-comments-dark-scheme

Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,

1- Get a Facebook Application ID

  1. Go To Facebook Developers Page
  2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
site-url
     3.   Hit "create app" button and proceed
     4.   After submitting the security check code you will see this page,
app-id
       5.   Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
image
      6.  One the new window that appears click the Edit Settings link ,
edit-settings
        7.  Then go to Website option and write your Site Domain as blogspot
website
       8.  Save Changes and jump to the next step of this tutorial

2- Adding the Facebook comments Box to Blogger

Now its time to do embed the comments box in your blog templates. So follow these easy steps,
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'
  5.  Next search for 
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>


  • Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.
    6.    Next search for  </head> and just above it paste the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='MY Blogger Tricks' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/mybloggertricks' property='fb:admins'/>
<meta content='article' property='og:type'/>


Make these changes:
  • Replace MY Blogger Tricks with your blog title/Name.
  • Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
logo
  • Replace YOUR_APP_ID  with the your Facebook Application ID that you saved in notepad
  • Replace http://www.facebook.com/mybloggertricks with your Facebook user profile link
    7.    Now Search for this,
<b:includable id='comment-form' var='post'>
    8.    Just after it paste the code given below,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px

      9. Save your template and Bingo you are Done! See your blogs to find a beautiful comment box waiting to be touched. =)

Respect Copyright

This plugin contains credits to allblogtools and MBT blog for the efforts put by us in facilitating blogger users with this great commenting plugin. We therefore request you to please do not remove the footer credits. The credits are attached to the plugin in a design style that it perfectly blends the colour themes of Facebook Comments Box. We only need this favour in return.

Need More Fun?

If you want to further play with codes and wish to give a Facebook style (i.e font colours, background colors, background image) to your old blogger comments form then read the post below,

Troubleshooting

If you faced any problem then kindly do not hesitate to let me know. It would be a pleasure to be at your service. I will write more tutorials on this topic this week so that you may get all the latest updates. I hope this plugin proves useful to most of you and it may bless your blogs with even more organic traffic. Peace! :>


If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

581 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I have just followed these steps but facebook comments are not visiable on my blog? can u helpme?

    ReplyDelete
  2. Mohammad Thank you SO Much. It worked wonders. Was looking for this since ages. loved it.

    ReplyDelete
  3. @hasni

    All the steps are working just fine on any blogger hosted blog. Looks like you forgot to add the code in step#6 ? Please check whether you had added correct App ID or not.

    @Jo Paul
    I am glad it worked for you buddy. Congratx :)

    ReplyDelete
  4. One of the most amazing posts you have ever written! FANTABULOUS!
    amna m.kh

    ReplyDelete
  5. for non develop, FB comments can not use ID APP it's work!
    Facebook Comments
    hihihihi :D

    ReplyDelete
  6. I have just followed these steps but facebook comments are not visiable on my blog?

    ReplyDelete
  7. @Amna

    Thanks pal. That meant a lot. :>

    @Mobile themes

    My pleasure. :>

    @beben
    I never get you. :p

    @Anony
    Could you kindly share your blog url?

    ReplyDelete
  8. Hi Mohammad,

    It seems like after I copy and paste the code in step 6 I'm getting this error message. Any idea as to why?
    "Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "content"


    Thanks

    ReplyDelete
  9. @G

    Nevermind, I got the error message figured out.
    But like the above users the comment box is not visible after I save it.
    I have followed as your tutorial shows.

    Thanks

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

    ReplyDelete
  11. @G

    Kindly use the updated code in step#8 and let me know if it works now.

    @Ziad
    That is a Facebook security check for your accounts safety. It has to do nothing with the plugin above brother. You may kindly submit your mobile number and Facebook will send you an activation code to further secure your account. This is done with every Facebook account. Just fill this formality and then try the tutorial above.

    ReplyDelete
  12. i tried this steps and i got stuck in step number 6th as i could not find that HTML tag in ma template hence i could not add dis app in ma blog :( what shall i do ? admin plz suggest me..

    ReplyDelete
  13. @skynet-taniya

    All template have that tag whether new or old. Nevermind instead of </head> you search for this ]]></b:skin> and paste the code just below ]]></b:skin>
    Hope this helps. :>

    ReplyDelete
  14. The code below does not exist in my blog code. Any tips on how I can install this? I am fed up with intensedebate. It's very buggy.

    *b:includable id='comment-form' var='post'* (not in my blog code)

    Also, I cannot put "blogspot.com" as my domain because I use a custom domain. Any tips would be most helpful!

    ReplyDelete
  15. @Dr. Heckle

    did you check the "Expand Widget Templates" Box at the top of your blogger editor? If you did and still could not find the code then find data:post.body instead and just below it paste the Facebook code we shared above.

    It doesn't matter even if you use .co.cc as the URL will be automatically redirected. Please let me know if this help was enough. :>

    ReplyDelete
  16. Hello, Mohammad. Thanks for the tutorial. It fits to my template. But I have a problem, may I ask for help?

    I've followed all the steps. But it can't save the code because this:

    "XML error message: Element type "meta" must be followed by either attribute specifications, ">" or "/>"."

    But really, I'm sure that I've closed the meta code with > and />, still the problem's not solved. Is there anything I should know? Do I make mistake?

    Thanks before :D

    ReplyDelete
  17. @VanMonky

    If you are talking about step#6 then the best way to troubleshoot is to re-add the code. Delete the previous one and add each line one by one to see which line is causing the error. Let me know if this helps.
    You are always welcomed here brother :>

    @hezri
    Anytime pal. :>

    ReplyDelete
  18. PLease Guide me ive checked all steps again

    ReplyDelete
  19. Oh God, it was my mistake, sorry. I put the apostrophe in the title. But well, it can save the codes now. But, why the fb comments don't show up?

    ReplyDelete
  20. No errors showing at all. Don't know where's the problem. After <html i have pasted your code but it automatically shifts 3 lines below when i save is that a prob?

    ReplyDelete
  21. Hey mohammed i like your work very much and no offenses at all but just now i added this feature in just two steps. I am not an expert but accidently i got it.

    ReplyDelete
  22. @Vanmonkey @harsh
    Congrats for adding it successfully however it was sad to see credits removed.

    ReplyDelete
  23. @Mohammad Mustafa Ahmedzai
    Dear Mustafa i hv followed ur tutorial. All is well but only one problem. i.e, after i added facebook comment box, both facebook comment box and blogger default comment box are show. how can i rem0ve blogger default comment boX.
    Kindly check my site & plz reply ASAP

    http://ebooks2000.blogspot.com/

    http://ebooks2000.blogspot.com/2011/06/acca-kaplan-key-examinable-areas-p1-p7.html

    Thanks

    ReplyDelete
  24. No, my bad. I was going to edit it cause the credit bar is too far from the comment box. But I messed things up and ended up getting errors. So I decided to remove it, and going to put it back. And I was like WTH when the <b:includeable code has gone. Sorry for making you disappointed.

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

    ReplyDelete
  26. Hi man, it doesnt work at my blog. Tried 4 times, when i click preview the comment box doesn't appear. Any other ideas?

    ReplyDelete
  27. @Adrian
    I think ur comments are hide.
    GO To Settings->Comments: 1st option select SHOW.

    ReplyDelete
  28. I'm using Disqus which I hate but if I change to this will I lose all my current comments?

    Also, I really would like where people can use their name and url?

    ReplyDelete
  29. @Debby and Kirby the Dorkie
    yep bro all comments will delete:-(

    if u want back your comments then again install DISQUS widget.

    ReplyDelete
  30. @upa_kid

    This is because we made the tutorial in this way. If you want to hide the blogger comment form then you will have to make these changes,

    1- Remove the code you added in step#8 and paste it just below data:post.body
    2- Save your template and then go to Blogger > Settings > comments
    3- Choose the option to hide your comments
    4- Thats it! View your blog to see just one comment box i.e. FB
    PS: Thanks for helping others buddy. :>

    @Vanmonky
    We respect that friend. Kindly re add the code carefully. You wont get errors and we hope you will respect our efforts. :>

    @Adrian
    Don't see the preview, just save your template after following all steps. Have you embedded your comment form below posts? If not then go to Blogger > Settings > Comments and choose the option that says "embed comments below posts"

    @Debby
    Are Disqus comments stored in blogger? If you remove disqus, do comments still appear in your blogger comment form? If yes then your comments will not be deleted.They will appear on blogger form
    Name and URL option is not possible because you log in using one of the platforms I mentioned above. This is done to avoid spam or unknown comments.

    ReplyDelete
  31. I don't know why but i always ret this message < Message d'erreur XML : Attribute "xmlns:fb" was already specified for element "html" >

    ReplyDelete
  32. @DJ

    I guess you already added that code after <html and you are adding the same code again. Since that code is already added so You just leave that part and continue to next.

    ReplyDelete
  33. hey you ,

    how we can used fb comment counter in blogspot ??

    what code in blogspot to replace "http://www.facebook.com/plugins/comments.php?href=example.com&permalink=1" "


    TQ and advance

    ReplyDelete
  34. @ymn

    Brother I guess yes we can, let me read it and see if I could embed it in blogger. Thanks for the great idea!

    ReplyDelete
  35. Hello,

    What if i need to keep facebook comment and blogger's default comment boxes. As such you have mentioned in one your comments (i guess) that if facebook comment block is deleted, we may loose all our comments. I do not want to loose my valuable comments and at the same time i need to get traffic from facebook too! Help me Mohammad. Thanks

    ReplyDelete
  36. @hetal
    This is what I recommend to use both the forms and the tutorial above will let you keep both the forms as you can see in the demo. to keep both forms just follow what the tutorial says.

    ReplyDelete
  37. You have a nice design and layout of this blogs.

    ReplyDelete
  38. Brother tu post es futurista ... xD ahy dice que fue agregado el 06/07/2011 ahahahaha

    ReplyDelete
  39. my facebook comment on blog not function anymore. help me asap

    ReplyDelete
  40. http://mygoblog01.blogspot.com/

    ReplyDelete
  41. @Gobloz

    Did you add the codes in step#5 and Step#6? Was it working properly before? This might have happened if you recently edited your template and deleted some part of the codes. Go through the tutorial again and see if all codes are on there right places.

    ReplyDelete
  42. @Mohammad Mustafa Ahmedzai

    Salam , still not work . . (@ @)

    -Mohd Rusydi from Malaysia-

    ReplyDelete
  43. guys ...i have installed the fb comment box on my bloggers...and it works grt.. the only problem i have is that whenever the comments get more then 9 , the extran comments (ie after the 9th ) get removed and only 9 are accessible ( note they cant even be accessed in any way ) unless i login back into my fb account (by which i have the appid) then i can see all the comments ....plzzz help so all comments are accessible to everyone ...and me without loggin in also .....thnx :) :)

    ReplyDelete
  44. @Gobloz

    Unless you explain something how would we know brother where are you actually facing problem. the plugin works just perfect everywhere as you can see from the comments.

    @ňũbĦā√ ŤŸäğł

    Buddy do this

    1) At the top right corner of your Facebook comments box you will see the Settings link , click it

    2) Then you will find this option:

    Comments Composer:

    3)There will be two options:

    . Always show
    .Collapse when there are more than 5 comments.


    4) Choose the first option and save.

    To make the comments public or visible to all choose the first option for: Moderation mode


    Now you will see all your comments visible.

    ReplyDelete
  45. @Mohammad Mustafa Ahmedzai thnx bro .... but i already had done those settings , sum how its still not workin .... can u suggest if der are sum changes to be done in d html coding of d fb comment box....
    my blog is " www.vellapen.blogspot.com
    have a look if u wish ...it only shows 9 comments for some unknown reasons....

    ReplyDelete
  46. Mohammad, i am getting this error on facebook development page: https://developers.facebook.com/setup/?error=empty not sure what it is:( kindly help...

    ReplyDelete
  47. I tried creating comment box on my other blog, error did not occur but while entering domain name as blogspot, it shows:

    Validation failed.

    Site Domain: blogspot is not a valid domain.

    ReplyDelete
  48. thnx bro .... i figured it out ..... der was prob wid sum specific comments ... now after i hav ha sum more new comments ....all of dem are visible ....

    btw can you sugget sum ways of customizing fb pages ( i have a page to promote my blog ).....

    ReplyDelete
  49. Yes I've added this and working properly...Thanks... I've just started blogging and I had visited enough website for blogger help but nowhere I found best post suitable according to my expectations... but here it was like a fun game so easily demonstrated that I'm watching you face to face..

    ReplyDelete
  50. @Hetal Patil
    Extremely sorry buddy for the late reply.

    Give your site domain as blogspot.com not just blogspot.
    Let me know

    ReplyDelete
  51. @ňũbĦā√ ŤŸäğł

    My pleasure brother. Glad you did it and if you needed any further help just feel free to post your question. :>

    ReplyDelete
  52. I am excited to try this, but I am really stuck on one part, the part where I add my image logo link, I have no idea how to even get that and my template wont save, I keep getting errors, I think it is becuase I have left out a logo?

    ReplyDelete
  53. I left out the image, but it keeps telling me that meta has to end in a /> and it is! and the other error i get is this
    The template is invalid. Please make sure it is well-formed and complies to the Blogger Template Language Specifications.

    ReplyDelete
  54. Thank you so much for sharing this! It was very easy to follow (even when I forget to do a step!)

    Thanks again! xxx

    ReplyDelete
  55. i am using the old layout template in blogspot so i dont have the expand widgets option. do you have this same trick for old layout users? i cant upgrade to the new blogger template because i love my customized layout this way. i got it from blogskins.com and customized it. the only problem is, all skins there dont show the comment form. do you have an html code for this please? i wanted for people to comment on my posts :) thank you very much! :)

    ReplyDelete
  56. Anybody notice that the dark scheme font has become black thus making it unreadable?? Looks like this just occurred today or yesterday?

    ReplyDelete
  57. @Melody
    A logo image is optional however make sure you are copying codes from the above tutorial and not adding any extra code. The best help I can give is that if you continued getting errors then repeat the tutorial carefully step by step with a fresh Facebook ID.

    @Lisa
    My pleasure pal. Feels great that you get it installed.

    @ozzy
    Oh sure you can add it to old templates also instead of search for the code mentioned in step#7 search for this,
    <div id="comments">

    and paste the FB code given in the tutorial just above this code.

    It will work like a charm.

    @bullbuckers
    The message text is still white however they have changed the colour of time/date and Like link.

    ReplyDelete
  58. Bro, Please Help Me.. Its not working as you have said on my blog page>> http://kiitsc.blogspot.com/2011/06/kiit-student-center-first-blog-post.html

    Please tell me how to solve this. I desperately wanna use this App.

    ReplyDelete
  59. I can't find the code in step 7, can somebody please help me? Also, I've tried to make sure I did exactly what I was supposed to but it's giving me this error.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "id" must end with the ';' delimiter.

    Error 500

    ReplyDelete
  60. I tried searching for this too: < div id="comments" >

    Thank you so much ! :]] and this one as well data:post.body

    ReplyDelete
  61. Does this show up on individual blog posts?

    ReplyDelete
  62. @Akshay

    I guess you figured it out and it felt bad that you removed the credits..

    @Stephanie

    Did you check the Expand Widgets template box at the top right corner of the editor?

    @Danielle
    Yes pal under all your blogger posts.

    ReplyDelete
  63. Yes, I did expand widgets temple, it says 0 of 0

    ReplyDelete
  64. its not working on ma blog frnd....
    i got fb comments but i want the option of comment using yahoo, microdoft n odr services and blogger also on d same form...plz help me...
    http://meandmysansar.blogspot.com/

    ReplyDelete
  65. Can you plz tell me how to remove someone' comment from it.

    there is no option to do it , just a option to hide the comment.

    ReplyDelete
  66. Thanks for the post I liked it

    moneymakingtips.tk

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

    ReplyDelete
  68. @Stephanie
    All blogger templates have those codes in them else the blog structure wont work. I guess you are using a classic template but then you said you could not even find div id='comments' . Could you kindly share the blog url where you want to add this plugin?

    @M.S Alam

    Did you really tried it brother? You will have to first remove the plugin already on your blog because it is an older version. To have that multi platform commenting option you need to install the current one as shared above.


    @Poras
    Simply hover your mouse cursor on the comment and you will see a small cross appearing at the top left corner of the comment. Click the cross to delete the comment. Make sure you are logged into Facebook for doing this.


    @nohoho

    I am writing a post on it and will update you within an hour

    ReplyDelete
  69. UPDATE:

    To emable Commentb using option kindlyt read this post: Enable Other Login Providers

    ReplyDelete
  70. @Mohammad Mustafa Ahmedzai

    When i hover mouse on someone else comments , there is no cross button on them.

    when i hover mouse on my own comment then only i see cross button.

    can u plz tell if other's comment can be removed.

    ReplyDelete
  71. No I just tried finding that again :[[ It says 0 of 0 I don't know why, I expanded the widget template. I have another comment box already but I wanted the fb one, could that be the reason ?

    http://www.welivewelaughwelove.com/

    ReplyDelete
  72. @Poras
    Please make sure you are logged into facebook when you do that. It is working fine every where buddy. Check the settings tab again.


    @aries

    Congrats. :>

    @stephanie
    You are using the templates by josh peterson. The post is based on his template so you must find the codes and if you are not able to then may be those Disqus comments could be one possible reason. The best question that I can ask is:
    Why do you use Disqus anymore now when it has no traffic value and rather slows down your blog?

    ReplyDelete
  73. I'm not too sure, I'm kind of new to blogging and I don't know which one I should be using lol. I didn't know a blog template had anything to do with traffic,but I'd like to increase traffic so what would be one you would suggest for me? that's similar to the layout of the one i'm using now? Thanks so much for helping me

    ReplyDelete
  74. hey brother thank you for the post. it worked well with my blog. but the comments section of blogger is still on. i went to settings and did "hide" from comeents settings section, but when i do that it hides my facebook comments also.please find me a way???

    ReplyDelete
  75. i can use this tutorial so helpfull

    http://kerja-online-info.co.cc/

    Thanks

    MULLIADI

    ReplyDelete
  76. thanks for a great hacks dude..
    really nice n simple tutorial..
    asaalamualaikum

    ReplyDelete
  77. @Stephanie

    For traffic you must add the Facebook Plugin. Even big technology blogs like techCrunch.com uses that.

    For a good template you can try one of these:
    http://www.mybloggertricks.com/2008/10/magazine-style-blogger-templates-free.html

    @author
    For hiding blogger comments simply read this post:

    Hide Blogger Comments and show Facebook

    ReplyDelete
  78. Thank you so much for this tutorial, one question I have is how do I change the font color of the comment so they can show up my blog is http://unboundedbywordsphotography.blogspot.com/2011/06/holly.html

    ReplyDelete
  79. boss, before this, when i post to facebook, post title 1st before blog title.. now its change when i add this facebook comment box.. can u tell me? u can check at my blog.. try to post 1 post to face book n see the blog title come out 1st before post title.. plz help me.. http://hazissac.blogspot.com/

    ReplyDelete
  80. I think google plus will take the lead because acordin to this site clavier , 7 million american desactivated their fb account I wonder how will they response to that :) .
    P.S the original clavier article is in arabic for a tranlated copy use google translate plz

    ReplyDelete
  81. Imaginative design, integrated marketing, and information flows will help you target niche client groups.
    blackberry apps for business
    ipad application development

    ReplyDelete
  82. After following Part 1 in step 2 (adding the xmlns... to the html and leaving a space), I keep getting the following message:

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "html" must be followed by either attribute specifications, > or />." (with quotation marks around the attributes)

    Help
    Beyond.the.spectrum@gmail.com

    ReplyDelete
  83. @Unbounded

    You may better use the dark scheme version. We can only change the color scheme but not of individual elements like fonts.

    In step#8 replace light with dark

    Thanks for your kind comment. :>

    @Haz Isaac
    This plugin is independant of how your titles appear in Facebook Status updates. For managing your titles position on search engines and FAcebook to some extent kindly read this post:
    http://unboundedbywordsphotography.blogspot.com/2011/06/holly.html

    @Beyond

    Please make a backup of your template. Clear edits and retry again by adding the same code just after <html like this:

    <html xmlns:fb='http://www.facebook.com/2008/fbml'

    Hit save and it must give no errors this time.

    ReplyDelete
  84. @Mohammad Mustafa Ahmedzai what link post u give me? about photography?

    ReplyDelete
  85. Hey, I would like to know if there was any way to get an alert when someone commented on my blog.

    ReplyDelete
  86. @Mohammad Mustafa Ahmedzai

    Brilliant tutorial. It all works and looks great.

    http://cobartist.blogspot.com/

    Couple of thing I would like fixed:

    1. I initially used the 'light' theme but could not see my black text over my grey background on blog. I assumed the light theme would put a white background behind the comment area. So for a quick fix I changed it to the dark theme.

    2. I would like my facebook comments box to appear on my home/main page of my blog (not just the post pages). How do I do this?

    3. Finally, Is there a way to have the 'add the comment' box below the comments rather above them?

    Thanks :)

    ReplyDelete
  87. @COB artist Artwork by Conor O'Brien ©

    EDIT: I figured out number two (2.) myself. I still need a fix for 1 and 3.

    Thanks

    ReplyDelete
  88. Hi, the comment box works fine, bro. But I want to take that link coming just below it saying Bloggarized by ... I know it is your ad, but it's ruining my blog's look.
    No offence but can you tell me how can I take that off?

    ReplyDelete
  89. @Isaac

    Sorry I meant this link
    http://www.mybloggertricks.com/2011/03/make-homepage-title-appear-after-post.html

    @vinesh
    Yes there is one possibility but I could not succeed applying it to blogger. Its comment subscribe option

    @COB

    1- Since your template is black so therefore only the dark theme will auto adjust the colors. Light scheme can not be customized thats where Facebook sucks.

    2- Thats how the facebook comments plugins is programmed. Unfortunately we can not change it.

    Both your questions were not coming under any edit options. I wish I could help. :>

    @Mezz
    Dear thats what we want as a favour. Those credits must remain intact. Though I can help you to change its font colors and size. Do this in step#8:
    To change the background color of that credit section edit this: background-color:#3B5998;
    To change the font colors change this: color:#fff;

    ReplyDelete
  90. @Mohammad Mustafa Ahmedzai

    Hi,

    I had everything working perfectly, and today I just noticed that the whole thing is gone.

    I went back to the edit HTML and all the codes in the tutorial are there, and in the right places, but when I save the template. The facebook comment form does not come back. The space where it was is gone.

    Help?!

    ReplyDelete
  91. Your tutorial works great on my blog, thanks anyway.

    But then, my fb comment box appears just below my post. I wish i could get in above my default blog comment, or at least out from by post body area.

    Thank you in advance.

    http://bintunmajid.blogspot.com

    ReplyDelete
  92. hi mohammad. thankz for the information. the fb comment box have appear in my blog. but when somebody give a comment on my blog, i dont get any notification about that. how to overcome this?

    ReplyDelete
  93. salam
    Kindly FB comment lagaane k baad kia karna hay usper detail mai koi tutorial laga dain, i mean how and where to moderate fb comments tht we received in blog, and this application, is it different from created page ? i mean i see like button on both, if i want to create page of my blog in fb, this ap has done it or i have to create page ?

    ReplyDelete
  94. Did not find any in the step 7?

    ReplyDelete
  95. The comments plugin requires an href parameter

    ReplyDelete
  96. salam.
    your tutorial works on my blog. but when somebody post a comment on my blog. i didn't get any notification. i go to the comment box and click setting. it shows that 'fb:admin: non specified. then i click on the 'non specified', i got this

    The fb:admins field should be a comma delimited list of facebook profile IDs (with some whitespace around if you want). i.e. it should match /^\s*[0-9]+(\s*,\s*[0-9]+)*\s*$/. You wrote "http://www.facebook.com/deedymyself"

    i have no idea about this. what does it means?

    ReplyDelete
  97. Hi Buddy....Great Tutorial...i must say...it worked wonders for me..i don't know how to thank you for this...
    There's one thing i need to ask...i want to show the comment box on my home page & not just on the post page....Thanx a ton....

    ReplyDelete
  98. thanks nice tips

    plz visit my site comments box:

    http://simdivhollywood.blogspot.com/2011/07/watch-coriolanus-movie-2011-megavideo.html

    ReplyDelete
  99. I have do all the thing like it is in here, but it doesent work! There is no commet box at all! What should I do? Help me please before I trhow my computer out of the window :) my blog is http://maailmamme.blogspot.com/

    ReplyDelete
  100. Hi
    Ok, this is the third tutorial I've tried, so hoping I can get it to work! I'm getting a 'cannot parse code' and something about 'set' type message. I will go through the process again to make sure I've not done it wrong - but one thing that I'm always a little unsure of is the image URL in Step 6: I copied and pasted a link from my facebook profile page - is that right? Where would you get an image link from?? I house my images mainly on my harddisk...

    ReplyDelete
  101. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "body" must be terminated by the matching end-tag "". I got this error what can i do Thank u....

    ReplyDelete
  102. how can i delete posts from my comment box? I am the moderator but cannot see how to make it

    ReplyDelete
  103. how can i delete posts from my comment box? I am the moderator but cannot see how to make it

    ReplyDelete
  104. how can i delete posts from my comment box? I am the moderator but cannot see how to make it

    ReplyDelete
  105. Hi,

    When I am trying to comment, it doesn't directly publish on facebook. I got this message "when I check the 'Post to Facebook' option, it always shows this first 'This comment has not yet been published to Facebook. Publish Comment'. Please help.

    Secondly, Image and text which is shared is default text like "Sign in etc...." and "Google" image for blogger.

    ReplyDelete
  106. The problem with me is that the comment box doesn't show most of the times.... very few time it show up....

    ReplyDelete
  107. Please Anyone explain where can I alter/manipulate/delete the comments? my site is Ninja Romeo

    ReplyDelete
  108. Please accept my apologies for the late reply. I was trapped in a family tragedy

    There are three problems that I have answered in the above comments often but I still get questions and these are:

    1- How to moderate or delete FB comments?
    2- How to post FB comments on Facebook?
    3- How to receive notifications?

    I will write posts on the first two.

    At present comment notification is not working with blogger and I am looking for ways to find it.

    @Catherine
    Upload your images on blogger only kindly read this post :http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html
    Its better that you don't take the link from FB because most often the link doesn't work when you log out.

    @harry

    To show the comments box on homepage also then delete the first and last line starting with b:if and ending with </b:if in step8

    @syahida
    Then please paste the code in step#8 just above the code in step#7

    ReplyDelete
  109. yeeayyyy~~~done!!!!
    thanx so much...:)

    ReplyDelete
  110. hai,
    the facebook comment doesn't appear below my entry, but after i've unhidden the comment setting, it appeared, but both the default as well as the facebook comment...so, how im wanna fix this?

    thanks a lot...

    ReplyDelete
  111. @Mohammad Mustafa Ahmedzai

    I had my facebook comment form working perfectly. Then recently is just disappeared? I deleted all the codes form this tutorial, and re-entered them. I did not get any error messages, so the codes are put in correctly, but the facebook comment box still does not appear?

    Help?

    My blog is:
    http://cobartist.blogspot.com/

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

    ReplyDelete
  113. Thanks :) ... I got it working finally ... It rocks \m/

    ReplyDelete
  114. @Mohammad Mustafa Ahmedzai,

    I have given the same but it says "Validation failed.

    Site Domain is not valid. Site URL must be derived from your Site Domain."

    Should i use .org for site domain?

    ReplyDelete
  115. @Hetal Patil Rawat

    I tried with .org and it is working but after following all steps in the end it shows "The comments plugin requires an href parameter." on the blog, here is the link http://www.shirdisaibabaexperiences.org/2011/08/sai-baba-saved-me-in-every-possible-way.html

    Kindly help...

    ReplyDelete
  116. hey dude, u're really wonderful...nice update....kudos boss....

    ReplyDelete
  117. Thanks for sharing this. This is very useful for me.

    Danielle
    customize facebook page

    ReplyDelete
  118. asSalam~

    @Mohammad Mustafa Ahmedzai

    I'm also having the problem like G..
    When ii tried to save , the error message appear

    "
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "meta" must be followed by either attribute specifications, ">" or "/>"."

    my url is husna89.blogspot.com

    ReplyDelete
  119. asSalam~

    @Mohammad Mustafa Ahmedzai

    I'm also having the problem like G..
    When ii tried to save , the error message appear

    "
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "meta" must be followed by either attribute specifications, ">" or "/>"."

    my url is husna89.blogspot.com

    ReplyDelete
  120. ok. alhamdulillah the probs have been resolved! =)

    ReplyDelete
  121. it works...thanks...many many great thanks...i already looking for this for enough long time...and it's really work...thanks for sharing...many many great thanks...thanks you...

    ReplyDelete
  122. Mohammad,
    Can your spend a help for me?
    I cannot create it suscess :'(

    ReplyDelete
  123. This was amazing. Thank you so much. I had problems along the way,but I read the comment and you had already sorted them all out for people. Thank you for doing this. I have looked for a tutorial a straightforward as this everywhere, but only this one actually works. A few tips if anyone is having trouble. REMEMBER to expand widget templates and there wasn't a developers dashboard forme on facebook aps so I just clicked 'edit settings' on the right hand side and it worked the same.

    Thanks!

    ReplyDelete
  124. I do not even know if this is possible but I believe it is.
    I am trying to get the facebook comment box to appear at the bottom of each blog post, and the comments for that post to only show up on that comment box. <a href="http://deathfairy-idobelieveinfairies.blogspot.com/">My Blog</a>

    I am not sure if that makes sense or not, I have been trying every code I can find. I did manage to get the comment box at the bottom of each post on the main page, but when you commented on it, the comment showed up on the other comment boxes as well.
    Thanks for any help.

    ReplyDelete
  125. @DeathFairy
    Oh and I used the encoder and it still put up html, not sure if it should do that I actually wanted to put the link to my site. My Blog

    ReplyDelete
  126. dear mohammad..
    i've try to insert fb comment using your steps. my problem is each time i comment, the comment will repeat in each post. can u check my blog http://ladysuerauf.blogspot.com

    i also try another way to add fb comment in my blog. the same thing happen. you can check it here.. http://almarivitamin.blogspot.com

    tq. appreciate your help.

    ReplyDelete
  127. @lady sue

    I figured out a temp fix and its really quite simple. Its not exactly the best but it does put the posts in there lol I simply edited the html on the post. I put in the code you can get from the social pluging from facebook, then just put the url for each post, you have to put the code in for each post, but if you have it saved, its not that hard to just put the new url in each time and copy and paste it at the bottom of the post. As you can see here http://deathfairy-idobelieveinfairies.blogspot.com/2011/08/music-music-and-more-music.html, its at the bottom of my post and if you go to my home page and look at the first place at the Lady Gaga post, it doesnt show up unless you hit the read more button and its a totally different one. This is good enough for me as it suits my purposes for a personal blog.

    ReplyDelete
  128. @DeathFairy
    you didn't paste meta part from this tutorial to your blog.


    sorry for my bad English.

    ReplyDelete
  129. I am pretty sure I already have an API number because i used it for something else... i think setting up my dlvr.ir but now i cant find it and i dont want to walk through the "new app" set up.

    ReplyDelete
  130. Thank you for this very much

    But now I have the FB comments appearing in between (the original blogger comments) & (the Blogger's comments box)

    how can I make it appear totally before or after, not in between them

    ReplyDelete
  131. Error
    Site Domain must be derived from your Site URL.
    Was back in App settings my Facebook DOmains page doesn't look like yours at all.
    I can't even get past this point lol! Did something change recently that killed this? I really want to implemnet on all 3 of my blogs.
    Please advise.

    ReplyDelete
  132. 6. One the new window that appears click the Edit Settings link ,
    This step is not clear and doesn't look like my developers page.

    ReplyDelete
  133. Edit forHuntersbyHunters Settings
    There are no settings for this application.

    ReplyDelete
  134. يا محمد باشا يا جامد انت

    تسلم الايادي يا برنس :)

    ReplyDelete
  135. salam bro i cant get this
    http://lovenab.blogspot.com


    i try all coding nothing happen

    ReplyDelete
  136. hello dear .. its look nice way to add comment in blog page but i face one problem after this step Create an App i enter thr 1.Site name 2.Site URl 3.click on Create app but its show me diffrent page not give me that option as u show here id show me this page (Welcome to the Developer App.
    Learn how to build a social experience by referring to the documentation below, or create an app by clicking on the 'Create New App' button above.) left hand in selection its show me this (Recently Viewed
    No Apps Found) idk what can i do now plz help me out thx in advance god bless u this si my blog page thr i want to install this app http://jaycutlerbest.blogspot.com/

    ReplyDelete
  137. Can’t I add in tabbed comments form like the comments section of http://www.jsblogstop.com/2011/03/blogger-how-to-add-facebook-comments.html
    ??
    Can you please write this tutorial in a simplified way..Tutorial link : http://www.jsblogstop.com/2011/03/blogger-how-to-add-facebook-comments.html

    ReplyDelete
  138. nice blogging...helping alot in creating the blog.....checkout my blog gowidrajput.blogspot.com

    ReplyDelete
  139. salam bro i cant get this
    http://smashinggadget.blogspot.com


    i try all coding nothing happen

    ReplyDelete
  140. how to put facebook recent comments , means i am using this commenting system i need recent comments?

    ReplyDelete
  141. WIll we need to do any upgrades with the app considering all the changes that have taken place on Facebook? I saw a Developer alert on Facebook that everything had to beupdated by the 1st of October and Im not sure what to do :/

    ReplyDelete
  142. Thanks for the tutorial, I've tried a lot of another tutorials but all gone wrong, until I found this.

    Thanks a lot

    ReplyDelete
  143. Hi, Thanks for this!
    But... I'm sure I've done everything and it is still not showin gup :(

    ReplyDelete
  144. help me.
    i added fb comment box to my blog. I wanted to display comment box below all blog posts and it works. But when someone comment on a post, comment shows in below all posts in blog published at all time. how can i correct this ?
    if not tell me a way to create fb comment box below each post ?
    thanks !

    ReplyDelete
  145. is appears an error to me too :( what can i do?

    ReplyDelete
  146. I created comment box for my blog using above steps... it works.. but the problem is when someone comment a single post that same comment is displayed in bottom of every post of my blog... what to do..?
    plz help me soon....

    ReplyDelete
  147. hmm..for my blog. its working when using chrome but using mozilla it seldomly appear. what should i do??

    my blog: http://abyrad.blogspot.com

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

    ReplyDelete
  149. Hi pls Help, i have carefully follow the step stated, but after saving the Template these two below will disappear from the template please how do i fix this:

    data:post.body
    b:includable id='comment-form' var='post'

    here is my blog testing page:
    http://myblogtestn.blogspot.com/

    ReplyDelete
  150. I was followed your step but this error message was Appear
    what should i do ??

    error XML: Element type "html" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
  151. thanks the problem was solved after I re-read the replies from the comments above.

    now, facebook comments box has been successfully installed on my blog.

    once again I say thanks for the tutorial

    ReplyDelete
  152. http://officekey.blogspot.com/

    ReplyDelete
  153. Hi i Posted a Comment here Yesterday but it Got Deleted, but i really need help on this. As I stated before yesterday, i folow the procedure well, but i don't know what i did to my Blog template the i can find this line as stated in the Tutorial, Kindly help, the Below is missing in my Blog Template and i don't know why:

    "< includable id="comment-form" var=post > "

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

    ReplyDelete
  155. @UltraGM

    Thanks for the tutorial i have it Working, but i have to Edit my Blog Template Offline, then upload it back

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

    ReplyDelete
  157. hye mohammad.. i allready follow the tutorial step by step.. but nothing change to my blog.. plss help me :\

    ReplyDelete
  158. JUST AWESOME!!! THANX A TON.. .I AM UR FAN HENCEFORTH!!! :)

    ReplyDelete
  159. hi.. i ccannot continued to step for becouse after i click creat app, the button redirect me to another page , not link your http://goo.gl/y5zkk tutorial, can u help me with that?
    thanks

    ReplyDelete
  160. hey i did everything. no error. but no comment box either.help!!

    ReplyDelete
  161. its worked fine for a long time but not working from yesterday :(

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

    ReplyDelete
  163. Can u help me change comment text colour for facebook comment box. thank u, i got fb comment box as per ur direction.......

    ReplyDelete
  164. hey, there's still a problem tho :(

    after i follow all of your steps, blogger said "We were unable to save your template", and the error message is "The reference to entity "tpl" must end with the ';' delimiter."

    can you just help me for this? :(

    ReplyDelete
  165. and .. please reply us, you dont even reply our comments since 8 august 2011 :/

    ReplyDelete
  166. Apologies for no replies pals. I am having exams.

    @Enky
    Buddy please try it on your test blog first and see how each thing works and then finally apply it to your main blog.

    ReplyDelete
  167. Work for me, but how to make this column beside blogger comment column???
    Im sorry about my English ^_^

    ReplyDelete
  168. Thank you for sharing. I used this on my blog.

    ReplyDelete
  169. but how to remove blog own comment box, coz it look weird with fb box...........

    http://sntpp.blogspot.com/

    ReplyDelete
  170. I like your article posting this is really nice article and very informative blog i really like your article

    Logo Design

    ReplyDelete
  171. I really like it. This desired tips for blogger comments option. Thanks for sharing us. You are the best. Full information with pictures. Thanks again.

    http://my-soft24.blogspot.com/

    ReplyDelete
  172. Hats of to you.
    You made that boaring facebook comment box into beautifull commentbox.

    Do follow list,Easy SEO

    ReplyDelete
  173. thank its me allot cause i want to a comment in particular posting but is not available.. and may be this is will help me at my web mainan

    ReplyDelete
  174. Dear Mohammad,

    Im wondering why my comment box sometimes it appear but sometime it shown only Facebook Blogger Plugin: Bloggerized by AllBlogTools.com Enhanced by MyBloggerTricks.com

    What should i do brother..?

    ReplyDelete
  175. Blog is more essential for the business it is such nice and good way, i impressed on your article thanks to author Web Design Phoenix

    ReplyDelete
  176. Thanks man , working perfectly on my new blog
    http://thinktechlife.blogspot.com/

    ReplyDelete
  177. WELL DONE BUDDY.... its Working Perfectly... bunddle of THANKS..

    ReplyDelete
  178. Sounds like you've figured out a good way to blogger. That's a topic we keep coming back to. Great post! thankslanding page design

    ReplyDelete
  179. Thank so much for this post I had been going through a course and I saw they were still using the Blogger platform. It is excellent!Profit Lance Tips

    ReplyDelete
  180. Thank you so much for providing plenty of useful content and also for sharing this information.
    Custom Logo Designs

    ReplyDelete
  181. Hi I went through all the steps and it did not show up on my site :(...www.newdogdemocrat.com Thanks fo any help you can do

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

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

    ReplyDelete
  184. i have done all the step and retry for 2nd time. but the comments box still not visible at my blog. what's goes wrong?? for the first part of tutorial.. i couldn't find the Developer Dashboard in FB app there.. :(

    ReplyDelete
  185. Thanks for sharing about the tips for increasing traffic to the website. I also aware of it post some more suggestion.I appreciate your work post more information.

    Digital Marketing Training

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |