Install Facebook and Blogger Responsive Comments

Install Facebook and Blogger Responsive Comments - Facebook and Blogger Comments side by side are two things that are very related because as we know that the blogger comments usually Admin only offers the default comments column blogger and some visitors may not have a gmail account but facebook.

So what we need to do here puts the facebook comment column alongside the blogger comments so that visitors who don't have gmail can comment using their Facebook account. Responsive code comment Facebook was combined with a tutorial from the Templates Boy blog on the article How to Install Facebook Responsive Comments on Blogger

How to Install Side and Responsive Facebook and Blogger Comments

1. Login to the blog > Open Template > Copy the code below before ]]></b:skin> or </style>

/* Facebook and Blogger comments */
.combinedcomments-page,.combinedcomments-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10}
.combinedcomments-page{background:rgba(255,255,255,1);width:100%;max-width:100%;margin:0 0 20px}
#blogger-comments-page h4{display:none}
#blogger-comments-page p{color:#444;}
#blogger-comments-page {padding:0px 5px;display:none;}
.combinedcomments-tab{background:#3b5998;padding:12px;transition:all .3s;}
.combinedcomments-tab:nth-child(2) {background:#fda753;transition:all .3s;}
.combinedcomments-tab:hover:nth-child(2) {background:#e1954a;}
.combinedcomments-tab-icon {height:14px;width:auto;margin:0 3px}
.combinedcomments-tab:hover{background-color:#324c82;}
.inactive-select-tab {background:#aaa}
.inactive-select-tab,.combinedcomments-tab:hover {background-color:#324c82;}

2. Then copy the code below before </body>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize",function(){var o=location.protocol+"//"+location.host+location.pathname,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>'),FB.XFBML.parse()});
//]]>
</script>

3. Usually in the template there are two codes <div class='comments' id='comments'>, copy the code below just below the two codes <div class='comments' id='comments'>

<div class='combinedcomments-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<fb:comments-count expr:href='data:post.url'/> Facebook comment</div>
<div class='combinedcomments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<data:post.numComments/> Blogger Comments</div>
<div class='clear'/>
</div>
<div class='combinedcomments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if></div>
<div class='comments combinedcomments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script type='text/javascript'>
function commentToggle(selectTab) {$(&quot;.combinedcomments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.combinedcomments-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}
</script>

4. Save the template and see the results on the blog.

So many tutorials How to Install Responsive Facebook and Blogger Comments on the Blog, hopefully with the tutorial above successfully applied to the blog. thank you.