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 to increase the quality comments and user engagement. When you are using the Facebook comment box on your website, you can reduce spam comments and maintain the quality of your comments.
Another advantage of using Facebook comments plugin over others is Facebook allows people to share their comments on their timeline.
So, if you have installed 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 crawls and indexes 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 search index. So, your blog will get more traffic from search engines to your blog.
That’s a very good, right?
Yes, usually Facebook comments get more engagements, you can expect an increase in traffic in upcoming days. But, it is not guaranteed.
In an earlier post, I shared a detailed post about adding a Facebook comment box to Blogger with notifications enabled. That post got many comments when Facebook decided to change their design. Main problem of many bloggers was how to create a Facebook app and add a Facebook comment box to Blogger with their new interface.
So, I decided to take all those steps on my shoulder and show you exactly how to add Facebook comments to any BlogSpot blog.
Therefore, in this tutorial, I will explain to you how to add new Facebook comment box to Blogger with notifications. At the end of this tutorial, you’d be able to embed Facebook comment plugin to your BlogSpot blog and get notifications for each comment and reply instantaneously.
If you're spending pretty much time of day on Facebook, then this feature will be a lot helpful.
So, if you have installed 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 crawls and indexes 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 search index. So, your blog will get more traffic from search engines to your blog.
That’s a very good, right?
Yes, usually Facebook comments get more engagements, you can expect an increase in traffic in upcoming days. But, it is not guaranteed.
In an earlier post, I shared a detailed post about adding a Facebook comment box to Blogger with notifications enabled. That post got many comments when Facebook decided to change their design. Main problem of many bloggers was how to create a Facebook app and add a Facebook comment box to Blogger with their new interface.
So, I decided to take all those steps on my shoulder and show you exactly how to add Facebook comments to any BlogSpot blog.
Therefore, in this tutorial, I will explain to you how to add new Facebook comment box to Blogger with notifications. At the end of this tutorial, you’d be able to embed Facebook comment plugin to your BlogSpot blog and get notifications for each comment and reply instantaneously.
If you're spending pretty much time of day on Facebook, then this feature will be a lot helpful.
Another advantage is you can add moderators to manage comments. So, even you're offline from work, you can assign a friend or a team member to moderate comments.
Without further ado, let’s start adding new Facebook comment box to your Blogger blog.
This tutorial has three significant parts. They are,
Without further ado, let’s start adding new Facebook comment box to your Blogger blog.
This tutorial has three significant parts. They are,
- 1Create an app for your blog
- 2Instant Facebook Comments plugin
- 3Enable notifications for comments
- 4Moderate comments (optional, the later part after adding a Facebook comment box)
Also you'll learn how to...
I will explain each step one by one. Please follow each step correctly.
Advantages of Pitiya Facebook Comments Plugin
Here're a few reasons why Pitiya Facebook comments plugin for Blogger is the best one for your blog.
-
Regular updates on code: We'll update the code regularly to adapt on Facebook SDK code changes. We'll handle them all!
One final result after following this tutorial: Get Notifications for blog comments
Create a Facebook App
Note: Depending on the time, design of Facebook developer page might have changed. But, the steps are 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 Facebook developer apps official web page and click on “Add a New App” box.
Alternatively, you can hover over “My Apps” menu link and select on “Create New App” button.
Alternatively, you can hover over “My Apps” menu link and select on “Create New App” button.
Now you would see a pop out box to create the Facebook app. Type the name or your website name on the “Display Name” field. Enter a valid email address for contact email address. (Note: You can create an unique Namespace (link slug to your app) later on)
Now you have successfully created an app in Facebook. The next step is adding your website and business details, so Facebook can verify your identity.
Go to Basic settings to start adding those details. (Make sure the correct App is selected)
For instance adding website privacy URL is not optional. You must add it. And there might have some fields to comply with GDPR. If your BlogSpot blog doesn't have an Privacy policy page, you must create one now. You can either create one yourself, hire an attorney for doing it for you or just 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, make your Facebook app public by toggling the on button (check step 2 of screenshot below). Make sure you've specified the website URL you're going to install Facebook comments plugin.
Click on "Save Changes" button to finalize the steps in 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 Facebook Comments Plugin
Now you created a new Facebook app for your Blog. The next thing you have to do is installing 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 Themes section.
Step 2: Now you have to make some changes to your blog theme. So before we start making changes, first of all, make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 2: Now you have to make some changes to your blog theme. So before we start making changes, first of all, make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 3: Find this “<html” code in your template and front of this code, paste 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 below HTML element is located.
</head>
Now copy and paste below block of code just above of </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-Link-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'/>
<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='Your_FB_Acc_ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Customization
- Replace your blog title or blog name instead of Pitiya
- Copy and paste the logo image URL instead Image-Link-Of-Blog-Logo. The logo will appear next to your post titles on 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 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'/>
<meta content='article' property='og:type'/>
Step 5: Find below HTML code using above keyboard shortcut.
<body>
If you could not be able to find above code in your existing blogger template, then try to find below code. It should be located in your template.
<body expr:class=’"loading" + data:blog.mobileClass’
After one of above codes, paste 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>
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>
<script src="https://d1usxgweuglwuz.cloudfront.net/files/pitiyafbcp.js"></script>
Make sure to replace the MY APPLICATION ID HERE with your real Facebook application ID.
Step 6: Now you’re half done. You need to display Facebook comment box on your blog. You can put the Facebook comment box in your post and static pages manually. But it’s not an easy work to add a Facebook comment box to whole pages manually (think if you have 1000+ posts on your blog. Do you want to add the Facebook comments plugin script on each and every post? I guess do you don't.)
So we use a technique to embed Facebook comment plugin below of each and every page of your Blogger blog, so each time you create a new blog post, Facebook comments form will appear.
It's totally done automatically. To start adding the Facebook comments box, search 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 yield in not working Facebook comments plugin properly.
So try all code paces and select the correct one. In case if you’re not sure which code to add or didn’t work that method, then find below HTML code in your template.
<div class=’post-footer-line post-footer-line-1′>
or
<p class=’post-footer-line post-footer-line-1′>
I found right code easily. Check below screenshot.
Tip: Use keyboard shortcuts to find appropriate placement.
Step 7: Now paste one of the pieces of HTML codes of Facebook comment boxes just below of the above codes.
Note: We redesigned how Facebook comments plugin for Blogger works. Please check the demo by clicking the button below see examples in live action. Now, Facebook comments plugin is independent from JQuery, which means your page speed won't slow down a much after installing the plugin! 
Facebook Comments Plugin Style #1
This is a plain Facebook comments box style. If you don't want a fancy widget, then this is the best for you. 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 code for Facebook comments plugin for Blogger by completing two steps in below form.
Facebook Comments Plugin Style #2
If you'd like to make your blog's comment section wonderful, beautiful and of course, fun!, then you can't neglect this beautiful Facebook comments plugin for Blogger.
The beauty of this style is it solely depends on sure CSS3 animation so it doesn't slow down the website speed. And 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 code for Style #2 of Pitiya Facebook comments plugin by completing steps in the form below.
Customization
- Generally, the Facebook comment box would appear on the post and stationary pages. Stationary or static pages are stand-alone pages which won’t be added to archives. Usually, Static pages are best to add a contact form to Blogger, About page, etc. So if you don’t want to display Facebook comment box on static pages, please remove above code section starting with <b:if cond='data:blog.pageType == "static_page"'>.
- If your Blogger template is not a magazine template or designed for showing whole content in the home page, so you can display Facebook comment box on your blog home page or archive pages too.
- 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 upto 500 pixels, so update the value to 500 instead of 700. Also, you can remove the data-width=’700‘ CSS code and then Facebook comment box will adapt to the device’s screen resolution. Remember by adding an overriding value for the width of the Facebook comment box, it 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 comments plugin using CSS.
Step 8: Most significant part of this tutorial, Save your Blogger template!
Enable notifications for comments
Now you are already done almost every most 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 filter, 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 the your Facebook application ID.
Click on “Settings” link.
Moderate Facebook comments (Click on image to enlarge)
Now a pop out box would be shown, and you can change some settings. Make yourself a moderator (essential to receive comment notifications). Allow other options to login and comment on your blog. Set grammar filter to maintain the comment quality. Use comment composer to reduce the page loading time. See below screenshot. After making these changes, click on “Save” button.
Add Moderators — Set yourself up as a comment moderator to receive Facebook notifications
That’s all. Whenever someone drop a comment, even reply to your own 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 demo site.
Instant Facebook notifications for comments on your blog
Display comments counter
Now you've completed most important steps in this tutorial. If you want to display number of comments just below of post title, follow instructions below.
- 1In Theme 'Edit HTML' page, search for below code.
<b:if cond='data:post.title'>
- 2Now copy and paste the piece of code just below of </b:if> tag of above code. (check screenshot below)
<span class="fb-comments-count" expr:href='data:post.url'></span> comments
Click on image to enlarge
- 3Save your template.
Hide Default Blogger Comment form
If you're not interested in displaying both Blogger comment form and Facebook comments form in your blog, then you can easily disable default comments system.
Hide Blogger comment form
Moderate Comments
If you followed each step correctly, when you visit any of blog post where Facebook comments are enabled and you're logged into your Facebook account, you'll see an link to moderate comments. (It's known as Facebook comments moderation tool.)
By clicking on the particular "Moderation tool" link, you will be redirected to Facebook developers Comments moderation page where you can do multiple things based on page-level.
Visit this URL to go to Comments Moderation page based on 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.
Further actions...
Installing Facebook comments plugin on your Blogspot blog is just a part of a big game. Installing FB comments box does not solidicate your success of blogging. You have be clever, follow a good strategy and have a plan to grow your BlogSpot blog and reach to your ultimate goals.
That's why in Pitiya, we have launched a new program called Pitiya Milestones to help you out succeed in Internet marketing.
Do You Know?
This very blog, Pitya.com was started by Chamal Rathnayaka in 2012 with a ZERO budget in hand on BlogSpot.com.
Yes, he didn't have ANY money to buy a premium theme for his blog or even get a custom domain name! (Heck, what a poor situation!)
However, he was able to migrate his blog from BlogSpot servers to Bluehost servers to empower Pitiya by WordPress after about 15 months of hard work. Now he's making money on autopilot with his blog.
Do you NOT want to work hard that much time to see an progress in your business? (Your blog = your business)
Do you want to run your business on autopilot without worrying or struggling?
In other words, do you NOT want to depend on anyone else, especially GOOGLE?
(You don't need to be explained the difficulty of ranking first spot page for your targeted keyword terms in Google, right?)
Sign up for Pitiya Milestones over here and win marketing assets including lifetime subscriptions to popular online marketing tools that are worth thousands of dollars for free!
Pitiya Milestones is a rewards-based giveaway program where every participant can win something that will help to grow their business.
▶ File Name: Workdon |
▶ Total Download: 23512
▶ Today Download: 751
▶ File Size: 580 MB
Download Link Below
tags:
0 Comments