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!
239 thoughts on “How to Add Facebook Comments for Blogger with Notifications”