Add Facebook Comment Box in Blogger with this simple method. Although it seems complicated but it is easy if you do as we are doing.
First of all we need to create a Facebook Developer account.
- Go to Facebook Developer Account and sing up for developer account for free
- Then Find and click Add a New App button and then click Website and then click Skip and Create App ID as shown below.
Now Create app using Blog Name as Display Name. provide your email and choose category as show below.
Click on Create App and after creating your app note down application ID as shown in this image
Write your APP ID and follow below shown steps.
- Go to Blogger > Template >First Backup your template then go for 'Edit Template'
- Press Ctrl+F buttons and Search for <Head>
- Paste the following code right below it.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='FACEBOOKs APP ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
} </script>
- Now replace pink highlighted code with facebook app ID which we noticed before.
- Now again press Ctrl+F and search for <html and replace it with below given code
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Now search for this code ]]></b:skin> and paste below given code just above it
/*--- Tabbed Facebook Comments By MastFun4u ----*/.comments-page { background-color: #f3f3f3; width:440px;} #blogger-comments-page { padding: 0px 5px; display: none;} .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f5f5f5;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d2d2d2;}
- Now again press Ctrl+F and search for
<div class='comments' id='comments'>
- This may appear two or three times but you have to choose first one and paste below given code just below it.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAOY2lOx6z2B-DAYhGa-LpxAITvIrGZSF9WD7y_q8m3q7c-HvAvrHVBc1I0czDvFMqazIu1OthTcFJ8sql8ODKuIn4sXqOOigQgjKJxf1t5KOYl6I4hboooA8I3AqprIj9jPM2IwAMmcE/s400/fbcomment.png'/><fb:comments-count expr:href='data:post.url'/> Facebook Comments </div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Blogger Comments</div>Save you template and you have done it.
<div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='440'/> <div style='color:#F2F2F2; background-color:#395692;border: solid 1px #ddd; font-size:10px; padding:3px; width:430px;'>Facebook Comments by <b><a href='http://www.mastfun4u.com/' style='text-decoration:underline; color:#F2F2F2;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b></div>
</b:if></div>
Thanks to Waheed Hussain of Mastfun4u.com
