There are billions of people actively using Facebook and people are much more affected by using this popular social media site. So as a Blogger if you expect more comments on your Blog then you should try to integrate Facebook commenting system to get more comments from Blogger. Integrating Facebook comment plugins has several good side for Blog but it has also bad effect. Because Googlebot don't access and crawl in Facebook comment section as a result if you have 100+ of comments per post they in Blogger's eye your comments count as zero. because Blogger only counts Blogger comments. Anyway there are huge comment spam spread out rapidly so many Blogger prefer other comments system than Blogger default comment system. So if you think to use other third party commenting system then you must try Facebook comment system. For integrating Facebook comment plugins we have to go through 4 steps, those are as follows-
- We have to create an app for your blog.
- Integrating Facebook comment box to Blogger
- Enabling notifications for Facebook comments
- comments Moderation setting
Creating a Facebook App
This is the first step for using Facebook Comment plugins we must create a Facebook App. But for creating an app you must have a Facebook account. And after that you will able to create a Facebook comment section. Just Follow the below steps-
Step 1 Go the https://developers.facebook.com/apps/link and Log in to your Facebook Account
Step 2 Under My Apps click on green color Create a New App button and a popup window will appear.
Step 3 From Create a New App ID popup windows write Display Name (You can't use Facebook or their name so choose other name for application), Namespace (Must be less than 20 letters) and select Category by using DropDown option.
Step 4 Finally click on blue color Create App ID button. And instantly you will get App ID with App secret.
Step 5 From left side vertical menu click on Settings and under Basic tab, now under App Domains field write your domain name without www. and under Contact Email write your email address. After that Click on +Add platform button. A popup window will appear from there click on Website icon.
Step 6 Under Website section fill up the Site URLby using your Blog URL. And if you haveMobile site URL then add URL on that field. And click on blue color Save Changes button.
Step 7 Now navigate to Status & Review section and select the Yes for making your App public. A confirmation message will appear, from there click on blue color Confirm Button.
Now our Facebook App ID has created and your Blog Platform has added. Now we will add the comment box in Blogger template.
Integrating Facebook comment box to Blogger
In this step we will do main task that we will add the Facebook comment box in Blogger template.
Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2 Click on Now click on -> Template -> Edit HTML->
Step 3 Now find the <html by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 After that Copy and Paste below code after <html
xmlns:fb='http://www.facebook.com/2008/fbml'
The full code will be like below
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 6 After that Copy and Paste below code before/above </head>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Spice' property='og:site_name'/>
<meta content='Your Blog Logo URL' property='og:image'/>
<meta content='YOUR_FB_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/BloggerSpice' property='fb:admins'/>
<meta content='article' property='og:type'/>
Customization
- Replace Blogger Spice with your site title.
- Replace Your Blog Logo URL with your logo URL
- Replace YOUR_FB_APP_ID with your Application ID that you have just created.
Step 7 Now Find the code <body> or <body expr:class='"loading" + data:blog.mobileClass'>
Step 8 And Paste the below code after any code from above.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Your App ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Customization
- Replace Your App ID HERE with your Facebook App ID.
Step 9 Now again find <data:post.body/> or <p><data:post.body/></p>or <div class='post-footer-line post-footer-line-1'> or <p class='post-footer-line post-footer-line-1'>
or <b:includable id='comment-form' var='post'>
Step 10 And Paste the any script from below after any code from above.
 |
| Facebook Comment Box with Light Color |
<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<div style="background: #FFFFFF;">
<div style="color: #333333; font-family:'Oswald',serif; font-size: 20px; text-align:left;">
<strong>Post a Comment</strong></div>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div align='right'><a href='www.bloggerspice.com' rel="nofollow"><small>[Facebook Comment Box]</small></a></div>
</div>
</div>
</b:if>
 |
| Facebook Comment Box with Dark color |
<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<div style="background: #444444;">
<div style="color:#FFFFFF; font-family:'Oswald',serif; font-size: 20px; text-align:left;">
<strong>Post a Comment</strong></div>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div align='right'><a href='www.bloggerspice.com' rel="nofollow"><small>[Facebook Comment Box]</small></a></div>
</div>
</div>
</b:if>
Step 11 Now hit the Save template button.
That's it. You have successfully added Facebook comment plugins in your Blog. And now we will set the notification.
Enabling notifications for Facebook comments
In this step I will show you how to enable notification. If anybody make comments in your Blog by using Facebook comment system then you will get the notification.
Step 1 Visit this web page https://developers.facebook.com/tools/comments/ and select your Facebook Comment App that you have created before.
Step 2 Now under Moderators field write your Name, In Blacklisted words you can list some words if commentator use then comment will be placed in the Review tab. Select Newest under Sort Comments By option. And Finally In Moderation section select Public. After that click on blue color Save button.
That's it, now everything is set. And when any user make any comments then you will receive notification on your Facebook page. If you need any further help then feel free to write me. Your Feedback about this tutorial always appreciable. Thank you.
Hello, my name is Aamir khan. I'm a 24year old blogger from Pakistan.
No comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.