Breaking News
Loading...
Tuesday, 14 May 2013

How to add Facebook Comment Box in Blog of Blogger With Notifications Enabled

How to add Facebook Comment Box in Blog of Blogger With Notifications Enabled
In 2009 Facebook developers introduced their best social plugin referred to as "Facebook Comments Box". This plugin is embedded in any web site or web log and guests will use their IDs of Facebook, Yahoo, AOL or Hotmail to depart a comment at your website.

Facebook comment for your web log will function a decent thanks to build your website a lot of participating and encourage readers to drop comments if they’re already logged in to Facebook. It conjointly is a supply of traffic since victimization Facebook comment shares the comment and post page on the visitor’s Facebook wall. One issue ought to be noted though: Facebook comment has no SEO price since it’s being displayed in Associate in Nursing iframe that Google won’t index. Comments created with the regular comment box on your website has a lot of benefits particularly if you get different comment, a lot of keywords you didn’t truly mention within the post content however showing in comments do bring a lot of computer program traffic. this is often one thing Facebook comment lacks, execept the additional traffic you get from Facebook.

use the Facebook comments enclose parallel to your recent Blogger Comment kind in order that you will loose no previous comments and supply users with multiple choices of commenting from completely different platforms.


How to add Facebook Comment Box in Blogger With Notifications Enabled
Both Facebook and Blogger Comment Enable
How Desable Blogger Comment

How to add Facebook comment box to Blogspot

There are about five steps to get this done but chill out, it’s easy, ok? Just follow the steps and you’ll have a nice Facebook comment box installed on your blog in no time.

1. Creating a Facebook Application

i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.

How to add Facebook Comment Box in Blogger With Notifications Enabled

ii. Enter your application name and namespace,input the captcha code and proceed.

How to add Facebook Comment Box in Blogger With Notifications Enabled
How to add Facebook Comment Box in Blogger With Notifications Enabled

iii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.

For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:

How to add Facebook Comment Box in Blogger With Notifications Enabled

iv. Scroll down a bit and hit the Save Changes button. Now you’re done with creating your facebook application but there’s one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.

How to add Facebook Comment Box in Blogger With Notifications Enabled

Now let’s head to your blog and finish this up

2. Adding the codes to your template

We’re adding four sets of codes into your template to make this work the way we want, aight?

PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.

How to add Facebook Comment Box in Blogger With Notifications Enabled


Log in to your blogger account and click on Template > Edit HTML

i. Press Ctrl+F and search for <html and just after it give a space and add this code.
This should be found on the second or third line of your template.

xmlns:fb='http://www.facebook.com/2008/fbml'

How to add Facebook Comment Box in Blogger With Notifications Enabled


ii. Press CTRL+F on your keyboard and search for,

 <body>

Note: In New Blogger Designed templates the same code looks like this,

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Find any one of these codes and just after it paste the code given below,

How to add Facebook Comment Box in Blogger With Notifications Enabled


<div id="fb-root"></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined'script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>

  • Replace YOUR APPLICATION ID HERE with your Facebook application ID that you saved in a notepad.

iii. Now,Press Ctrl+F and search for </head> and just above it paste the following code,

How to add Facebook Comment Box in Blogger With Notifications Enabled

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='RN Hckr' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/RohitMewada' property='fb:admins'/>
<meta content='article' property='og:type'/>

  • Replace RN Hckr with your blog title/Name.
  • Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size -> 40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
  • Replace YOUR_APP_ID with the your Facebook Application ID that you saved in notepad

iv Now Press Ctrl+F and Search for this,

<b:includable id='comment-form' var='post'>

How to add Facebook Comment Box in Blogger With Notifications Enabled

Just after it paste the code given below,


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><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 style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: By <b><a alt='Rohit Mewada' href='http://www.BlogofBlogger.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blog of Blogger'>Blog of Blogger</a></b></div></div> </b:if>

  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px

3. Enabling notification for comments on every post

This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.

- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

- Be sure to replace YOUR_APP_ID with your real application ID

- On the page that opens, click on settings and add yourself as moderator

How to add Facebook Comment Box in Blogger With Notifications Enabled

- Click on your name when it shows up and save the changes you made. When someone drops a comment on your blog, you should be notified that instant on Facebook.

How to add Facebook Comment Box in Blogger With Notifications Enabled


Update 2: Fix Facebook Comment Box Aligned to the Right

We all understand Blogger recently created some changes and that i noticed this box got aligned to the correct because of some reasons. This appears to be cause by some html tags being incorrectly parsed by the new template editor… my guess.

Anyway, here’s the fix: Replace the code you have under data:post.body with the one below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>

Replacing the whole code pasted earlier under data:post.body or post-footer-line-1 should fix it. I did it on my test blog and it works just fine. Any problem? Don’t hesitate to holla at me.

If this works for you, you'll be able to say thanks by sharing on Facebook, striking the Google +1 button or just victimisation the comment box. Also, it might be nice of you to not take away the credit link to permit others notice this handy contraption. If you’re having issues implementing this likewise, don’t hesitate to let me recognize perhaps I will be of facilitate.

You Also Like:

How To Add Disqus CommentSystem To Blogger
How To Install GooglePlusComments Widget On Default/Custom Blogger Templates

96 comments:

Post a Comment

 
Toggle Footer