How to add Facebook comment Box in your Blog instead your default blogger comment Box. s a sample view check out my comment box at the bottom of this Post.You can feel the difference.You can Reply to friends Comments.Moderation is not available .
Create a Facebook Application
- You should have a Facebook app.
To create new Facebook app, go to
Facebook Developers - Fill Up the Site Name with your Blog Name, Site URL with your Blog URL .
- Now Solve te Security Check.
- Now Copy the App ID
Adding Facebook Code into Blogger
Adding xmnls Attribute
- Now, Go Back to Blogger Dashboard
Go to
Design >>
EDIT HTML . where you are able to edit your Blog template and change design.So better back Up your HTML Code.
- Now Search For,
<html
Mostly
<html present in TOP 5 Lines of HTML code.
2. Paste the Below Code after to
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Now Adding SDK code into HML code.
- Search For Below Code.
<body>
- Copy the Below Code and pate after to <body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '190533384332333',
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>
- You must Replace the RED color App ID with your App ID from the above code.
- Copy the Below Code and Paste it Before </HEAD>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='Blogknol' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='190533384332333' property='fb:app_id'/>
<meta content='http://www.facebook.com/profile.php?id=100002283984118' property='fb:admins'/>
<meta content='article' property='og:type'/>
3.You Must Replace the Red font in the above code with your Site Name,App ID and Profile ID.
Adding Comment Box into Blog
- Search For,
<data:post.body>
- Post the Following Code after to it.
<b:if cond='data:blog.pageType == "item"'> <p align='left'><img alt='' class='icon-action' src='http://b.dryicons.com/images/icon_sets/blue_extended_icons_set/png/64x64/user_comment.png'/></p> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div> <div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyrF6YrgOJE2Akv8oNFJnP_vz-VFu6-ntUR0Vq-jLskGTGX9WOGuRFBZ8AcdT4Xzcxr-rAh8mi1xUmzG8XUS5q-JJynvL_nN1Ywx7uozUZU4HWc9417sp9w1D7P_WQjgkiZeMMRfZn0q9j/s1600/email.png' width='16'/> <b><a href='http://www.blogknol.blogspot.com/' target='_blank' title='blogger templates'>Facebook comment Box </a> brought to you by <a href='http://www.blogknol.blogspot.com/' target='_blank' title='blogger tips and tricks'>Blogknol.blogspot.com</a></b></div> </b:if>
Terimakasih anda telah membaca artikel tentang Add facebook comment Box in Blogger Blog. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link https://kadangkumatmyblog.blogspot.com/2011/06/add-facebook-comment-box-in-blogger-blog.html. Terimakasih atas perhatiannya.