How to add Facebook Comments Box to Blogger Template

Here is a step by step procedure about How to configure the Facebook comment plugin in a Blogger Template.


1. Customize the UI for the Facebook Comment Plugin: 
Go to this Comments Plugin section in the Facebook Developer page and customize the look and feel for the widget that would fit your blogger template.
No changes required for the URL field (we will be modifying it later). Set the Width in pixels that would fit the post section in your blog. Similarly set the No. of posts and the Color scheme that would match your blogger template.

2. Get the Code :
Click on the 'Get Code' button after customizing. You will see two section of codes as shown in the below picture:



3. Add the JavaScript SDK code (refered as Code A) to Blogger
  • Copy the code snipped marked as Code A from the above mentioned screen.
  • Go to the HTML Editor for your blogger and search for the <body> tag 
  • Paste the copied code snippet below this <body> tag

4. Paste the Comment Widget code below the Blogger Post
  • Shown below is a slightly modified Code-B from above image to (a) show this comment widget only in the item posts and (b) properly replace the post's URL
    <b:if cond='data:blog.pageType == "item"'>
     &lt;div 
          class=&quot;fb-comments&quot; 
          data-href=&quot;<data:post.url/>&quot; 
          data-width=&quot;710&quot; 
          data-num-posts=&quot;100&quot;&gt;
     &lt;/div&gt;  
</b:if>
  • Copy the above snippet > Search for   '<b:include data='post' name='post'/>' in the Blogger Template and paste the snippet below that.
  • Check the Preview to test if the comments box is rendered properly.

5. How to Hide the Blogger Comments section if needed
If you would like to hide the default Blogger's comments section, go to Settings > Posts and Comments > In the Comments section > Select 'Hide' for comments Location.

In case of any clarifications, please share your queries in the comments section below. 

Comments

  1. insideITworldFebruary 16, 2015 at 5:19 PM

    Informasi yang sangat bermanfaat. Terima kasih untuk admin.
    Semoga dapat menambah wawasan Saya dengan topik yang telah admin bahas.
    Visit: TEMPLATE BLOGGER PALING KEREN 2015

    ReplyDelete

Post a Comment