Cara Memasang Kotak Komentar Facebook & Blogger Responsive - Facebook & Blogger Comment Box

Tertarik memasang 2 kotak komentar di blog anda. Kotak komentar facebook bisa menjadi salah satunya pilihan untuk dipasang di blog anda. Karena banyaknya pengguna facebook sehingga memudahkan dalam berkomentar tanpa harus login atau bahkan membuat akun lainnya. Jadi pengunjung blog anda tidak perlu direpotkan untuk login untuk berkomentar.

Nah kali ini bukan hanya kotak komentar facebook yang akan kita pasang tetapi juga kotak komentar blogger atau kotak komentar default dari blogger. Kotak komentar dari blogger ini bisa anda atur supaya pengunjung harus login dulu agar bisa berkomentar atau tanpa login (tidak memiliki akun) bisa berkomentar. Jika anda mewajibkan pengunjung harus login maka mereka harus login dengan akun google biasanya atau akun lain.

Dengan banyaknya pengguna google tentu tidak menjadi masalah mewajibkan mereka login terlebih dahulu. Kembali ke kotak komentar facebook,kekurangan dari kotak komentar ini adalah jumlah komentar yang ada tidak dihitung jadi walaupun sudah ada 5 komentar dari kotak komentar facebook yang dihitung hanya dari kotak komentar deafult blogger. 

Keuntungan Memasang Facebook & Blogger Comments Box

Memasang 2 kotak komentar facebook dan default blogger memberikan solusi bagi pengunjung yang tidak memiliki facebook mereka bisa berkomentar dengan akun google,sebaliknya bagi pengunjung yang tidak memiliki akun google bisa berkomentar dengan facebook. Gimana tertarik untuk memasang 2 kotak komentar isi,ikuti langkah dibawah ini.

Cara Membuat Kotak Komentar Facebook dan Blogger

Langkah 1

Masuk ke Blogger,pilih Template → Edit HTML

Langkah 2

Salin kode dibawah ini dan letakkan/pastekan diatas kode ]]></b:skin> atau </style>

/* Komentar Facebook dan Blogger */
.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;}

Langkah 3

Salin kode dibawah ini dan letakkan diatas kode </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>

Langkah 4
Didalam template blog biasanya terdapat 2 kode <div class='comments' id='comments'> lalu silakan salin kode dibawah ini dan letakkan dibawah kedua kode <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'/> Komentar Facebook</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/> Komentar Blogger</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>

Ingat karena ada 2 kode <div class='comments' id='comments'> maka letakkan kode diatas dibawah kedua kode tersebut.

Lalu simpan template.

Selesai,lalu sekarang coba lihat blog anda apakah 2 sistem komentar blogger dan facebook sudah muncul di blog anda. Cukup sekian tutorial ini jika ada pertanyaan langsung saja tanyakan dikolom komentar. Semoga bermanfaat.