Add Facebook Comment Form To Blogger

If you happen to change a template for your blog and you find the comment form doesn't show up.
Or you want to change the comment form using facebook comment form you can try these simple steps.

1. Login to your blogger account. Go to Template and Edit HTML.
2. Open a new tab on your browser.
3. Type this URL :    https://developers.facebook.com/docs/plugins/comments/
4. Then, log in to your facebook account. You will see the page as shown on the screenshot below :

Customization:

No 1.  Copy and paste your blog URL

No 2.  Set width of the form to match with your posting area.

No.3   Set the number of comments you desire to show.

No 4.  Set color or just use the default.

No 5.  Click the blue button to get the code

Once you have done with the setting and click Get Code, you will find a pop up includes 2 codes.

5. Copy the codes  number 1, and paste them  below  </head>

Example of the code 1  I had tested on my blog :

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

6. Next, using CTRL+F   to get these tags :

  

<p class='post-footer-line post-footer-line-3'/>

7. Copy and paste the  code number 2 under / after    <p class='post-footer-line post-footer-line-3'/>

Example of the code 2   I had tested on my blog  - yellow highlighted codes is my own blog URL :

<div class='fb-comments' data-colorscheme='light' data-href='http://jarspbs.blogspot.com/' data-numposts='10' data-width='500'/>

8. Before you save the template (for the code number 2),  if you desire to make this form only appears under full posting, you can put conditional tags as follow (the codes in blue are conditional tags). :

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='fb-comments' data-colorscheme='light' data-href='http://jarspbs.blogspot.com/' data-numposts='10' data-width='500'/>
</b:if>

9. Last save template and see the result.