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 through 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.
Table of Contents
#1. Create a new Facebook app
Please see the instructions to create 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 match
#3. Put the App ID in the meta tag
When you get the code as shown in picture 1 insert this code I added 2 <meta>. tags
<span style="font-family: arial, helvetica, sans-serif;"><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/vi_VN/sdk.js#xfbml=1&version=v2.3&appId=Your_App_ID";
fjs.parentNode.insertBefore (js, fjs);
} (document, 'script', 'facebook-jssdk')); </script></span>
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
<span style="font-family: arial, helvetica, sans-serif;">https://www.facebook.com/photo.php?fbid=634855699985102&set=a.104988459638498.6128. 100003820111103 & type = 1 & theatre</span>
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 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:
<span style="font-family: arial, helvetica, sans-serif;"><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</span>
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.
<span style="font-family: arial, helvetica, sans-serif;"><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></span>
Then select Save Template and check the result if return result.
Click to rate this post!
[Total: 1 Average: 5]
