In this article, you will learn how to add Facebook comments to Blogger with notifications enabled. It means you will receive an instant notification whenever someone comments on your Blogspot blog.
Plus, you add multiple comment moderators so that you can collaborate with teammates and spend your time working with Blogger SEO settings to increase traffic and make a good income from BlogSpot.
When running a quality blog, you have to add different widgets such as an HTML table widget, Contact Us form, and Live Chat plugin. The Facebook comments box is another gadget you can use on your Blogger blog to let users drop their comments.
Why Facebook Comments Plugin?
The Facebook comment box is one of the top Facebook plugins that are used on many websites and blogs.
Facebook comments plugin has become an excellent tool for increasing quality comments and user engagement. When using the Facebook comment box on your website, you can reduce spam and maintain your comments’ quality.
Another advantage of using the Facebook comments plugin over others is that it allows people to share their comments on their timelines.
So, if you have installed the Facebook comment box on your BlogSpot blog, you can expect some decent traffic from those comments, too.
Luckily for you, now search engines, especially Google, crawl, and index content in Facebook comments.
What does that mean to you?
When your blog receives more comments, search engines will crawl the content within comments and add them to the search index. So, your blog will get more traffic from search engines to your blog.
That’s very good, right?
Yes, usually, Facebook comments get more engagement. You can expect an increase in traffic in the upcoming days. But, it is not guaranteed.
I shared a detailed post about adding a Facebook comment box to Blogger with notifications enabled in an earlier post. That post got many comments when Facebook decided to change its design. Many bloggers’ main problem was creating a Facebook app and adding a comment box to Blogger with their new interface.
So, I decided to take all those steps on my shoulders and show you exactly how to add Facebook comments to any BlogSpot blog.
Therefore, this tutorial will explain adding a new Facebook comment box to Blogger with notifications. At the end of this tutorial, you can embed the Facebook comment plugin into your BlogSpot blog, get notifications for each comment, and reply instantaneously.
If you spend much time on Facebook, this feature will be very helpful.
Another advantage is you can add moderators to manage comments. Even if you are not online at the moment, your assigned moderators can moderate comments.
Let’s add a new Facebook comment box to your Blogger blog without further ado. This tutorial has three significant parts. They are,
- Create an app for your blog
- Instant Facebook Comments plugin
- Enable notifications for comments
- Moderate comments (optional, the later part after adding a Facebook comment box)
Also, you’ll learn how to…
- Display the number of Facebook comments on each blog post
- Disable the default Blogger comment form
- Grow your business to the next level
I will explain each step one by one. Please follow each step correctly.
Advantages of Pitiya Facebook Comments Plugin for Blogspot
Here are a few reasons why the Pitiya Facebook comments plugin for Blogger is the best for your blog.
- No Jquery-based! – No impact on your website loading time
- Two themes – for Bright and Dark Blogger themes.
- Lots of Customization options
- Regular updates on code: We’ll update the code regularly to adapt to Facebook SDK code changes. We’ll handle them all!
- Comments counter widget
- New features are added regularly
- Instant notifications to your Facebook account
- Multiple admins to moderate comments
- It’s 100% free!
Create a Facebook App
Note: Depending on the time, the design of the Facebook developer page might have changed. But, the steps are the same. Create a new app >> Enter details of your business & website >> Make it public.
Follow the instructions below to start creating a Facebook App for receiving notifications to your Facebook account for new comments and replies.
Go to the Facebook Developer Apps official web page and click on the “Add a New App” area. Alternatively, hover over the “My Apps” menu link and select the “Create New App” button.
Now, you would see a pop-out box to create the Facebook app. Type the name or your website name in the “Display Name” field. Enter a valid email address for the contact email address. (Note: You can create a unique Namespace (link slug to your app) later.)
Now, you have successfully created an app on Facebook. The next step is adding your website and business details so that Facebook can verify your identity.
Go to Basic Settings to start adding those details. (Make sure the correct app is selected.)
For instance, adding a website privacy URL is not optional. You must add it. And there might be some fields to comply with GDPR. If your BlogSpot blog doesn’t have a Privacy policy page, you must create one now. You can make it yourself, hire an attorney, or use a privacy policy template.
Luckily for you, there are a few privacy policy generators for Blogger blogs. Search on Google, and you’ll find them.
For more help with identifying those fields and their meanings, please refer to this help documentation.
After filling out the fields in Basic Settings, publicize your Facebook app by toggling the on button (check step 2 of the screenshot below). Ensure you’ve specified the website URL to install the Facebook comments plugin.
Click the “Save Changes” button to finalize the steps on the Facebook app settings page.
One last step…
…Go to your Facebook App Dashboard and save the app ID and app secret on your computer. We need them later.
Install the Facebook Comments Plugin
Now, you created a new Facebook app for your Blog. The next thing you have to do is install the Facebook comments plugin on your BlogSpot blog. To do it, please follow the steps below respectively.
Step 1: Sign in to your Blogger account and go to the Themes section.
Step 2: Now, you have to change your blog theme. So before we start making changes, first of all, backup your existing blog template. Then click on the “Edit HTML” button.
Back up your Blogger theme and Go to the EDIT HTML section.
Step 3: Find this “<html” code in your template, and front of this code, paste the below code.
xmlns:fb='http://www.facebook.com/2008/fbml'
Make sure to add a space before and after the above code. See the example below.
<html xmlns:fb='http://www.facebook.com/2008/fbml' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' …….. xmlns:expr='http://www.google.com/2005/gml/expr'>
Step 4: Use CTRL + F Blogger keyboard shortcuts and find where the HTML element is located below.
</head>
Now copy and paste the below block of code just above the </head>
code.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Pitiya' property='og:site_name'/>
<meta content='Image-Address-Of-Blog-Logo' property='og:image'/>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
<meta content='Your_FB_Acc_ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Customization
- Replace your blog title or blog name with Pitiya
- Copy and paste the logo image URL instead Image-Address-Of-Blog-Logo. The logo will appear next to your post titles on the Facebook profiles of commentators.
- Replace YOUR_APP_ID with the App ID which you saved on your computer earlier.
- Replace Your_FB_Acc_ID with your Facebook personal numeric ID. You can get it over here.
Add more fb:admins meta tags to assign multiple admins.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Pitiya' property='og:site_name'/>
<meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='FB_Acc_ID_User1' property='fb:admins'/>
<meta content='FB_Acc_ID_User2' property='fb:admins'/>
<meta content='FB_Acc_ID_User3' property='fb:admins'/>
<meta content='article' property='og:type'/>
Step 5: Find the HTML code below using the above keyboard shortcut.
<body>
If you cannot find the above code in your existing blogger template, then try to find the code below. It should be located in your template.
<body expr:class=’"loading" + data:blog.mobileClass’
After one of the above codes, paste the below piece of code.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
</script>
<script src="https://d1usxgweuglwuz.cloudfront.net/files/pitiyafbcp.js"></script>
Make sure to replace the MY APPLICATION ID HERE with your real Facebook app ID that you copied earlier.
Step 6: Now you are half done. You need to display the Facebook comment box on your blog. You can manually put the Facebook comment box in your post and static pages. But it’s not easy to manually add a Facebook comment box to whole pages. (think if you have 1000+ posts on your blog. Do you want to add the Facebook comments plugin script on every post? I guess you don’t.)
So we use a technique to embed the Facebook comment plugin below every page of your Blogger blog, so each time you create a new blog post, the Facebook comments form will appear.
It’s totally done automatically. To start adding the Facebook comments box, search for one of these Blogger data tags in your Blogger theme or template.
<data:post.body/>
or
<p><data:post.body/></p>
If you’re using a magazine blogger template, you will encounter two or three similar codes. Using a wrong <data:post.body/>
code could result in the Facebook comments plugin not working properly.
So try all code paces and select the correct one. If you’re unsure which code to add or didn’t work with that method, find the HTML code below in your template.
<div class=’post-footer-line post-footer-line-1′>
or
<p class=’post-footer-line post-footer-line-1′>
I found the right code easily. Check the screenshot below.
Tip: Use keyboard shortcuts to find an appropriate placement.
Step 7: Now paste one of the HTML codes of Facebook comment boxes just below the above codes.
Note: We redesigned how the Facebook comments plugin for Blogger works. Please check the demo by clicking the button below to see live-action examples. The Facebook comments plugin is independent of JQuery, which means your page speed won’t slow down much after installing the plugin! 🙂
Facebook Comments Plugin Style #1
This is a plain Facebook comments box style. This is the best for you if you don’t want a fancy widget. Yes, you can customize the text message, colors, etc.! 🙂 Check out the demo by clicking the button below and drop and comment to see how it works!
Code for Facebook Comments Plugin Style #1
Get the code for the Facebook comments widget style 1 for Blogger below.
<script>
var bgcolor = '#f9f9f9', // background color
textclr = 'inherit', //text color for custom text under Facebook comments form section
titlecolor = '#444649', // title color
titlefontsize = '33px'; // font size for title
titlebgcolor = '#f9f9f9'; //ex: red, #ae85a8,
titlefontfamily = 'Verdana, Geneva, sans-serif'; // ex: "Arial Black", Gadget, sans-serif
</script>
<b:if cond='data:blog.pageType == "item"'>
<!-- Post pages -->
<div id='pitiyafbcp' style='text-align: center;'>
<div id='titlefix' style='padding:10px;'>Share What You Think About This Post!</div>
<div id='fbcf' style='text-align:center;'>
<fb:comments data-colorscheme='light' data-numposts='10' data-width='500' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
</div>
<div id='collector'/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- static pages -->
<div id='pitiyafbcp' style='text-align: center;'>
<div id='titlefix' style='padding:10px;'>Share What You Think About This Page!</div>
<div id='fbcf' style='text-align:center;'>
<fb:comments data-colorscheme='light' data-numposts='10' data-width='500' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
</div>
<div id='collector'/>
</div>
</b:if>
</b:if>
Facebook Comments Plugin Style #2
If you’d like to make your blog’s comment section wonderful, beautiful, and fun, you can’t neglect this beautiful Facebook comments plugin for Blogger.
The beauty of this style is it solely depends on CSS3 animation, so it doesn’t slow down the website speed. Furthermore, you can change the colors to make it even more suitable with your current Blogger template. Take a look at how it looks by checking out the demo.
Code for Facebook Comments Plugin Style #2
Get the code for Style #2 of the Pitiya Facebook comments plugin below.
<style>
#pitiyafbcp {
color: #fff;
background: linear-gradient(-45deg, #212122, rgba(99, 95, 97, 0.979), rgba(59, 60, 61, 0.986), rgb(12, 12, 12));
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@-moz-keyframes Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
</style>
<script>
var //bgcolor = '#f9f9f9', // background color
textclr = 'inherit', //text color for custom text under Facebook comments form section
titlecolor = '#444649', // title color
titlefontsize = '33px'; // font size for title
//titlebgcolor = '#f9f9f9'; //ex: red, #ae85a8,
titlefontfamily = 'Verdana, Geneva, sans-serif'; // ex: "Arial Black", Gadget, sans-serif
</script>
<b:if cond='data:blog.pageType == "item"'>
<!-- Post pages -->
<div id='pitiyafbcp' style='text-align: center;'>
<div id='titlefix' style='padding:10px;'>Share What You Think About This Post!</div>
<div id='fbcf' style='text-align:center;'>
<fb:comments data-colorscheme='light' data-numposts='10' data-width='500' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
</div>
<div id='collector'/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- static pages -->
<div id='pitiyafbcp' style='text-align: center;'>
<div id='titlefix' style='padding:10px;'>Share What You Think About This Page!</div>
<div id='fbcf' style='text-align:center;'>
<fb:comments data-colorscheme='light' data-numposts='10' data-width='500' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
</div>
<div id='collector'/>
</div>
</b:if>
</b:if>
Customization
- Generally, the Facebook comment box would appear on the post and stationary pages. Stationary or static pages are stand-alone pages. They are not added to archives. Usually, Static pages are best to add a Contact Us page in Blogger, About page, etc. So if you don’t want to display the Facebook comment box on static pages, please remove the above code section starting with
<b:if cond='data:blog.pageType == "static_page"'>
. - If your Blogger template is not a magazine template or is designed for showing the whole content on the home page, you can also display the Facebook comment box on your blog home page or archive pages.
- Change the background and font colors by changing RGB and Hex color values.
- I have set up the width of the comment box to 700 pixels. If you want to reduce the width to 500 pixels, update the value to 500 instead of 700. Also, you can remove the data-width=’700′ CSS code, and then the Facebook comment box will adapt to the device’s screen resolution. Remember, adding an overriding value for the width of the Facebook comment box could mess up your blog template.
- Additionally, you can add your own call to action instead of “Share What You Think!”. Add a suitable one that your audience is familiar with.
- Customize the styles of the comments plugin using CSS.
Step 8: The most significant part of this tutorial is to save your Blogger template!
Recommended: Blogger SEO: Optimize Your Blog for Search Engines
Enable notifications for comments
Now you are already done with almost every laborious work! You can overlook these steps if you don’t want to receive notifications for comments & replies and make some useful changes such as enabling grammar filters, member whitelisting, etc. But this tutorial is for receiving notifications for comments. (That’s why we created a Facebook App!). In the last part of this tutorial, let’s see how to enable notifications for comments.
Visit this web page: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
Replace YOUR_APP_ID with your Facebook application ID.
Click on the “Settings” link.
Now, a pop-out box will be shown, and you can change some settings. Make yourself a moderator (essential to receive comment notifications). Allow other options to log in and comment on your blog. Set grammar filter to maintain the comment quality. Use a comment composer to reduce the page loading time.
See the below screenshot. After making these changes, click on the “Save” button.
That’s all. Whenever someone drops a comment or even replies to your comment in your blog, you will receive Facebook notifications INSTANTLY! Tell a friend to drop a comment on your blog to see the results! Here is the notification message for my test comment, which was dropped on the demo site.
Display comments counter
Now, you have completed the most important steps in this tutorial. If you want to display the number of comments below the post title, follow the instructions below.
- Search for the code below on your theme’s ‘Edit HTML’ page.
<b:if cond='data:post.title'>
- Now copy and paste the piece of code just below the
</b:if>
tag of the above code. (check the screenshot below)
<span expr:href='data:post.url'></span> comments
- Save your changes.
Hide Default Blogger Comment Form
If you’re not interested in displaying both the Blogger comment form and Facebook comments form in your blog, you can easily disable the default comments system.
Moderate Comments
If you followed each step correctly, you’d see a link to moderate comments when you visit any blog post where Facebook comments are enabled and you’re logged into your Facebook account. (It’s known as the Facebook comments moderation tool.)
By clicking on the particular “Moderation tool” link, you will be redirected to the Facebook Developers Comments moderation page, where you can do multiple things based on the page level.
Visit this URL to go to the Comments Moderation page based on the App level: https://developers.facebook.com/tools/comments/YOUR_APP_ID/
Replace Your_APP_ID with the app ID which you used for your blog.
Facebook comment moderation tool is not showing
If the Facebook comment moderation tool is not showing on your end, follow the instructions below.
- Make sure you have added the accurate APP ID to the Facebook comments HTML code.
- Clear your browser cache and log in to Facebook your account.
- Disable AdBlock plugin
- Try again from a different browser.
Further actions…
Now you know how to add Facebook comments to Blogger.
However, Installing a Facebook comments plugin on your Blogspot blog is just a part of a big game. Installing the FB comments box does not confirm your success in blogging. You have been clever, followed a good strategy, and have a plan to grow your BlogSpot blog and reach your ultimate goals.
Here are a few articles to get started:
Which Facebook Comments Plugin Style did you use?
Yes, I am eager to see what Pitiya’s Facebook comments plugin looks like on your blog. Here’s how to share your work.
- Scroll down this page until you find the comment form.
- Enter your name (not blog name) and your blog URL where Pitiya readers and I can see your work.
- Type a comment about what your experiences are on using the Facebook comments plugin so far. (each comment must be descriptive and to the point.)
- Post the comment.
- Lucky winners whose blogs are attractive and have high-quality content will win special prizes from me!
it's done here : http://www.alnaharweb.com/
thank you (h) (h)
Thank you for this tutorial. It was very useful.
Glad it works fine on your blog Anna. Thank you for commenting here.
Nice. Thanks a lot for sharing but why are you not using it?
I used the Facebook comments plugin in Blogger when I used the Blogger platform. But, since I migrated to WordPress, I used a third-party comments plugin that provides more features such as awarding badges for active users and redirecting users after commenting, etc.,
It is not working in my blog. Can you please help me out?
My site is http://www.chordzone.org
Sudhin, It looks like there is not the default comment form on your blog. And you have enabled Disqus comment system. So this may be the problem to not working the Facebook comment box on your blog. But if you followed above steps correctly, Facebook comment box should appear on your blog.
Do you get any error message? Or does Facebook comment box not appear? Do let me know. I will help you to add Facebook comment box to your blog.
Hi Chamal! Thank you first of all for replying to my comment. I have seeked help in many other forums but yours is the only one who replied. You are awesome !!!
Well, I am not getting any errors or anything while saving the template. I have tried refreshing the page, but still the facebook comments are not appearing.
Is this caused due to disqus?
I want to keep disqus as well as facebook comments on my blog. Can you tell me what to do?
If you did everything well, then Facebook comment box widget should appear on your blog. Open your blog on a different web browser. If still Facebook comment box didn't appear, then there might be wrong in your code.
Yes, you can use both Facebook and Disqus comment systems on your blog. I will share a post how to use multiple comment systems on Blogger. If you have backed up your Blogger template, then restore it and followed above steps again correctly.
Do let me know what happened Sudhin, I will help you to add FB comment box.
Hey Chamal,
I have checked in another browser(Firefox), but only Disqus is loading up.
If it's not too much to ask, can you check my source code to see the problem?
I can also email you my template if you can fix it.
Thanks for your help!!!
Contact me Sudhin Venu.
Hello, thank you for this tutorial which helped a lot. I have just one problem though I'm not sure if you can help. I have listed the website and domain in the app form with a french extension (blogspot.fr) and noticed that comments will only show to people using that extension. For instance, anyone visiting through a (blogspot.co.uk, blogspot.com, blogspot.no, etc.) will not see the comments made on (blogspot.fr) and vice-versa. I tried to fix this by including every extension blogger has in the "App Domains" section of the app form, but it's still not fixing the problem. Any ideas? Thank you.
Hello Lorianne, First thank you for sharing your problem with us. Yes, If you added french domain name extension to Facebook app, it will only the comments to french extension site.
BlogSpot is a website. it has different country domains such as blogspot.in, blogspot.co.uk like google.in, google.co.uk, google.co.th and google.co.nz. If you search on google.co.uk Google website, there are more likely you will get more results related to United Kingdom.
There is a one solution to this. redirect country domains like blogspot.co.uk and blogspot.in to blogspot.com and then add it to Facebook app domains.
Then comments notifications will come to your Facebook account just like above instance. Do let me know how it worked.
I can not find the codes in step 5 what shall I do ?? this is my blog http://5minuteenglish.blogspot.com/
pls. I need ur help
Hi Ramadan, I examined your blog source code and found that your blog template is optimized with schema.org data types. It's good!
Just search below code and follow above instructions respectively.
<body itemscope='' itemtype='http://schema.org/WebPage'>
If you need further help, reply to this comment.
Excuse me again what about step 6 ??? I tried all codes but it did not appear what should I do ???
i MEAN THE COMMENT BOX DID NOT APPEAR
The last thing and pls. excuse me am I allowed to send you my template and data u need and u do this facebook comment box for me pls. ???
Ramadan, In sixth step what we do is, adding Facebook comment box to all individual pages on Blogger. That mean Facebook comment box will automatically displayed in every blog post. You will find three similar <data:post.body/> codes in your template. Try placing Facebook comment box code below every <data:post.body/> code. (It works in second code for most bloggers)
Then follow other steps. If still Facebook comment box doesn't appear on your blog, do let me know. I will help you to establish Facebook comment box on your blog.
Sorry to tell you that i did everything but in vain can you help me please ???
Contact me Ramadan.
how can i contact u ????
I received your file and already added Facebook comment box to blogger. It works fine! But there are some things to ask from you. You can contact me on our Facebook Fan page. https://www.facebook.com/problogtricks
This is all data you need cause I tried you ( contact me ) form but it did not work well with me
https://www.mediafire.com/?z6ox4ikeuhizedj
you can contact me here after you edit Thanks a lot once more If I can help you with any thing it gives me the honor to do that
Thanks a lot I sent u a message
Hi, very helpful !!!
Very thank you
everything seem to be prefect !! but some problem :
when I try to comment my blog (other FBid and browser) why it don't have notifications to mod facebook ? ;((
and "developers.facebook.com/tools/comments/?id…" don't got any comment
may be I use same IP ?
Thank you.
Yes, IP address may matter. But, I think it's because you use the same Facebook account. It doesn't need to send a notification to your FB account, showing that you commented on your blog.
So i suggest comment on your blog using a different Facebook account or use your Facebook account as different user. (EX:- Your Fan page)
Thank you Sirius for sharing your feedback. I appreciate it.
Hello there, thank you for this post !
My blog is http://tusitusis.blogspot.gr/
I tried and what went on was that a comment box was created as a gadget and it has inside this code =>
div class="fb-comments" data-href="http://example.com/comments" data-width="430" data-numposts="5" data-colorscheme="dark"></div
(with the proper opening and closing div – I just could not paste it here – it prevented me from that)
Please tell me what I should to to fix this.
1. how should I modify the code in the gadget & 2. I want readers to be able to post on every post
Thank you in advanced,
Yours Trully !
Hello Elpida, Looks like you're going to add Facebook comment box to a country-specific domain (.blogspot.gr not .blogsot.com). If you do that, Facebook comment box will not appear for US, India, Pakistan, Malaysia people. Yes, It will only display for who are viewing the above domain. So i recommend you to redirect country specific traffic to your .com domain and add Facebook comment system to that.It looks like you haven't followed above steps correctly. If you done it well, the data-href URL should not be 'http://example.com/comments' and it should be your post page URL. Other thing there are more codes than above.I recommend you to scan your blog template again and check that you followed above instructions correctly. If you done it well, Facebook comment box will appear on every blog post and you will receive notifications to your Facebook account.If you need any help to show up Facebook comment box on your blog, reply to this comment. I will do my best to help you out.Thank you!
Ok thank you ! So let me check and see what have I done wrong and be right back ! And when you say redirect to com and not to gr … you mean I have to fill the app I made with my urls blog but not on with my country's domain … the one that redirects to that … .com … right ??
If you set app domain to blogspot.gr, so Facebook comment box could appear only on this domain, not blogspot.in etc. I recommend redirect your country specific domain to the .com domain. And then follow the instructions to add FB comment box to blogger.
Hi. After following your old tutorial I couldn't get the comment box. So I was starting to follow your new tutorial. I already had an application ID as I had use the comment box before. I was trying it again and on my developers page, when I enter "blogspot.com" in APP DOMAINS box, it says "top-level domains are not allowed" with a red triangle on the side.
DO you know, why that is? Is that the reason I am not getting the comment box?
http://mycactusdress.blogspot.com/
Oh! Never mind. I tried "www.blogspot.com" and it worked. Now let me follow this new tutorial again and see if I get the comment box.
Thank you.
Ya. Did everything. Still not coming. Please help.
Thank you. 🙂
Welcome Onur Batur. Thank you for commenting here!
Perfect…all done here…everydaytibs.blogspot.com….I had to improvise to display the facebook comment box on posts..not the homepage… thank you so much for this..
Thank you Erniesha for sharing your thoughts about Facebook comments widget.
Had no luck. I followed and double checked everything carefully.
Upon checking, I noticed that the end of the FB Comment box code was in red.
Why's that?
The one that ends the paragraph and if clause.
Would still try to work on this though.
Reverie, Make sure your Blogger template coding structure is looking good. Also the copied code for Facebook comments box. If you pasted the code in wrong place or lose any ending tag, Blogger will alert you. In your case, you might not add the ending tag of if condition tag. Double check your template and do let me know your progress.
I was able to work it out. Though it took me some time since I was having second thoughts if it will affect my traffic and trust ranking. I'm only a newbie in this blog thing.
BTW, will this affect my current SEO score or trust rank? It's still low so I don't want to end up even lower.
Thanks for this! It works perfectly. I'll just wait for comments there now to check the notifications. Thanks again!
Hi Gyro,
Facebook comment box is just another comment box. Yes, there are a few times which decrease your blog post page's SEO rankings. ex: irrelevant comments (which dilute the keyword densities)
Anyway, having a good working and enticing comment box is very important. Because comment boxes add user-generated content. Look how forums such as Warriorforum get lots of traffic from user-generated content.
In earlier days, search engine bots couldn't crawl content in Facebook comment boxes. Because Facebook uses frames and JavaScript to load comments. But, now everything has changed. Now Googlebot can crawl JavaScript codes.
That means Google index Facebook comments. So, you get more benefits additionally user engagement through Facebook comments.
Make sure you checked out my ultimate guide on BlogSpot On-Page SEO which will teach you how to set up BlogSpot blogs for search engines and drive lots of traffic.
https://www.pitiya.com/blogger-seo.html
More comments your blog posts have, for more long-tail keywords they'll rank. Facebook comment box with notifications enabled doesn't hurt the SEO performance of your blog.
Glad it works great on your blog. You can test comment notifications of the Facebook comment box by commenting as a different user.
Thank you for commenting here Gyro. Happy blogging!
Hi,
Admin
Your step by step tutorial explanation is very helpful to beginners..
and one thing i suggest publish complete coding in a singe page it's much better
thanking you…
(h)
Thank you for recommendation. I will do my best to maintain a better usability on Pro Blog Tricks.
dear bro pls tell me what's MY APPLICATION ID HERE?
Sheikh, I recommend you to read and follow tutorial thoroughly. Actually you don't need to create an Application, if you don't want to receive comment notification to your Facebook profile.
Hello Chamal thank you for this tutorial
I followed your tutorial and double checked everything carefully
but It is not working in my blog. Can you please help me out?
this is my blog link http://latshetklm.blogspot.com
If you followed all steps correctly (including create a Facebook application), you may lost your way on the adding Facebook comments widget code. Double check where Facebook comment box code placed. Let me know your progress and i will help you adding Facebook comment box to your blog.
When I am trying to add my blog in the basic setting page it is showing this error
"This must be derived from Canvas URL, Secure Canvas URL, Unity Binary URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains: http://www.itoocaninvest.blogspot.in" . I dont understand what it is. Please help
When you add App domains name, don't add your full blog address. And you might added blogspot.in instead blogspot.com. This could block Facebook comment box showing for other peoples who are visiting your blog. So, when you add App domains name, add this itoocaninvest.blogspot.com.
Also for site URL, you would add your full blog address as http://www.itoocaninvest.blogspot.com
If you have any problem, share your questions here.
Not working on My blog too
http://allbankifsccodeonline.blogspot.in
Bhawani read above instructions and tutorial again and tell me your problem. I will help you add Facebook comments to your Blogger blog.
Hi, I love this plug in, ive got it to work on my desktop website http://www.biggbunnz.com, but i need help with making this facebook comment box also show on mobile blog site. HELP ;(( please.
Thanks
I'm glad you like this plugin. If it works on your desktop blogger version, so it should also work on mobile devices. Make sure your Blogger template doesn't disallow widgets to be preview in mobile views. Change your template view in mobile devices from template section.
Why is it not working? I did everything correct, i'm sure. I've tried to put the comments box on my blog, more than 15 times, and it's just not working.
Marina, Make sure you put Facebook comment box source code in proper place. There may be more than two data:post.body codes in your Blogger template. So, copy and paste comments bo x code in all places and check your website again.
If you can't see the Comment box, reply here.
hey please remove floating sharing buttons from your site . i am unable to read articles
who?
I followed your method correctly for several times. The good news is before visiting ur post, everytime it said html error, but this time everything went well except that nothing is showing on my blog. please help. My blog is (dnbpediatricsdotcom). thank you;
Ajay, Make sure you placed the HTML code in relevant place. Just experiment by adding comment box code in every place and then exclude one by one to identify what's the correct data:post.body code.
Thank you, works like miracle (k)
Glad it works on your blog. Thank you for your feedback.
Hi! I have followed your directions step by step and I am pretty sure that I did not miss anything. But the comment box is still not on my page. What could possibly be wrong? Here's my site http://kmledda.blogspot.com I hope you can help me. Thanks!
Hi Kristine,
I examined your Template now. But didn't see anything related to Facebook comment box in your Template. Follow above steps again and reply here. I will help you to add Facebook comments box to your BlogSpot blog.
Yeah. I decided to revert it back. I figured that I haven't used the right html for step 7. I appreciate your effort examining my template. Thanks and more powers!
Hope Facebook comment box works well on your BlogSpot blog. Thank you for your feedback Kristine.
When I hit on "save" button on Facebook "Edit Comment Settings", it cannot save. I hit the button but it doesn't work and I can't save the changes.
Nikos, Make sure you added correct Application ID. And also check out your Internet connection. If the problem is still remaining, delete the cookies and follow the steps again. If you have any question related to FB comment box, reply here. I will help you to install it on your blog.
Hey Chamal,
Any chance to make it work inside tabs together with blogger comments? I was using other script and it works ok, but the problem is that it doesnt show facebbok comments on static pages. Your script seems to work on static pages but I can't figure out how to change it in order to have it inside tabs. Any idea?
http://www.roadsideletters.com
Hi Paluch,
Yes, we can use both Facebook and Blogspot comment systems together in Blogger within tabs. But need some codes to do. Make sure your tabbed widget code includes conditional tags which hide comment box from Blogger static pages.
Yes, this tutorial is all about Facebook comment box with notifications. I will try to post another tutorial on adding tabbed comment systems on Blogger. Thanks for your idea Paluch.
I actually want to show it on static pages, but the code I use that comes from http://www.jsblogstop.com/2011/03/blogger-how-to-add-facebook-comments.html doesn't work on these kind of pages. I added a conditional tag but still it doesn't show. That tutorial is quite old and your code is very different, so I don't know how to change your code to put comments in tabs.
Maybe you could write a new tutorial about how to add tabbed blogger and facebook comments with notifications and working on static pages. I think there is a lot of people who would like to have it in their blog. Most tutorials about tabbed comments are at least two, three years old, so a bit outdated.
Thanks
I did as asked but never worked, Really frustrated now >:( have been trying to do it since past 2 days Please help 🙁
Hello Rock, Make sure you added the Facebook comment box code in the proper place. If you can't find out the problem. reply to this comment with your blog address. I will help you set up the Facebook comment box in your blog.
My blog address is http://www.hmhao.blogspot.in
And the problem is that, I do everything as said but the template never gets saved
I didn't found the Meta tags and the HTML code of Facebook comment box in your blog. Make sure you followed above instructions correctly and added the codes in proper places (placing in wrong places might cause Not to save your template and not showing the Facebook widget). Recheck and reply here if the problem still occurs.
I don't know how but I finally got your facebook comments,Please do check If I have doen anything wrong, Have Tweaked it a little, But Am not getting any notifications on FB though , PLease helo ????
Also I wanted Blogger And facebook comment box side by side can u tell me how to do that ???
And thank you so much for all your help in advance !!!
After adding Facebook comment box code into your BlogSpot blog, you need to make user-self as a comment moderator. Only comment moderators can receive notifications for comments on your blog. Make sure you can control the Facebook App.
To use both Facebook and Blogger comment systems, you need to add a tabbed widget.
Hi bro! I'hv implemented this code and working like a charm but I and not getting the notification of the comments. Plz help and check where I am doing it wrong. My blog is hinditracks.blogspot.com
Thanking you in anticipation.
Hi Angraj, I checked your website. You didn't placed the HTML and meta codes in proper places. Recheck and add the FB comment box codes in relevant places. If your problem is same, reply to this comment, i will help you to get notifications to your Facebook profile.
Thank you.
not working on my blog
uvasclinic.blogspot.com
Usman, You didn't place the comment box code in proper places. Check your blog template to make sure you placed in the correct place.
its not working on my blog i don't know why
what is your blog address?
Thank you for the guide. Please I find it difficult to save the template after editing. Help please. Blog Address: http;//www.talknigeria.com.ng
Thanks
Stanislaus, i didn't find the Facebook comment box code on your template source code. Check your template again to make sure you followed above steps correctly.
The reason your template doesn't save might be you mistype any code (ex:without ending tags) or your internet collection might be low.
Reply me here, you get the same problem again. I will help you set up Facebook comments on your blog.
Thank you.
Hello Chamal,
please check my template source code, here is my blog =
http://naja-also.blogspot.de/
I have followed all the steps but it does not work for me.
Only the last Step 7: "Now paste one pieces of HTML codes of Facebook comment boxes just below of the above codes." … I'm not sure what piece of HTML code you mean. I used this:
"Facebook comment box style #1 for white color background templates"
Is that supposed to be a code?
Anyway, if you could help me get the facebook comments box to appear, I would love that.
Thanks
Hello Michael,
The HTML code for Facebook comment box Blogspot is showing below each examples.I removed social content locker, so you can copy the HTML code easily.
Michael, I saw that you have added Facebook comments box to your blog. If you want to get notifications to your Facebook profile, make sure you set up the website address correctly. By adding country-based urls (ex: blogspot.de, blogspot.jp) in Facebook app settings page, you will not get notifications from certain people.
I am looking forward to help you set up the Facebook comments on your BlogSpot blog. If you have any problem, share it with us here.
Hello Chamal,
your HTML codes below each examples (Style #1 and #2) are showing up now, thanks very much for that. I have added Facebok Comment Boxes for a number of my last entries on blogspot manually by following this guide:
http://www.devetol.com/how-to-add-facebook-comment-box-in-blogger/
However it would rather use your method, as the comment box would not need to be added for each (new) posting separately. I'm not sure whether my blog uses a magazin template or not – would you be able to tell? Depending on the answer I apparently would need to remove the highlighted part of the code in yellow, explained under step 7 / customazation / second bullet point from above.
Should I better remove the individual html codes of each of the few postings?
In regard to notifications, you mean I should avoid using country based URLs in Facebook app settings page ….. does it mean I should just use the .com domain like this?
"http://naja-also.blogspot.com/" instead of "http://naja-also.blogspot.de/" ….. is that right?
Thanks very much for your help. That's nice of you.
Michael
Hello Michael,
You don't need to worry too much about your Blogger template. Yes, it's a magazine template. so you would copy the whole code and place it in the proper place. What those highlight codes do is that only execute the code in Blogger post and static pages. That means the Facebook comment box will not show on the home page (That we don't want!).
Yes, i suggest you to remove individual HTML codes. By using this method, you never need to worry about the Facebook comment box. This script will show the comment box in every individual post and static pages automatically.
If most of your readers are coming from blogspot.com and you won’t receive notifications for those comments, I would suggest you add .blogspot.com version.
Here is a tutorial on how to prevent Blogger blog from redirecting to country-specific domain. You can follow the instructions on this post to redirect country-based traffic to the .com version.
http://www.labnol.org/internet/prevent-blogger-country-redirection/21031/
You can prevent this issue very easily, if you use a custom domain name for your blog.
https://www.pitiya.com/how-to-set-up-custom-domain-name-in-blogger.html
Do let me know whether you have any problem setting up Facebook comments on Blogger.
Thank you for your appreciative feedback Michael.
Hey! Thank you so much for this easy to follow guide. For some reason, even though I followed your instructions beat by beat, it's not working. I don't get any error messages at all on my HTML template editor , but when I check the posts, nada. Tried it on FireFox and Chrome and it's not working.
Any idea why this could be happening?
Thank you very much!
Hi,
I think you might have placed the HTML code of Facebook comment box in wrong the place. Please check your Blogger template's <data:post.body/> code again and add the comment box code to the correct place.
Tip: If your blog template has three similar codes, add Facebook comment box code to all those places and then remove one by one to find the correct place.
If you have any problem adding Facebook comment box to your blog, reply it here. I will help you set it up.
thanks for sharing this article. thanks a lot..
Thanks for taking time to write this easy guide. I am really impressed with your post.
Pls the facebook comment box is not displaying on mobile devices.
Can you provide me your blog address?
Hello Chamal, please REPLY to this as soon as possible. I need a method to automatically add facebook comments for every blog post I publish. Doing it manually is ardent job. I found a method for wordpress… butcouldnt find one for blogger. can you help me in this one?
Yes, Lance, The steps i explained in this tutorial is how to add Facebook comment box to Blogger automatically and get notifications. Follow above instructions and add Facebook comment box. Let me know if you have any problem. I will help you install Facebook comment box on your blog.
not working for me??????/
notfication not received
Vishal, you should create a Facebook application in order to receive notifications to your email. If you followed above steps correctly, you should receive notifications.
If the problem exists, please let me know. provide me your blog address.
thanks it worked for me
when i click to make it public for visitors they want me to to update app details what is the problem ?
Yo Chamal! Thanks for the tip last time. Sorry for troubling you without trying out the code before. You should mention in your post that the auto-commentbox code only works when the code is written in the html template.(Doesn't work if we place the code in layout or the post itself). This was the only reason why the code didnt work in my blog before. Now as I have implemented it in my main template, its working nicely! Thanks again. This trick would have completely slipped my mind, had I not seen your article 🙂
But there still seems to be a small problem. The comment box in my site (and as given in this post) is NOT optimized for mobile. Which means it will NOT appear in mobile sites. I should not write URL here, so I'm just giving a blog title. There is a clever blogger at [TheGundrukPost] who has implemented Facebook comment-box and hovering like button(I think from his own implementation technique). Can you help me reproduce the same effect. I need to have comment for my mobile site too. Thanks.
My blog is [GetLostProblems] if you should know. Just google. Tell me whats wrong with my comment box implementation okay? Thanks!
Hello Lance,
Yes, if you implemented Facebook Comment Box code in Blogger layout boxes and posts pages, this method wouldn't work, as there are a few elements such as Blogger data tags which only work on Blogger template.
By default, Facebook comment box is not responsive. Uses JavaScript and frames. There are a few ways to make the Facebook comment box mobile-friendly on WordPress and Joomla. But, i couldn't find a way to make Facebook comment box responsive on Blogger. (And i didn't try to make it!)
Lance there is no any restriction to share a useful page URL here. I searched on Google, but couldn't find the tutorial page. Can you share the page URL here?
I checked your blog and saw that you haven't properly set up the Facebook comment box code on your template. Revert back and follow each steps respectively. I found that you even didn't add the xmlns:fb tag. No Facebook cookies variable definition on the code.
Let me know what happens on your blog.
Thanks for reply Lance. Glad i could help you.
Very necessary article for beginner. Thanks for sharing.
Kiron thanks for your comment. Glad you found this article is helpful. Look forward to hearing more from you.
Hi Chamal! Your code is working perfectly fine on my site, however, I am not receiving the notifications. I can see all the comments on Comment Moderation Tool, and I've added me as a moderator on it as well. Still I am not getting any notifications on it. Is there any way that you could help me out? My site is http://www.chordzone.org
Hi Sudhin,
Glad Facebook comment box code is working perfectly on your blog. Make sure you comment NOT using your Facebook account. You can comment on your blog through another account or Fan page account.
Let me know if the problem still exists. I will help you get comment notifications to your Facebook account.
This is very effective for me. Thanks for your article.
Hi Mayedul,
Add Facebook comments to blogger is not difficult if you followed above steps correctly. Glad you followed above steps and successfully and installed the Facebook comment box on Blogger.
Thanks for commenting here. Look forward to hearing more from you.
This is very effective for me. Thanks for your article.
Dear.
i'm from Sindh,Pakistan.
i used your trick, i applied blogger facebook comment box but it doesn't appear in blog's Page. it shows only blog post not on Blog Pages.
so please help me & tell me that how to apply comment box in blogger Page also.
thanks.
I have mentioned how to show Facebook comment box in blogger static pages. I think you couldn't read above statements. To your notice, here is how to do it.
Go to your Template editor and find the HTML Facebook comment box code. Then find below conditional tag/code line.
<b:if cond='data:blog.pageType == "static_page"'>
remove it and make sure you also deleted the closing tag of above code.
That's it! Looking forward know to how it works for you.
Thanks.
Hello again Chamal,
Thanks for your concern regarding the use of xmlns:fb in my blog. However, you must have landed in the wrong blog. My blog has it configured. (See source in this link: view-source:getlostproblems.blogspot.com ). You will see in line no.531 that the metadata are also properly configured.
I had fb comment box already implemented, about a year ago. So everything works out great. I just didnt know the trick involved in auto-posting comment box for each new post. Thanks for that!
This is the blog I mentioned last time [ http://www.gundrukpost.com/ ]. Please study their layout for mobile. I am impressed by their simplistic design.
Also I've noticed, when you google "The Gundruk Post", only their result is at the top & comes in expanded form (that makes it standout and must have got much impressions from that. I'd like to do that too. Any ideas? )
Hello Lance,
Glad Facebook comment box works perfectly on your blog. I just specified Facebook comment box to appear on specific pages such as post pages. Do you get notifications for comments?
In the case of mobile design, they have used a responsive theme. You too can use a responsive template on your blog, so the screen will adapt to the screen resolution.
The reason your blog don't appear for certain search term is that your blog's SEO is poor. Read my complete Blogger SEO guide to learn how to optimize your blog for search engines.
Do let me know how it works for you.
Yes Fb comment box works like a charm! I have just one problem with it. Whenever someone comments, I receive a message similar to the one you've posted in your article.
This is the format: "[SOMEONE] has commented in your blog [MY_BLOG_LINK]". The problem is, that wherever I comment from my blog – be it just from [HOME] or one of my [PAGES] or [POSTS], I always get the same message.
Therefore, I know that someone has made a comment, and can also see it in the developers app moderation tool , but I do not know the EXACT link or post where the comment came from. That is a hassle I have had to face.
I am thinking of implementing DISQUS in my blog. What do you think? I would appreciate if you could give me hints about making Tabbed comments for different [Facebook], [Disqus], and [Blogger Default] Comment boxes.
-x-x-x-
On a different note, I found out that those things that show up with Main Site Link on google searches – They're called Sitelinks. Your [THIS] site doesn't have sitelinks as well. Here's an example of a site using sitelinks [This leads to google search : The gundruk post > http://goo.gl/xktsoi ] . Help me make one if you have time. okay? Thanks in advance. Hoping for a reply soon ^_^
Hello Lance,
Yes, even through you receive a short message on FB, you can actually find where the comment is located. Just go to https://developers.facebook.com/tools/comments and select the particular app. Then select on "Moderator View". Hover on "Visit website" link and you can see where the comment is located on.
Yes, Disqus is far better than Facebook comments as my opinion. It has a few versatile features than Facebook comments. You can create a tabbed widget to include Facebook, Blogger and Disqus comments. It needs a few codes. I have seen many bloggers are using these types of widgets. Simply search on Google and find a good tutorial. If you couldn't find, check out Blogger Template publications and search for templates with tabbed widgets.
No, ProBlogTricks also has site-links on Google. But, Google has its own technology to detect user interests, so can decide when and where to show sitelinks in SERPs. Your search page direct to a Google country domain. The reason Google shows sitelinks for your domain in local search results might be the blog is optimized for a regional audience. Check the ProBlogTricks on Google.com and you'll find it also as site-links. (remove history (Google), clear cache, cookies, else you won't see it correctly)
Actually, no anyone can control the site-links in Google. But, you can demote site links through Google webmaster tools. Sitelinks is a good indicator that Google regards website as a brand. So you need to build a few backlinks and post quality content on blog. It could takes months or only a few weeks. Take a few hours and work on your blog. Create social channels for your blog and build a few links with the anchor text of your brand name.
Hope this helped you. Let me know if you have any other question.
Hi Shamal, I'm blocked on step 5 I cannot trace in my template < body>. Until now I didn't save nothing because of this. My website is fredericosantos.com. You ve already help me once I hope you can resolve this one more time 😉 thanks
Hi Frederico,
If you can't find <body> tag, then simply search this code: <body
You'll find only one code. I have found that your blog template has styles for body element too. Do let me know if you have any problem.
hey dude I've tried your method to add fb comment box to my blog http://www.makemoneyblogging.in but after doing this the comment box did not appear then i tried back another method, still comment box not appearing can you please check my blog at once to find out actual problem…
You haven't followed above steps correctly. Make sure you placed the Facebook comment box HTML code just below of proper data tag. Follow above instructions correctly and let me know how it works out for you.
Thanks a bunch, worked at first try but seems like I can't receive notifications on both personal and page Facebook address
First add yourself as a comment moderator, else you won't receive notifications. Then logout from your Facebook account and comment on your blog through another account such as Yahoo. Let me know how it works out for you.
sorry it is not working for notification i already allowed all options but when they reply on comment i can't get notification also my user . Please help !
Did you add the appropriate blog URL? If you don't use a custom domain name for your blog (use the default sub-domain), then your blog should be country redirect. Make sure you set up the blog address correctly in Facebook APP settings page. Let me know if the problem still exists. I will help you add FB comment box in Blogger.
Yes my blog was used custom domain and i added it in app setting such as app domain ,Site url,Mobile site url . fill app domain with my domain without http. but i seem not getting any notification to my moderator page .. I have been tested by using other facebook account. Help me please and check my site [7khmertv.com]
Go to Facebook developer apps official web page and click on “Create New App” button.
And that url would be … ?
Here's the link: https://developers.facebook.com/apps
Hello. I have add your code in my blog in blogger (http://iandroidplanet.blogspot.com) but I am confuse to entering facebook comment box. I have used a responsive blogger template. plz help me.
Hello Bikash,
Yes, Facebook comment form is not responsive. It uses iframe tags. There are a few ways to make the Facebook comment form responsive, but they are not very useful.
Hey Chamal..!!! you saved my day! Finally got it working (though I've to remove 'something' inside the code)..I owe you a week or 2 of exposure…drop by my site then u know what I mean. But the main thing is, U are God-sent! Cheers!!
Ha ha… Abrahm, glad it works eventually on your blog. Let me know if you have anything else to ask from me. Thanks for kind of words.
Hi my blog is http://www.sankz.com I am unable to integrate this on my blog . Please help
Hi Sankalp,
I see you have followed the steps correctly. Revert back and check out where you got wrong. I think you didn't pasted the Facebook comment box HTML code in proper place.
Thank you for this sir! It works on my blog! http://adberv.blogspot.com/
Now readers can comment using their facebook account. Cheers!
Great! Let me know if you want to know anything else from me.
please i have tried the above code and i got this error message when trying to save the template
Error parsing XML, line 8, column 134: The reference to entity "source" must end with the ';' delimiter.
please help me out heres my blog url https://www.yctalks.blogspot.com
Hi Solomon,
I can't visit your blog. Make sure your blog template is from a reliable place. There is a malicious code installed on your template.
In your case, above warning message appears when your blog template isn't coded properly and/or you place the Facebook code without a part of it. Revert back and check out your blog template structure. I will help you set up Facebook comment box on your blog,
Hi Chamal. Thank you for the detailed tutorial. I've walked through and double checked each step about 10 times and nothing is appearing. Do you mind taking a look? http://www.bwanaluana.com/
Hi Lindsey,
I visited your blog and saw that you have already installed the Facebook comment box. Let me know if you are not getting notifications to comments on your Facebook account.
Hi, Its not working for me, followed all the steps. Also I was not able to add the notifications part in facebook. Thank you. My blog is : cookwithrenu.blogspot.com
Hi renu,
You haven't added the JS and HTML code of Facebook comment form. Follow the tutorial and add them. Let me know what happens with your blog.
I carefully followed all the steps, it didn't work on mine. 🙁 http://www.buzzstalker.com is my site
Your blog template has a tabbed comment widget. You just need to set up the notification system for Facebook comments.
Thanks you for this info. I only have problems by testing my facebook integration on my website, blogspot. I m unable to verify, so I m not allowed, and they don't give me the script codes
Sorry for too late reply. Did you follow the above steps correctly? make sure you chose the website as the application platform. Else you might not receive the script code. Read above steps carefully and create a new app for your blogspot blog. Then let me know if there is the problem still exists…
There's no dispute that Facebook is a huge deal. I mean a really BIG deal. Just recently CNN reported that for the very first time Internet users spent additional time on Facebook Comment Box for blogger.
Wow, that's a good news for especially bloggers who have added Facebook comment system on their blogs. Actually, it's not a surprise that many people spend additional time on Facebook comment box, because it really increase the engagement than traditional comment systems.
Hi CHAMAL PRIYADARSHANA ,
Friend please suggest me… i dnt get this code body expr:class='"loading" + data:blog.mobileClass' in my blog http://www.8eworld.in/
Please suggest me, now what i do?
Your Body HTML tag is <body class='index'>
Follow next steps and add Facebook comment box to blog.
But i dint get the code in point 5.
Please help more…
You need to find the body element of your Blogger template. Then add the particular HTML code right after the code. Search this code: <body
Let me know if you want further assistance.
I need a comment box that should be working on mobile device also
Follow above steps and you'll get a Facebook comment for your blog also. If you need any help, reply back here and i will help you.
Hi, thank you for this wonderful tutorial! I did everything as instructed but it's not appearing on my blog. I'm not sure what I did wrong or if I missed something. http://www.ladyrattus.com/
Hi, The problem is you didn't place the Facebook comment box HTML code in the original place. Please revert back and place the HTML code anywhere possible. After appearing the Facebook comment form, you can remove each code one by one. Let me know if you are struggling to add the Facebook comment box.
Please help, coded didn't work on my blog
http://www.naijayouthsblog.com
Hi, Thank you for the tutorial. I was able to add the comment box, but I'm not getting the notifications. The blog address is http://thebeatlesthroughtheyears.com (it's a blogspot blog with its own domain name.) Thanks.
Hi Erica,
Facebook comment box doesn't appear on your blog post pages. Only in Homepage. Make sure you placed the HTML code for comment box in proper places. I recommend you to check your blog template code again and fix this error. If you still can't receive notifications, let me know. I will help you out.
Thanks.
If you set up all things right, yet don't receive notifications for comments on your blog, then the problem is on your Facebook APP settings. Please go to Facebook app page and check whether you have input correct values for each important fields. Make yourself as a comment moderator. Else you won't receive Facebook notifications. Let me know if you don't receive notifications for comments.
Thank you for replying. I see what you mean and I've moved the code to one of the other places you mentioned. I think it's showing up in the blog post pages now? But, we're still not receiving notifications.
Yeah, everything seems to be set up as it should in Facebook APP settings. Maybe I don't have the comments box code where it's supposed to be, because I just noticed it seems to be on the static pages too? 🙁
No, If you did everything right, followed above steps correctly, you should get notifications. I saw the Facebook comment box appears on your blog. So the problem with your app settings. I have explained how to hide Facebook comment form in static pages in this tutorial. Please check it out, if you want hide it from stationary pages. And check again your Facebook app settings page. Make sure you have chosen the website option as the medium.
I have chosen "Website," yes. My Facebook Developers page looks slightly different than the screenshots you have on this site. I guess Facebook has updated it's look since your original blog post, but I was able to figure out where to go to choose "Website" anyway.
When I visit this link: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID and replace with my APP ID, I don't have all the same options your screenshots on this page show, after I click on "Settings." But I can't see how that might make a difference?
I really appreciate all your replies. I believe I've followed all your steps correctly, but I'm still not getting notifications. It is very frustrating, indeed. I just don't know where I've gone wrong. I would remove it all and start over, but I'm not sure that would make any difference. Thank you for your help anyway.
Great article! Congratulations!
Diogo, Glad you found the article useful. Please let me know if i can help you out in other way.
doesnr work on me http://www.buzzstalker.com. cant find step 3
Hi,
you can find the <.html code in the second line of your blog template.
hi admin kindly chek my blog fb comment box not showing and other on default is also plz help me
my blog is
http://globalfair.blogspot.com/
Hi Syed,
I check your blog template source code and found that you didn't place the HTML code for Blogger contact form in proper place. Please check the tutorial again and make sure you put the HTML code in proper place. My suggestion is first add the HTML code in all two or three places you encounter. Then you can remove one by one. Let me know how it works out for you.
Hi, I added the last code everywhere you suggested but I don't see a comment box appearing. Could you help me figure out if I need to change something? This is my blog: keertisurapaneni.blogspot.com
PS: I have removed the last code now. Please suggest the code for my blog so I can test it.
Hi,
I checked your blog. It seems like you didn't add the first few codes on your blog template. Please revert back and check your blog template again by following above steps. Find what you missed. I can help you install the Facebook comment box on your blog.
admin blog comment box not showing on http://globalfair.blogspot.com/ plz tell me what i can do to visible it on my blog
I answered to your question above. Please check it out and let me know how that method works for you.
The last step isn't working for me. After I add the code for the comment box, it just doesn't show up.
Did you add the HTML code in all the places you encounter?
Hello Chamal.
Thank you for a great artical. Unfortunately it didn't work for me.
I have done every thing as instructed.
the only step that i had problam with step #4.
I have put the new code above the body but i didnt find what code to replace.
I ll be happy for your help 🙂
My blog is on http://www.odeliaa.com/
Thank you 🙂
Odelia
Hello Odeliaa,
Just find </head code on your blog and place the meta tags just above of it. Then follow other instructions.
Let me know if you want any help from me.
Thanks.
Didn't work 🙁
I have uploaded the original template and done every thing again.
And i don't have Facebook comments on my post pages.
Ill be happy for your help and any advice.
Thank you again
Odelia
http://www.odeliaa.com/2015/04/blog-post_82.html#more
Odeliaa,
I checked your blog again and seems like you followed above steps correctly. But, i couldn't find the HTML code for Facebook comment box of your blog source code. Make sure you placed the comment box code at right places. I can't say where it is located without checking your blog source code. If you need my personal assistance, you can contact me.
Hey Rakehysh,
I wrote a blog post and the facebook comment box is working on Blogger. I shared my blog post on facebook recently and many of my friends commented on my Fb post. But I don't see those comments in my blogger. Is there a way to integrate Fb and blogger, such that comments made for a blog post on Fb are seen in the blogger post as well. The same functionality works for the FB like button though.
Hi Keerthi,
I don't know is there any other way to integrate comments on Facebook with Blogger. As fas as i know Facebook uses API and Application id (which is unique to your blog) to connect comments on each page of your blog. So, i don't think we can't connect comments on Facebook with Blogger.
I will let you know if i know any other way to connect facebook comments with Blogger.
Sure, thanks Chamal
please i followed all procedures but when i got to the last step i couldn't go further because i cant find any of those tags, please help me out, i really love to have it on my blog.
Hi Bamike,
I can't actually find the place where you should add the HTML code of Facebook comment box. This could vary as your template type, coding style etc. So find one of above codes on your template. Use Blogger inner search function. It is not actually hard. If you need my personal help, you can hire me for that.
Thank you.
okay sir
followed all the steps but comment box is still not there.
Help please. My blog: http://tailoredfortravel.blogspot.in/
You have follow most of above steps correctly. But haven't placed the HTML code of Facebook comment box on correct places. Please follow above steps again and find the correct place where the Facebook comment box code should be placed. Reply here if you still have the problem.
that was very helpful for me and i added facebook comment box to my blogger
i will come back often to visit this page
Glad you were able to add Facebook comment box to your blog. Let me know if i can help you in any other way.
Thanks for sharing your comment.
my blog is densolon.blogspot.com. its not working for me, you can see that in my posts there is a 1COMMENT indicating that 1 commented but my comment box wont show up even if in my settings, comment box is embedded. i followed all of your steps but it wont work for me. please reply.
Is that number for comments of Blogger comment form? or for comments of Facebook comment form?
I couldn't find the HTML code of Facebook comment form. The reason because the comment box doesn't show up on your blog is that you haven't placed the HTML code in proper places. Please revert back and fix this issue. Let me know if the problem still exists.
Hi! I am pretty sure I followed your instructions to the T, however, the facebook comment box is not appearing on my blog.
AnnaMedBella.blogspot.com
I put the comment box code below both 'data.post.body' codes and that didn't solve it. Please advise.
Hi Anna,
First sorry for my late reply. Your comment was hidden in my comment section!
I checked your blog today. Seems like you have followed every step well. But, comment box doesn't appear.
Did you add HTML code to every part of data.post.body? Try this method. This should work well.
Let me know if the problem is still existing. If you want me to set up comment box manually, you can hire me now!
Thanks.
Wow. Its working now. I was facing problem about it. Now my problem is solved. What a solution it is! just aw-sum. Thanks for sharing your valuable experience. Waiting for another one. Again i will visit here.
Thank you Mayedul. Let me know if i can help you in any other way…
some of the comments on my posts of the blog are only seen when i open my blog with my mobile phone but not on pc.
is it so that comments from mobile are only seen on mobile and from pc’s on pc.
Did you follow the entire steps as i mentioned above? If you did, you should not find any problem. Please revert back to your Blogger template editor and follow the steps above again.
and i am not finding the comment moderation tool as well ….. plz help
Hi Chamal, I tried ti add this comment box for my blog. I couldn’t do this. Whats wrong. is it because of my blog template? http://www.lakmalplus.com
Hi Lakmal,
You have not followed the instructions i mentioned above. Please follow it correctly and let me know if the problem still exists. I will help you set it up on your blog.
The problem is there is error in the code, not implementing on my blog
Error parsing XML, line 3, column 16: Open quote is expected for attribute “xmlns:fb” associated with an element type “html”.
Not Helpful at all. Written in confusing manner.
Vinod, read and follow the instructions and you will be able to add Facebook comment box to your blog.
Error parsing XML, line 213, column 20: Open quote is expected for attribute “{1}” associated with an element type “expr:content”.
^^^^getting this error using sidebar template
newbie here.. i already follow all the instructions.. but, that was error message appear.. can you help me? nice article btw
here the ss http://imageshack.com/a/img909/6097/128bS8.png
help me pls
Helo, can you help me work on my blog, add facebook comments and more… thanks
hello!! i follow all the steps but i vcant make it work!!! i can t add the bf comment box…..
Same issue as above, Blogger says:
Open quote is expected for attribute “{1}” associated with an element type “xmlns:fb”
And, FB comments wont apear.
same here
hii… chamal thanx for this tutorial……
i need your help in setting up social share for unlocking download content on blogger
please help me…
nice tutorial, but i want to know is this necessary to make a facebook app first?
Yes. If you want to receive notifications for comments,you must create a Facebook app.
pls i dnt see were to replace this in my HTML
Pro Blog Tricks‘ property=’og:site_name’/>
<meta content=’http://www.facebook.com/problogtricks
The codes are partially faulty, the ‘ and ” s are creating problems.
I have been longing for notification as sometimes people spam my blog. Hence I removed the facebook comment box. Now with your post, I can now add back.
Error parsing XML, line 7, column 16: Open quote is expected for attribute “content” associated with an element type “meta”.
This is gd for those who need step by step tutorial like me.
keep the good work!
If you follow the instructions and it gives you errors when trying to save the template, it is because the pasted html has a different font to that in the Blogger template window…… …specifically the single and double quotation marks….this fixed the save issue….and comments worked for me (but not notifications)
I also don’t like the fact that when someone comments, Blogger tries to force them create a Google plus account, or use a temp Blogger account…it would have been nice if it let them use their Facebook id.
Thanks for this, i just replaced ’ with ‘, and it worked perfectly
It didn’t work on my Page. Couldn’t add the Code of the last Step. Blogger doesn’t save the code. All Codes are implemented as shown above, but no Comment Box…
Nice blog i like this post i am looking for such information long time & finally i got it from this post,Thanks for sharing this.
hi, it’s very helpful thanks chamal.
Hi Dheerandra,
Glad you liked it!
Im stucked in Step 4. Where will i put this?
Now replace below block of code just above of code.
Where do you exactly mean just above the ” code” ?
same here. what exactly will i put the codes above the head? or below the head
Hi dear, I follow your instruction and at last active google comments in my blog. But Facebook comment plugin not activated.
Did you refollow the steps above?
Check your process again to see where you’ve been stuck.
How to add fb comment system to blogger pages also.Plese explain it?
Machan lankawe ekek wachayen adambarayi uba ganah 🙂
Thanks Ashen. 🙂
Thanks for this awesome tips, I have done !
google not indexing these comments… there is any problem?
No, Rajesh. Google index Facebook comments. It might take a few days to Googlebot to crawl and index content. But, eventually it will.
Comment Plugin only work in mobile, but not working in desktop (webview), how to fix it, please?
Hey, Thu!
You have an awesome blog. And I love Maths! ❤
It seems Facebook comments plugin works well on the desktop version. Let me know if you need any help for anything else.
The important thing is to choose whether to implement the facebook comment box code directly in the html base code of the blog or to add it in the layout as a widget. It has to be carefully done.
Sometimes the javascript code may not work properly, which needs to be slightly tweaked in order to make it work.
How I can find URL for Image-Link-Of-Blog-Logo. Have you made the article about it? Because my link lost thumbnail when I share it on whatsapp. I think because I fill the wrong url.
Thanks in advance.