Facebook Comments system may be a reason for social media success for most of us. It is the best among all Facebook plugins for blogging. Today, in this post, we will cover how to use the Facebook comment plugin for your blogspot blog with or without a custom domain.
Note: I suggest you take a backup of your Blogger template. Because after implementing this comments system your old comments will disappear from your blog.
Steps to Install Facebook Comment System on Blogspot Google Blogger
1. Go to the Facebook Comments Social Plugin
2. Then, navigate to “Comments Plugin Code Generator.”
3. Now, under the “URL to comment on” enter your blog address.
4. You may also enter the Width or change the number of comments to appear. (Optional)
5. Next, click on the ‘Get Code‘ button. A comment box preview will appear.
6. Again, click on the ‘Get Code‘ button. Steps 1 and 2 will appear.
7. Go to the Blogger Dashboard, Select Blog, Go to the Theme tab, Click on the down arrow next to Customize, and select EDIT HTML.
8. Include the JavaScript SDK on your page once, ideally right after the opening body tag.
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0" nonce="cebriTP5"></script>
9. Now in your blog’s theme try to find one of the following code
<div class='post-footer-line post-footer-line-3'
<p class='post-footer-line post-footer-line-3'
If unable to find both of the codes then search for the following code
<data:post.body/>
10. Paste the following code just below.
<b:if cond='data:blog.pageType == "item"'> <div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="500" data-numposts="5"></div> </b:if> </b:if>
In this code, the variable “data-num-posts” is the number of comments, and the default value is 5 and data-width with a value of 500 Comment form width. You may change both variables as per your blog design.
Disable the Blogger Comment System
If you want to disable Blogger’s default comment system then please follow the steps:
1. Go to Blogger Dashboard and select Blog.
2. Switch to the Settings tab.
3. Then, navigate to the Comments section.
4. There, click the Comment location and choose the Hide option.
5. Finally, click on the Orange color Save button on the left side.
I believe you’ll be able to use this great comment system on your blog. If you still have any queries, please communicate them in your comments.
Hai Tech Prévue,
I have installed this application before in my blog The problem is, the same or all facebook comments appear below all the posts. So, I don’t know which comment on which post. Do you have any idea.?
Hi Aiman, please reinstall comments system on your blog and follow screen instructions as shown in this article. All will work like a charm. Regards
I have the same problem :) What should i replace in data-href?
As I found your site is not on Blogger. Please let me know which software you are using for your site.
No, VietDesigner .net is using Wordpress! I use blogspot for video.vietdesigner.net
And i found the solution for my problem :)
Congrats, keep visiting techPrevue. you can use our forum section (https://groups.google.com/forum/#!forum/techprevue) to ask more question if you have. :)
did you figure out a solution, i’m having the same problem.
Hello Jamie, I have tried commenting on your blog. I found no problem at all.
It does not work, if work then why don’t you add facebook comments in your blogger ?
It works perfectly dude! Don’t mislead audience! For my Audience DISQUS is best!
I’m having the same problem as Waazin, same comments show for all the post. Also, the color of my font makes it hard to read. Any ideas, suggestions? jamiecherish.blogspot.com
Hello Jamie, I have sent you 2 test comments on two different posts on your blog. I found no problem at all.
Great work keep going!
How do I put blogger comment & Facebook comment in the tab
& how do I embed this type of comment engine (the one you are using) to my blogger
You can use a custom theme.
Thanks for your post. Payrchat is an easy social media site. It helps to connect your friends and relatives etc.
It’s an amazing site for connecting with each other. Please visit Payrchat social media site.