Installing Facebook and Blogger Responsive Comments

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

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

How to Install Side and Responsive Facebook and Blogger Comments

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

/* Facebook and Blogger comments */
.komentargabungan-page,.komentargabungan-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}
.komentargabungan-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;}
.komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;}
.komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;}
.komentargabungan-tab:hover:nth-child(2) {background:#e1954a;}
.komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px}
.komentargabungan-tab:hover{background-color:#324c82;}
.inactive-select-tab {background:#aaa}
.inactive-select-tab,.komentargabungan-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='komentargabungan-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='komentargabungan-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='komentargabungan-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 komentargabungan-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;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}
</script>

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

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

Tags Blogging CSS HTML Javascript