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 insert Facebook Comment into Blogger is very easy, follow these 4 steps.

1. Create a new Facebook app

Table Of Contents hide

1 1. Create a new Facebook app

2 2. Get a code provided by Facebook

3 3. Put the App ID in the meta tag

4 4. Put the Comment code in the post

4.1 Method 1:

4.2 Method 2:

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.

Post Views: 35