There is lost of plugin provide Facebook for the webmaster like facebook like button, share button and facebook comment box for web sites and blog. by this plug in Your visitors can comment, like and share for your blog through their Facebook account. To day i m gonna say say about facebook comment box. Facebook comment box feature helps you a lot to increase your blog traffic because when someone comment on your blog then his/her comment also visible by their friends.
Now follow the some steps to add Facebook comment box on your blog .
#1 : creating a Facebook apps id
1. First of all you Need to create a Facebook apps id , go to Facebook developer page .and register their a Facebook apps developer .
2. Click on Add a new app . Now, you see 4 option, then click on Website.
3. Then, Enter your apps name Comment box. Then click on Create a New Facebook apps id. see below picture
4. Then, again a pop up message will appear. Then choose your category Apps for pages. Then click on Create app ID. see below picture,
5. Now, a message will ask for Captcha. Then enter Captcha and then click on Submit. And wait for sometime.
6. Now, Your apps id is created. Then Copy and Paste the code on your Notepad. See below picture,
Part B : Add comment box to your blogger blog
Note : First Backup your Blogger Template, if you don't know, then click on the below topic, 'How to backup blogger blog and Template'
1. First, Login to your blogger account.
2. Go to Dashboard > Template > Edit template.
3. Now, Search for <html
4. And then, Replace the Above code with the below code. .
<html xmlns:fb='http://www.facebook.com/2008/fbml'
5. Now, again Search for <body> And Paste the below code just after it.
Note : Replace FACEBOOK-APPS-ID with your Facebook app id which you copied in Notepad.
6. Now, again Search for </head> And then Paste the below code just above it.
Note :
* Replace Best Solution with your Blog name.
* Replace Your Blog Logo Image Here with your Blog logo image URL.
* Replace FACEBOOK-APPS-ID with your Facebook apps id which you copied in Notepad.
* Replace your fb page url here with your Facebook page .
7. Now again Search for <b:includable id='comment-form' var='post'> And then Paste the below code Just after it.
Customization :
* Scheme is in light, If you Want to change to dark, then simply replace light with dark.
* Width is 540, Change the width size accordance to your blog template.
* Change footer width size. Size is 530.
8. Now Save the Template. You have done now.
Now follow the some steps to add Facebook comment box on your blog .
#1 : creating a Facebook apps id
1. First of all you Need to create a Facebook apps id , go to Facebook developer page .and register their a Facebook apps developer .
2. Click on Add a new app . Now, you see 4 option, then click on Website.
3. Then, Enter your apps name Comment box. Then click on Create a New Facebook apps id. see below picture
4. Then, again a pop up message will appear. Then choose your category Apps for pages. Then click on Create app ID. see below picture,
5. Now, a message will ask for Captcha. Then enter Captcha and then click on Submit. And wait for sometime.
6. Now, Your apps id is created. Then Copy and Paste the code on your Notepad. See below picture,
Part B : Add comment box to your blogger blog
Note : First Backup your Blogger Template, if you don't know, then click on the below topic, 'How to backup blogger blog and Template'
1. First, Login to your blogger account.
2. Go to Dashboard > Template > Edit template.
3. Now, Search for <html
4. And then, Replace the Above code with the below code. .
<html xmlns:fb='http://www.facebook.com/2008/fbml'
5. Now, again Search for <body> And Paste the below code just after it.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FACEBOOK-APPS-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>
Note : Replace FACEBOOK-APPS-ID with your Facebook app id which you copied in Notepad.
6. Now, again Search for </head> And then Paste the below code just above it.
<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='best Solution' property='og:site_name'/> <meta content='Your Blog Logo Image here' property='og:image'/> <meta content='FACEBOOK-APPS-ID' property='fb:app_id'/> <meta content='your fb url here' property='fb:admins'/> <meta content='article' property='og:type'/>
Note :
* Replace Best Solution with your Blog name.
* Replace Your Blog Logo Image Here with your Blog logo image URL.
* Replace FACEBOOK-APPS-ID with your Facebook apps id which you copied in Notepad.
* Replace your fb page url here with your Facebook page .
7. Now again Search for <b:includable id='comment-form' var='post'> And then Paste the below code Just after it.
<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='540'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:530px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href='http://best-solution-here.blogspot.com' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Best Solution</a></b> Enhanced by <b><a alt='blogger widgets' href='http://best-solution-here.blogspot.com/2016/09/add-facebook-comment-box-in-blogger.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Get this widget</a></b></div></div> </b:if>
Customization :
* Scheme is in light, If you Want to change to dark, then simply replace light with dark.
* Width is 540, Change the width size accordance to your blog template.
* Change footer width size. Size is 530.
8. Now Save the Template. You have done now.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
1 comments:
Click here for commentsHello, it is an excellent post. I got many things form your post today, and as always your posts are very active and useful.
Seo Services In DelhiSeo Services Company In Delhi
ConversionConversion EmoticonEmoticon