Why You Should Add Facebook Comment Plugin?
Facebook is the world's number one Social Media website. Every one uses Facebook. Even when a person is doing research or Blogging or any work Facebook is usually open in a tab. So when user comes to your web page he can comment as his Facebook ID. It makes your Blog a forum and Social.Steps to Add Facebook Comment Box Plugin
You have to follow some simple steps to add Facebook Comment box widget to your web page. First you have to create your Facebook Developer ID, after that you have to add some HTML and CSS codes to your template with some amendments.How To Make Facebook Developer ID?
To create your Facebook Developer ID you have to Follow following steps
1: Go to https://developers.facebook.com/apps/?action=create
2: Click on "Register Now"
3: A new window will be open switch to "Yes" and hit next.
4:After that a new window of "Register as Facebook Developer" will be open for confirmation. Enter your phone number and hit on "Send as Text" you will receive a confirmation code. Enter this code in confirmation code box and click on Register.
(Facebook may not ask you about confirmation, but mostly it requires confirmation)
5: Now Go to https://developers.facebook.com/apps/?action=create
and click on "Create a new App"
6: After that new window will be open which will need your app information. Give your Website url in Display Name and Title of your Website in Name space. How ever you can assign any name space you want. But don't give spaces and don't use Upper case (Capital Alphabets) in name space. Hit Create app ID and enter security Check code.
7: Now you have done the Registration of Facebook Web Developer ID. On new window i.e App Tab there will be your App ID and App Secrete. You need your App ID. Copy app ID and paste it on note pad.
Add Facebook Comment Plugin To Your Blog
Just Follow the following Steps to add Facebook Comment Box in your Blog.1:Open Blogger.com → Go to Template → Go to edit html.
2: Search for
<htmlGive a space after the <html and paste the following code after space
xmlns:fb='http://www.facebook.com/2008/fbml'you can search any thing in Template html by pressing "Ctrl+F"
(Space is necessary)
3: Find
<body>and if it is not available find
(Some template defines Body by the tag <body> while in some templates "<body expr:class='"loading" + data:blog.mobileClass'>" is present instead of <body> so hace to find any of these.)<body expr:class='"loading" + data:blog.mobileClass'>
4:After that <body> or <body expr:class='"loading" + data:blog.mobileClass'> place the following code.
<div id='fb-root'/>Amendment: Replace "Your-App-ID" with your app id that you have pasted in note pad.
<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>
5:Now find the
<b:includable id='comment-form' var='post'>and after that place the following code
<b:if cond='data:blog.pageType == "item"'>Amendment: You can change the appearance of comment box by changing "light" with "dark"similarly you can also adjust width. But i prefer not to change colour scheme. Dark will look awkward.
<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: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></script>>Get this <a href="http://graspinfo.blogspot.com/2014/11/how-to-add-facebook-comment-gedget-in.html" rel="nofollow" >Add Facebook Comment Box Widget To Blog Widget</a>
6: Hit Save and You have done!
If you face any trouble feel free to ask.
Written by Suleman Dawood
Dawood Bukhari is a young blogger and passionate researcher. He writes articles on bloggging,SEO,Hacking and Computer Technology Follow him @ Twitter | Facebook
0 comments:
Post a Comment