How to add Facebook comments to Blogger

How to add Facebook comments to Blogger

{tocify} $title={Table of contents}
A new post here to show how to add Facebook Comments box on a Blogger blog site based on the latest Facebook Developer code.This post may be slightly long, but I would like to request your patience to follow through all the steps as I will be explaining each step in detail and solution to errors that may occur or anticipated.
tich hop comment facebook vao wordpress,free facebook comments,add facebook comments to blogger,get facebook comments,facebook comments copy,blogspot com post a comment,blogspot com facebook,full support comment for fb,how to add facebook comment box in blogger,facebook comment plugin for blogger,blogger comment facebook,facebook comment box in blogger,how to add comment box in blogger,add facebook comments to blogger

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

#1. Create a new app on Facebook

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

#2. Get the code provided by Facebook

To get the code, go to the link https://developers.facebook.com/docs/plugins/comments and choose the following parameters:
  • Width: 100% or to anti
  • Number of post: Number of comments displayed by default
  • Color Scheme: Style the color of the comment box depending on your site, what color you choose to suit

how-to-add-facebook-comments-to-wp


#3. Put the App ID code 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:admins" 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>

Please replace Your_app_id and User_id with the data you receive, only the User ID you get by clicking on your personal Facebook Avatar
https://www.facebook.com/photo.php?fbid=634855699985102&set=a.104988459638498.6128.100003820111103&type=1&theater
For example in this code, 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 above tag, click on the tag area and press Ctrl + F to highlight this position, insert the following code below the yellowed tag:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 the <div class='post-footer'> tag
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 == &quot;item&quot;'>
<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.

Reference: Google

TAGS: tich hop comment facebook vao wordpress,free facebook comments,add facebook comments to blogger,get facebook comments,facebook comments copy,blogspot com post a comment,blogspot com facebook,full support comment for fb,how to add facebook comment box in blogger,facebook comment plugin for blogger,blogger comment facebook,facebook comment box in blogger,how to add comment box in blogger,add facebook comments to blogger
Previous Post
Next Post

post written by:

6 comments:

  1. Hello,

    Now I have changed the domain name
    Old Blog Name: Quang Linh Sharing
    The new blog name is Quang Linh Pro
    Can you help me change the domain name of quanglinhchiase.com to quanlinhpro.com?
    Thank you so much ❤

    Blog Name: Quang Linh Pro
    Link: https://www.quanglinhpro.com/
    Description: Tech Tricks, Blogger, Facebook Tricks

    ReplyDelete
  2. Hii amazing I'll be there after sometime ... your post is unique
    blue stacks download

    ReplyDelete