How to add Facebook comments to Blogger

A new post here for instructions on how to add a Facebook comment box to Blogger based on the latest Facebook Developer code. This post might be a bit long, but I ask you to patiently follow all the steps as I will with detailed step-by-step explanations and solutions to possible or predictable errors.

How to add Facebook comments to Blogger
 

 

How to insert  Facebook Comment into Blogger is very easy, follow these 4 steps.
 
 

1. Create a new Facebook app

Please see the instructions for creating Facebook App to get the application ID to insert Facebook Comments into your website and manage comments through the application you just created.

2. Get a code provided by Facebook

To get the code, go to the link  https://developers.facebook.com/docs/plugins/comments   and select the following parameters:

  • Width: 100% or anti
  • Post count: The number of comments shown by default
  • Color scheme: Style the comment box color depending on your website, what color do you choose to suit

3. Put the App ID in the meta tag

Once you get the code as shown in picture 1 insert this code I added 2 <meta>. tags
<meta property="fb:app_id" content="Your_App_ID" />
<meta property="fb:admin" content="User_ID" />
</head>
<div id="fb-root"> </div>
<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_VN/sdk.js#xfbml=1&version=v2.3&appId=Your_App_ID";
  fjs.parentNode.insertBefore (js, fjs);
} (document, 'script', 'facebook-jssdk')); </script>

Please replace  Your_app_id  and  User_id  with the data you get, just the user ID you get by clicking on your personal Facebook profile picture.

https://www.facebook.com/photo.php?fbid=634855699985102&set=a.104988459638498.6128. 100003820111103 & type = 1 & theater

 

     For example in this code the user ID is  100003820111103

4. Put the Comment code in the post

There are 2 ways for you to insert Facebook Comments into Blogger page, first you go to https://www.blogger.com -> Select Blog you want to insert> Template Menu -> Edit HTML and follow these ways:
 

Method 1: 

Add the following code just below the <b: include data = ‘post’ name = ‘post’ /> . tag
To find the tag above, click on the tag area and press Ctrl + F to highlight it, insert the following code below the yellow tag:
<b:if cond='data:blog.pageType == "item"'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>
</b:if

Method 2: 

Add this doe code after the </div> tag of <div class = ‘post-footer’>
Still do Ctrl + F to find <div class = ‘post-footer’> and scroll down to find its closing tag </div> and insert this code.
<b:if cond='data:blog.pageType == "item"'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>
</b:if>

Then select Save template and check the result if return result.

I'm a BCA student formed an obsession with Blogging, And I Will Provide You With Content Related To Health, Tech, Learning, Gaming, SEO, To Build Amazing Knowledge.

Leave a Comment

Sharing Is Caring: