How to Add New Responsive Facebook Comment Box to Blogger
Pretty posts
themeforest buyers requested me to give a solution how they can add a Facebook comment box in their blogger site. So i have decided to write a post in my site about this regarding issue. In 2009 Facebook developer released their best social plugin called "Facebook Comment Box". This comment box helps your readers to comment on your site using their Facebook,Yahoo,AOL or Hotmail profile. I will share my own method which i apply to my own developing blogger templates. So follow my simple tutorial to add this on your site.
Live Demo
How to Add
After done everything, save your template and you are done. If you face any problem, tell me by comment. I will try to solve your problem with my best consideration. Thanks you to read this tutorial.
Solved Method 2: If above code not working after paste <b:includable id='comment-form' var='post'> then search <b:includable id='threaded_comments' var='post'> and paste above code after it.
For enable comment features mobile and desktop see Enable Responsive Features Post
Recently some of my
Live Demo
How to Add
- First login your blogger site>Then go to Theme>Click on Edit HTML>Click on CTRL+F from keyboard.
- Then search following code.
<body>or
<body expr:class='"loading" + data:blog.mobileClass'>
- After finding any of one on these code, just paste following code after it
<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/en_GB/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
- Then again search following code
<b:includable id='comment-form' var='post'>
- Just after it paste the below code
<div class="fb-comments" expr:data-href="data:post.url" data-width="100%" data-numposts="5" data-colorscheme="light"/>
- You can change number of value 5 as your wish
- You can change light color scheme with dark
After done everything, save your template and you are done. If you face any problem, tell me by comment. I will try to solve your problem with my best consideration. Thanks you to read this tutorial.
Solved Method 2: If above code not working after paste <b:includable id='comment-form' var='post'> then search <b:includable id='threaded_comments' var='post'> and paste above code after it.
For enable comment features mobile and desktop see Enable Responsive Features Post
Recommend: 12 Stylish Beautiful Blogger/Blogspot Search Box
This article is very effective especially for me. I was searching about it. Now my problem is solved. Thanks for sharing your valuable experience.
ReplyDeleteUseful
ReplyDeleteHi. I followed your instructions, but got this message when I saved.
ReplyDeleteError parsing XML, line 640, column 67: The reference to entity "version" must end with the ';' delimiter.
I have updated code with new version. Now you can check again.
DeleteHello there, your tutorial seems to be most update about facebook comments box. I am not a webmaster, nor a coder, even less a designer; i guess you can say i am a curious handyman... ANyway, this is what happened when i inserted your codes... The box only appear when i am logged and when i click on see page from blogger all pages... this is my blog: eddythedolphin.blogspot.com.br
ReplyDeletealso, is there a way to have the header and the menu static?
thank you very much in advance...
Yes It will see in post. Do you want to see it in your Homepage. Yes static option possible but there need to write lot of code. I am a freelancer. If you want to do it for your site, pls contact with me.
DeleteUsefull, I used it in http://safegunsafe.com/
ReplyDeleteIs there a way to import old comments from Blogger?
ReplyDeleteNo there are no way import old comments from blogger to facebook.
DeleteHi! Will it also work for mobile responsive templates chosen on blogger?
ReplyDeleteYes, it will work fully on mobile responsive template.
DeleteHey, I did everything as you wrote but the comments box didn't appear. What can I do? Thanks!
ReplyDeleteThanks to inform me. I have updated post with solved method 2. Now you can check it.
DeleteHi Admin,
ReplyDeletethis not working for me, I am using other template which is not default, this comment box is not working for me, still google plus comment is showing after doing these steps also.
can you help me out from here
Thanks.
First disable google plus comment then try it. Or give me your website url.
DeleteURL is : https://itsmethiru.blogspot.in/
DeleteHi, sorry for late answer. I was some busy with my new blogger template product. i have seen your website and have you applied two method. I think that anyone method will work. If not Send me your website code by contact us link and i will modify it for you.
Deleteit's working for only default template only, when I apply third party templates it's working, can you check once on my blog please help out here: http://filmnewj.blogspot.in/
Deletesorry it's not working for third party templates can you check once on my blog please help out here: http://filmnewj.blogspot.in/
DeleteHi search following code [pre]<div class='comments' id='comments'>[/pre] and above it paste following code [pre]<div class="fb-comments" expr:data-href="data:post.url" data-width="100%" data-numposts="5" data-colorscheme="light"/>[/pre] May be you will find this code many times. Paste facebook above code one by one and see where it's work.
DeleteYes It's working, Thanks you so much Md Jillur Rahman, but I am facing one more problem here, I commented using mobile those comments not showing in desktop and same way desktop comments not showing in mobiles, please help me, don't have me for asking these many questions, help me, Thanks in advance.
Delete"Here" what? If it's in my site, i have enabled comment moderate system in my site to protect from spam comment. If it's in facebook comment plugin?
DeleteHello Md, I too am facing the same problem. I used the fix that you listed with these codes, but on my blog, if someone comments using the mobile app, it will not appear on the website, and vice versa. Is there a fix for this?
DeleteI have checked it in my site and it's working. I have enabled desktop template for mobile. You can try it. See below post how to enable this. After enable it, again try to comment on both mobile and desktop.
Deletehttp://www.codiblog.com/2015/11/enable-responsive-features-for-custom-blogger-template.html
I see that now, thank you. Is there a way to disable the default comment box while still showing the Facebook comments? When I hide the comment box, it hides both.
DeleteNo you need to do it manually by adding below of your related post or author info section.
DeleteHi Md Jillur Rahman! Looks good on my blog! Do you have work instructions on how to integrate this with FB app? Like how to get FB notification when there's a new comment?
ReplyDeleteMany thanks for your tutorial!
I will try to do a new post with your idea. Thanks for this.
DeleteHi, first of all, thank you for sharing your expertise among bloggers like me.
ReplyDeleteI tried the technique you illustrated above and unfortunately It did not work on my blog. My URl is http://fearlessprediction.blogspot.com/.
See Thirmal Sangisetti comment.
Deletemy blogger has several posts , but only on a few posts , the fb comment plugin appears , on there are blogger comments , and the rest of them has no comment options
ReplyDeleteFirst disable comment and then enable it. If it's not work then update your post again.
DeleteHello sorry i got a problem
ReplyDeletewhen i try to edit the second face which has the code
blogger dosent seem to save it
i wanted to know whats going on pls
What's the error display? See Thirmal Sangisetti comment.
DeleteCan i get notifications from this?
ReplyDeleteSorry now it's not support. when it will support, i will post it.
DeleteSorry, you code did not work for. i followed all the instruction and as well all the comment you have been replying but still not working. my blog is http://www.blogmallnigeria.blogspot.com
ReplyDeleteIt's working. I have checked it on your site. See at the end of post.
DeleteIts working only on Mozilla firefox but not working on chrome. what can i do please.
DeleteIt's not my code problem brother. It's problem with your template code.
Deletethanks so so much Md Jillur. I wish i'm your neighbor!! I have so musch to teach me
ReplyDeleteThis is making it say that my body needs closed??
ReplyDeleteTry to do it carefully A to Z.
DeleteThis one of the error am talking about. "More Than One OG URL Specified"
DeleteGive me your website url or May be you have used two same code after <body> tags. Pls check it. If you add two same code, it will show error like this.
Deleteok. my url is www.blogmallnigeria.blogspot.com
DeleteYes i seen that you have added code two times. Pls delete one. After <body> tags delete last code.
Deleteok. i have done that. but other comment was removed. no problem though. i think it has stopped. thanks a lot. Please i will love to have a tutorial on how my ad-sense will be approved. i have tried for long and is been disapproved. and also how my blog an have more comments and good SEO too. my content takes months before it will show on google search.
DeleteKeep eye in our blog. Our upcoming tutorial is about seo.
Deleteok. the error am having now is "Object Invalid Value" after removing the second code as you said.
DeleteIf you are not success with another blog tutorial, you need to remove their code then you need to work with this tutorial. Pls send message by contact form with screenshot, then i can solve you finally.
DeleteThank You. It works
ReplyDeleteThank you very much.
ReplyDeletethank you very much
ReplyDeletethanks ,its working
ReplyDeleteThanks alot. I have successfully added it to my blog http://dailyschoolgist.blogspot.com
ReplyDeleteawesome bro! perfectly working
ReplyDeletethanks bro
ReplyDeleteThis is the ONLY code that has worked for me so far. Thank you sooooooo much. I'm using it here: www.cherishexpress.com
ReplyDeletehow do I make it show on mobile? It shows only on desktop.
ReplyDeletePls read following tutorial
Deletehttp://www.codiblog.com/2015/11/enable-responsive-features-for-custom-blogger-template.html
Thank you very much, this is the ONLY code that has worked for me (too) ;)
ReplyDeleteFound solution !!!!! Select custom template
ReplyDeleteThank you! I am Brazilian and I am for months trying to find a code that works! Success for you!
ReplyDeletehi there.
ReplyDeletethanks for the tutorial. but how we can check if someone comment on our post. did you have any tutorial that we can make a recent comment widget to put on sidebar like "blogger recent comment" widget?
any solution?
waiting for ur reply.. thanks alot :)
I will write a tutorial soon
DeleteThank you! It worked and I didn't realize until I clicked on the specific post, I thought it would be visible even in the list of posts - silly me - so I kept adding the code several times ... and then realized I have several facebook comment boxes. Luckily I did it on a blog I don't use anymore and I just keep for practice! hehehe
ReplyDeleteThank you!
good article
ReplyDeletehttp://www.techub360.com/
Thanks for your kind help.
ReplyDeleteThanks for sharing this post with us
ReplyDeleteThis information is very useful to us and a thankful to you for sharing such a great experience with us.
ReplyDeleteDo you have any service that i can implimet my site comment box in bloger
ReplyDeleteFor what about, you can add it to your blogger site or any kind of website. You can also contact with me by facebook from my contact page.
DeleteThanks for the giving information the above information is so useful to me. keep updating. . .
ReplyDeleteHello. . How do I make it show on mobile.? It shows only on pc only.?
ReplyDeletePls see above comments and you will understand.
DeleteThanks a lot for share this information to us.
ReplyDeleteAccalamu Alaikum Md Jillur Rahman Brother, Already I have added the comment box in my Blog. Allah Bless You....
ReplyDeleteOww li kum salaam, Thanks bro
Deletenice tutorial... thanks.. i want use in my blog
ReplyDeleteworks like a charm! this is the only tutorial that works for my blog and it is very easy.
ReplyDeletethanks
Excellent post
ReplyDeleteI failed to add comment facebook comment box in my www.kutokatz.tk plz can you help me because I did it so many times but the omment box do not appear
ReplyDeleteYour site created by wordpress. You can install wordpress plugin to show fb comment box.
Deleteno I created it with wordpress before but I converted it to use blogger.
ReplyDeleteHi, i will try this. Help me if i got problems. Thanks Md Rahman
ReplyDeleteHey i tried This but its not working ....any other suggestion please ?
ReplyDeleteWow this actually works. Thank you so much!!!
ReplyDelete