Facebook comment box for your blog can serve as a good way to make your site more engaging and encourage readers to drop comment if they're already logged in to Facebook. It will bring more traffic to your blog or website for example when I'll comments on any website through facebook comment box that page will automatically share on my wall but it has a disadvantage it has no SEO value since it's displayed in iframe which google don't like. The main advantage of Facebook comment box is that it lack lot of traffic to your website.
In 2009, Facebook developers introduced their best and famous plugin called "Facebook Comment Box". Facebook Comment Box can be embedded in any website and blog and visitors can use their Facebook ID"s. This is how the Facebook Comment Box look like below :
LIGHT SCHEME
DARK SCHEME
I-Creating a Facebook Application
1.Go to Facebook Developer's Page
2.Submit your blog URL and give it a name. Keep site name as your"Blog Title" and Site URL as your "Blog Address"
4.After submitting the Security Check Code, you will see this page.
6. One the new window that appears click the Edit Setting link
1.Log in to your blogger account and click on Template > Edit HTML > Check Expand Widget Template
2.Press Ctrl + F and search for this code : <html give a space and paste below code
xmlns:fb='http://www.facebook.com/2008/fbml'3.Next search for <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'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
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>
4.Next search of </head> and just above it paste the following code :
*Replace Inspirational Online with your blog title / Name.
<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='Inspirational Online' 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/AdhaPeerFaQeer' property='fb:admins'/><meta content='article' property='og:type'/>
*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 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 your Facebook Application ID that you saved in notepad.
*Replace http://www.facebook.com/AdhaPeerFaQeer with your Facebook User Profile like
5.Now search for <b:includable id='comment-form' var='post'> and pasted code below :
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px0px;'><scriptsrc='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;'>FacebookBlogger Plugin: Bloggerized by <b><a alt='blogger templates'href='http://www.inspirational-online.blogspot.com' style='text-decoration:underline;color:#fff;' target='_blank' title='bloggertemplates'>Inspirational Online</a></b> Enhanced by<b><a alt='blogger widgets'href='http://www.twitter/abbasizaibi' style='text-decoration:underline;color:#fff;' target='_blank' title='BloggerWidgets'>Abbasi Zaibi</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:590px9. Save Template is already
0 comments:
Dí lo que piensas...