- 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 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.
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, cookie : true, xfbml : true });
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '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.
