Facebook has provided many plugins for websites and blogs. Recently the developers of Facebook have released the plugins “Facebook Comment Box”. This is an awesome plugin for Facebook. Using this Facebook comment box your blogger and websites user or viewers can comment on your posts and those comments will be automatically shared in their Facebook Comment Wall.
Facebook comment box makes your visitors catch you easily, so this can be very important for those people who want to directly interact with the admin and other visitors. I know there are various people who want to know the Facebook comment box on their blogger blog, WordPress blog, and many other sites. So this tutorial can be the best solution for them. So now we will suggest to you how to add a simple comment box of Facebook in the blogger blog. You should that everything has its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.
First of all, here we are discussing the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media in the world. They always introduce new features to serve the people and to catch the visitors more on Facebook. So Facebook comment box is one of their popular features.
when some people like and reply to their comment. a notification has appeared to the user. And it also provides multiple commenting features.
The main disadvantage of the Facebook comment box in blogger is that Google spider never crawls Facebook comments, so this comment can not be useful in the view of optimization.
Read also: Facebook post share button in blogger posts
You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of the older blog templates Method 1 might not work. So I recommend you use the methods which work in your blog.
This is one of the most using techniques to make more visitors to your blogs and sites.
It is the beginning thing that you should do which you can do easily by the Facebook developer. First of all, you should log in to your Facebook then click on Facebook developers. After that click on Create New App
and there appears a pop of form. Fill out that form. Then fill that Captcha. Then copy the app id into your notepad, this is needed in further steps.
It is necessary to login into your Facebook dashboard. Then go to the Template tab and click on edit HTML. After that find the following code.
<html......> This code is in the first row of every blogger, so you can find it easily.
Then, just paste the following xmlns:og='http://ogp.me/ns#' code just after the highlighted code which is shown above. When you add this code the HTML structure looks like
The one thing is that you just replace or add your AppId below AppId. You put your blog name in All Blog Solution and your Facebook page URL in http://www.facebook.com/rakepoint.
Now there is needed to add meta tags. Just find the </head> and paste the following code replacing your app id
At last, you should put a comment box structure in the blog.
Go and just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code or anywhere you want to show the Facebook comment box.
Now you have successfully added your Facebook comment box.
Note: Replace rakepoint with your Facebook URL. If you want to change the width of the comment, simply change the width.
Watch and follow the below video
Facebook comment box makes your visitors catch you easily, so this can be very important for those people who want to directly interact with the admin and other visitors. I know there are various people who want to know the Facebook comment box on their blogger blog, WordPress blog, and many other sites. So this tutorial can be the best solution for them. So now we will suggest to you how to add a simple comment box of Facebook in the blogger blog. You should that everything has its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.
First of all, here we are discussing the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media in the world. They always introduce new features to serve the people and to catch the visitors more on Facebook. So Facebook comment box is one of their popular features.
when some people like and reply to their comment. a notification has appeared to the user. And it also provides multiple commenting features.
The main disadvantage of the Facebook comment box in blogger is that Google spider never crawls Facebook comments, so this comment can not be useful in the view of optimization.
Read also: Facebook post share button in blogger posts
You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of the older blog templates Method 1 might not work. So I recommend you use the methods which work in your blog.
This is one of the most using techniques to make more visitors to your blogs and sites.
Step 1: Create a New app
It is the beginning thing that you should do which you can do easily by the Facebook developer. First of all, you should log in to your Facebook then click on Facebook developers. After that click on Create New App
and there appears a pop of form. Fill out that form. Then fill that Captcha. Then copy the app id into your notepad, this is needed in further steps.
Step 2: Now let's install the Facebook comment in the blogger blog
It is necessary to login into your Facebook dashboard. Then go to the Template tab and click on edit HTML. After that find the following code.
<html......> This code is in the first row of every blogger, so you can find it easily.
Then, just paste the following xmlns:og='http://ogp.me/ns#' code just after the highlighted code which is shown above. When you add this code the HTML structure looks like
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>Now find the <body> tag and paste the given code just after that <body>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'AppId',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
The one thing is that you just replace or add your AppId below AppId. You put your blog name in All Blog Solution and your Facebook page URL in http://www.facebook.com/rakepoint.
Now there is needed to add meta tags. Just find the </head> and paste the following code replacing your app id
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='AppId ' property='fb:app_id'/>
<meta content='rakepoint' property='og:site_name'/>
<meta content='http://www.facebook.com/rakepoint' property='fb:admins'/>
<meta content='article' property='og:type'/>
Step 3: Comment box in blogger blog.
At last, you should put a comment box structure in the blog.
Go and just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code or anywhere you want to show the Facebook comment box.
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/>
</div>
</div>
</b:if>
<div style="position:fixed; bottom:0px; left:0px; color:#898989; font-size:12px;"><a href="https://allblogsolution.com/2014/02/how-to-add-latest-facebook-comment-box.html">Get Widget</a></div>
Now you have successfully added your Facebook comment box.
Note: Replace rakepoint with your Facebook URL. If you want to change the width of the comment, simply change the width.
Watch and follow the below video
Nice post i add my site
ReplyDeleteYeppie! got it done, step two at the body, the appid needs to be change to the one gotten from facebook.
ReplyDeleteThank you , great post much appreciated
ReplyDeleteGood one.. It works for me.. www.9jakeek.com
ReplyDeleteWow
ReplyDeleteThis one works well.
I set it on one my blogs.
Trying to add it on mobile too
www.wikeria.org
how do i apply it to mobile version of my blog?
Deleteyah it's really work
ReplyDeletesee my website: http://www.heroesislam.tk
Hello,
ReplyDeleteThanks for the valuable information. Finally gotta know How to Add Facebook Comment Box in Blogger and successfully installed comment plugin on my blog.
Added this to my marketing and stretch mark removal blogs, thanks for sharing
ReplyDeleteHelloo.. thanks for that great article. I just followed your steps but the and there was no error but the comment box is not showing up. Pleasa help
ReplyDeletemy blog http://rawfeeds.blogspot.co.ke/
Describe the errors clearly...
Deleteit does not show the comment box. I edited the code as per your instructions saved it but the comment box does not show up in my blog.
DeleteWorks for me! Thank you!!!!
ReplyDeleteYou wrote a very essential post. Most of the bloggers will find it helpful like me. Thanks i will use it on my site Symphony Mobile
ReplyDeleteThanks for the info. Really helped.
ReplyDeletethank you o much i just did it in my blog and its working fine check it out http://www.aznewsline.com/
ReplyDeleteGood
ReplyDeleteits not working for me.my comment box is default
ReplyDeleteAnd i’m glad reading your article. But should remark on some general things,
ReplyDeletereal fb likes
sir! <div class=’post-footer this point is not in my blogger theme plz help me
ReplyDeleteDon't worry buddy. You can also add below <p class='comment-footer></p>
Deletehello, i just followed everything here and also fixed the errors, but the comment box is not coming up on my site - beninspirationals.blogspot.com any assistance will be appreciated thanks
DeleteThanks for the tutorial, but I have encounter some technical issues like FINDING THE CODE body I tried it to find, but I fail to find the said code body only I find is body which is far different from your instructions. Please I need assistance, about this matter.
ReplyDeleteI am looking forward, to hear from you soon.
~Ronald
Blogger
successful but there is a problem.
ReplyDeletea message is shown on upper left side of my blog that is following ..hot managae this.
expr:class='"loading" + data:blog.mobileClass'>
kindly tell me where i will receive comment notification, because i have not received in email and facebook.
ReplyDeletehttps://developers.facebook.com/tools/comments/ Click on this link
DeleteGravatar is a wonderful tool to comment on blogs and posts and get your avatar displayed
ReplyDeleteError parsing XML, line 3, column 35: Element type "html" must be followed by either attribute specifications, ">" or "/>". please help me
ReplyDelete<html> ends with </html>. So there is no need to add />
ReplyDeleteOk. I finished adding,without errors but there is no comment box.
ReplyDeleteI created an AP.I have an ID. Everything done right.
Do i need to Submit my App for review to Facebook ? I set Visible Status: YES
Do you have any idea why its not showing up ?
Consider the below points:-
Delete1. Recheck whether you have done accordingly the above process.
2. I hope, you have added your app id and your facebook url instead of allblogsolution
3. You can also follow up the video tutorials.
4. If you get any error message, just inform me.
Thank you
Its work on my mobile price listing site www.bdpricelists.com
ReplyDeleteThanks so much for this guide, I will set it up on my blog now: http://www.businessblogmoney.com
ReplyDeletefollowed all the procedure on my blog, www.typearls.com.ng, but nothing happens
ReplyDeleteThis must work because it is working in many default blogger template and custom tempplate. Okay, perhaps, I could help you through teamviewer if you want.
DeleteOk. I finished adding,without errors but there is no comment box.
ReplyDeleteI created an AP.I have an ID. Everything done right.
Do i need to Submit my App for review to Facebook ? I set Visible Status: YES
Do you have any idea why its not showing up
Log cabins
thanks for the tutorial, this is so helpfull for me and other blogger :)
ReplyDeleteHi I have already fb comment plug in...and I all things done carefully. But its say failed again & again. Whot should I do now? My site is http://www.alorsondhani.ga
ReplyDeleteOh sorry for late reply. I was checking your site, but could not find and fb comment code. Once again do as instruction above and inform me via email. Then I will check what is exactly happening on your site.
DeleteHi! Thanks for the post, I have a little problem with the comments plugin. I followed all the steps you providebut People comment on my shared blog links on facebook but comments don't appear on my page. What should I do to allow two way commenting?
ReplyDeleteWhat is your blog url. May I check your blog manually ?
DeleteHi ...
ReplyDeleteYour blog is excellent and keep up the good work mate.
I got the comment box on my site but the problem is, i am not getting any notification on my id for the comments and neither i am getting moderator view.
how can get this for web with php code i mean not on blogger
ReplyDeleteIt's so simple. just visit this official link of facebook.. https://developers.facebook.com/docs/plugins/comments/
DeleteI try 2 times and now work for me , thanks , guy
ReplyDeletehere my blog
http://lifecarepost.blogspot.com/2016/10/how-to-check-for-counterfeit-money.html
it make blog go slow, now I remove and keep the default.
ReplyDeleteHi! i did all your instruction but failed, why Facebook comment box do not appear in my web site. Please give me some advice. My web www.necessaryvocabulary.com
ReplyDeletenot working on my blog shahabrarahmad.blogspot.in helppp
ReplyDeletemy site is www.stuwxytricks.ga facebook comment plugin not working my site
ReplyDeleteDid you add AppKey ?
DeleteI tried it over and over gain but still can't make it to work on my site. Please, i really want to have this facebook comment box added on my site. Is there anything else that i can do? Would appreciate it a lot if you can help. Here's the link to my site: http://www.thetravelersluggage.com/ and also i only have one "...class='post-footer-line post-footer-line-1" line so i pasted the code just right after that line.
ReplyDeleteYou have not added AppId.
DeleteI have tried this method even before seeing it here, but the problem is that I have google comment box on the blog and after I tried addiing this, it doesn't show, should I remove the Google comment first, before adding the last code?
ReplyDeleteAm perfectly sure I carried out the procedure perfectly
Wow! Thanks alot. It has worked for me. Sorry for the old comment I made when it didn't work.
ReplyDeleteAnyone can check here to see how the stuff looks
1COMPAREWEB
You are awesome! I made mine! thank you allblogsolution! this article is very useful! I appreciate your post! Check mine everyone: https://www.facebook.com/UsefulVideos-Created-254959358269333/
ReplyDeleteLeave me your reactions. See you there!
cANT FIND IT IN MYY BLOG
ReplyDeletewhy my blog can not use n can not show the Fb coment box please help sir.. agenda sbobet
ReplyDeleteI GOT THE FACEBOOK COMMENT BOX. and people are already commenting on it. BUT The problem is I am not receiving any comments on the modification tools. Please help me.
ReplyDeleteit's not showing on mobile
ReplyDeleteI want to make a comment box like youra
ReplyDeleteThat great, very useful tips
ReplyDeleteSilk scarves online Pakistan