3/14/2014

Facebook Comment Form Not Working? Try This Solution for Blogspot Blogs



If you've been finding it difficult to integrate the Facebook comment box with your Blogger blog, sit back and relax as I guide you on how to add Facebook comments plugin to Blogspot blogs using HTML5.

For you to add the Facebook social plugin to your blog, you will need the Facebook Application ID of the blog. If you know the ID, copy it somewhere and if you don't know it you can check the Facebook apps page.

You can read: How To Get Facebook Application ID to generate one for your blog.

Next is to log in to your Blogger dashboard, back up your template and go to "Template" > "Edit HTML"

==> Click inside the HTML and use CTRL F to find : <body

==> Directly below it, paste <div id='fb-root'/> OR <div id="fb-root"></div>

==> Open a new tab on your browser and go to www.freehtmlparser.blogspot.com
==> Copy and paste the code below inside the box on the page

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=522587054526444";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

==> Carefully replace the highlighted appID with the ID of your blog
==> Click "Encode"

==> Go back to the browser tab where you have your blog HTML

==> Copy and Paste the encoded script directly below the  <div id='fb-root'/>

==> Now, your html should look similar to the screenshot below:



==> Click "Save Template"

==> Click inside the HTML and use CTRL F to find :
<div class='post-footer-line post-footer-line-3'>
 OR
<div class='post-footer-line post-footer-line-3'/>
 OR
<data:post.body/>

==> Directly below it, paste this code : 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='center'>
<img alt='' class='icon-action' src='http://1.bp.blogspot.com/_ubwIhqPcR6M/S_bFnzvtkDI/AAAAAAAAA5A/ta5IbGqJZYU/s1600/cmds.png'/> </p>
<div style='text-align: center;'>
<div class="fb-comments" expr:href='data:post.url' data-width="100%" data-numposts="10" data-colorscheme="light"></div></div>
</b:if>

==> Click "Save Template"

That's all.

Check out the desktop view (not Mobile View) of any post on your blog and you should see the comment form below the post.

Please, let me know if it works for you.

Also use the comment form to let me know if you face some challenges.

Please, SHARE this with friends.

Cheers!

Subscribe to this blog if you don't want to miss my tutorials on how to add Facebook comment form to Blogger mobile templates and how to receive notifications On Facebook when anyone comments on your blog, using the Facebook comment form. 


Share :


22 comments:

  1. Can't wait to try this later in the morning when on PC. Will get back to you if it works for me or not. Thx boss.

    ReplyDelete
  2. Bros, I carefully folowed the process and at the end it shows html error at line 1795 saying div cannot be repalced...it was after I intalled the last code on line-post footer 3>.

    ReplyDelete
    Replies
    1. Probably the way your Template was coded. U have to ensure that you are not placing it within a div. Anyway, try placing this code directly below: <data:post.body/>

      Delete
  3. ohhh gosh i dont know y is not working for me

    ReplyDelete
    Replies
    1. Seeing error while saving the code or what? You have to be specific so I can guide you on how to fix the problem

      Delete
  4. If I add the comment box on my blog, it won't disturb the default comment box right? Cos am seeing your blog having both

    ReplyDelete
  5. It worked like charm bro.....thanx Jide am ya fan.

    check it out .....www.kennwaforsblog.com

    ReplyDelete
  6. Am not getting it, is it supporsed to be below < body or < body / > ? Thanks

    ReplyDelete
    Replies
    1. You can search for both. Easiest way to find it is to use <body

      Delete
  7. Mine is working perfectly.
    You can see it at domanto.com

    ReplyDelete
  8. Please what template is OgbongeBlog using ?

    ReplyDelete
  9. Please how do i include READ MORE on my blogger post

    ReplyDelete
    Replies
    1. To do that you will see icon in break form after add video icon.. . The icon is called jump break.. ..
      After writing your post then you insert the jump break after first or second paragraph or any how you like it. Hope this helped

      Delete
  10. It works here www.loveshowerz.blogspot.com.
    Thank you Ogbonge

    ReplyDelete
  11. how will i make it work on mobile?

    ReplyDelete
  12. At LAST It WORKED ON MY THIRD PARTY TEMPLATE

    ReplyDelete
  13. thank so much bro. it worked!

    ReplyDelete
  14. thanks bro ... but mine is not showing on the web view of my blog www.entertainmenthood.com. it only shows on the mobile view

    ReplyDelete
  15. it worked.... thanks jide

    ReplyDelete
  16. It works. Thanks for clear explanation.

    ReplyDelete
  17. it really worked for me. Thanks alot oga Jide

    ReplyDelete

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.

THANKS.

Designed by Jide Ogunsanya.