How to Add Facebook Comment Box In Blogger Template?

How to Add Facebook Comment Box In Blogger Template?

23
data:blog.title
facebook

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.


App ID

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.


add platform

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.

basic tab

Step 6 Under Website section fill up the Site URL by using your Blog URL. And if you have Mobile 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.


status and review

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='&quot;loading&quot; + 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.


light comment
Facebook Comment Box with Light Color

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>


dark comments
Facebook Comment Box with Dark color

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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.

comment moderation


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.


settings tab

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. 
How to Add Facebook Comment Box In Blogger Template?
4 Stars stars - "How to Add Facebook Comment Box In Blogger Template?" There are billions of people actively using Facebook and people are much more affected by usin...

Post a Comment

Thanks for Tutorial Facebook comment box ..thanks :)

Welcome Faruq...really appreciate for your comment.

Fabulous Tutorial...!

Thanks for commenting.

Well... It doesnt work for me :(

Hi Jeliazkov...Most of the use make a mistake in Step 9..Suppose you will find < data:post.body / > code 3/4 times in a template but most of the cases if you paste the widget script after 2nd code then it will work. So try the widget again. I have tested this widget in Blogger Default, Custom, Minima template and it is working 100%. Thanks.

I am sorry i have tryed it several times and it still doesnt work. If you want i will give you admin roles to see.

Ok then, let me try...make me admin and send me details through my contact form-

http://www.bloggerspice.com/p/contact-admin.html

Thanks.

Thanks man, finally after a few tutorials i've tried... It works on my blog http://9komik.blogspot.com/ :)

Welcome Rizal.. But I have already shared latest version of facebook comment widgets

It is not working for me either.

Hey guys, I thought I would share my experience with this. In step where you can choose where to put lines of code (or or) you gotta try more of them. For example for me in the last step data.post.body didn`t work, only the last variation with "includable"

Hi Aldaine.. thanks for sharing your experience. I have mention that different template has different code, so for compatibility I have shared different code to make it work best.

<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'>

Thank You Soooooo Much
This is My Site. http://www.bogywogy.com
please Check is Everything is ok?

Hi Amir you can't judge any Blog without post...First you have to create post for generating page views....Thank you.

Hi, I did it before.
But then, all post has same comments.
What's wrong?

Have you tried the new version? If not please follow the tutorial from below URL and let me know is there any problem or not. :t

http://www.bloggerspice.com/2015/06/latest-2015-version-of-light-and-dark-Facebook-comment-box-for-Blogger-v2.3.html

Thanks Alot. Please check my blog and see if all is set. www.blogmallnigeria.blogspot.com is working on my blog.

pLEASE AM HAVING ERROR WHEN I COMMENT "OBJECT INVALID VALUE"

I just drop a comment in your Blog. It is working fine without any error. :)

Yes. sometimes it works perfectly, and sometimes it throes that error..

This comment has been removed by a blog administrator.
This comment has been removed by a blog administrator.
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *