Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they’re already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s Facebook wall. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won’t index. Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn’t actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, execept the extra traffic you get from Facebook. |
| Both Facebook and Blogger Comment Enable How Desable Blogger Comment |
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.i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.
ii. Enter your application name and namespace,input the captcha code and proceed.
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:
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.
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.
Log in to your blogger account and click on Template > Edit HTML
i. Press
This should be found on the second or third line of your template.
xmlns:fb='http://www.facebook.com/2008/fbml'
ii. Press
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='"loading" + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<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
<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/RNHckrDotCom' 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
- Replace http://www.facebook.com/RNHckrDotCom with your Facebook user profile link
iv Now Press
<b:includable id='comment-form' var='post'>
<b:if cond='data:blog.pageType == "item"'> <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='RN Hckr' href='http://www.rnhckr.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='RN Hckr'>RNHckr.com</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
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
- 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.
If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.
You Also Like:
How To Add Disqus CommentSystem To Blogger
How To Install GooglePlusComments Widget On Default/Custom Blogger Templates
It does not work for me. I went through all the steps a few double :(
ReplyDeletehttp://inna-t.blogspot.co.il/
Dear, Which Step you don't understand. tell me. :-?
DeleteI understand all the steps and did them. But it does not work for me. Do not know why :(
DeleteOk, I make a video Tutorial very soon for you :)
DeleteI've installed the Facebook comment box successfully here in this blog: http://ishanerpunjomegh.blogspot.in/ .But it appears that one can not identify comments for each separate post. Even when I,being a moderator make a comment and publish, instead of individual post, URL of home page get posted in facebook. can you help?
DeleteHello. When the post have already a comment made by the classic Blogger box, the Facebook comment box dosent show.
ReplyDeleteAny ideas?. Thank you!!