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.
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
#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 == "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 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 == "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.
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
Hello,
ReplyDeleteNow 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
Done, check the link my friend
DeleteGood 💕💕
ReplyDeleteVery Useful
ReplyDeleteHello The Tech
Vip vip
ReplyDeleteHii amazing I'll be there after sometime ... your post is unique
ReplyDeleteblue stacks download