How to Create a New Facebook Comment Box With Blog Comment Box

 

 

1. The most important thing is to do login to blogger using your blogger account.

2. Select the Template menu ==> Edit HTML ==> Proceed ==> Check Expand Widget Templates.

3. Find   <div class='comments' id='comments'>   using search (ctrl + f). Usually there are two pieces of code, you select the second code.

4. Once found, copy and paste this script just below <div class='comments' id='comments'>.

<div class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle(&quot;#fb-comments&quot;);'
title='Comments made with Facebook'>
<img class='comments-tab-icon'
src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-
comments' onclick='javascript:commentToggle(&quot;#blogger-
comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon'
src='http://www.blogger.com/img/icon_logo32.gif'/>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2'
width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-
page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='fountedmobilesolution'
property='fb:admins'/>
<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>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer;
background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Change red color coded to size the comment box faccebook

6. Change blue color coded with facebook ID.

7. For code facebook, login with facebook account then your profile. In the address bar, replace www.facebook.com/your profile with graph.facebook.com/your profile.

8. Page will appear with your profile information. copy paste facebook ID to the script code blue.

9. Save and complete tips and trick him.

Posted in: blogger tips