Cara Membuat Kotak Komentar Facebook Berdampingan

Kotak komentar berdampingan di blog (Source : dokumen pribadi)

Red-Mercenary - Saat ini banyak sekali situs yang memanfaatkan jejaring sosial facebook untuk mengoptimalkan situsnya salah satunya ialah fasilitas form atau kotak komentar. Selain karena praktis, orang-orang biasanya lebih suka berkomentar menggunakan ID facebook mereka ketika menjelajahi internet. Lalu bagaimana agar kita bisa membuatnya di blog kita? berikut ini langkah-langkahnya.

1. Log in ke akun fb kamu terlebih dahulu, lalu masuk ke URL https://developers.facebook.com/apps

2. Jika kamu belum pernah masuk ke link tersebut maka akan muncul sebuah kotak dialog, klik saja pada tulisan Register Now. apabila sudah terdaftar langsung saja pilih Create a new app atau Add a new app ubah tanda O menjadi I lalu klik selanjutnya.

3. Lalu apabila muncul lagi kotak dialog, silahkan isi dengan nomor telepon yang aktif karena ini syarat untuk registrasi (keamanan nomor kamu dijamin oleh facebook jadi tak perlu khawatir). Pilih Send as Text.

4. Anda akan menerima sebuah kode konfirmasi, silahkan isikan kode ke kotak dialog tadi lalu pilih Mendaftar, setelahnya anda sudah terdaftar di facebook.

5. Kembali ke https://developers.facebook.com/apps pilih Create a new app , silahkan isikan nama app yang akan dibuat misalnya red mercenary . Untuk namespace boleh kamu kosongkan. Lalu pilih kategori yang sesuai dengan blog kamu lalu klik Create App ID.  Simpan ID dari app yang tadi kamu buat.

6. Sekarang tinggal memasangnya di blog kamu, pertama masuk ke menu template -> edit HTML lalu cari kode </head> dan simpan kode di bawah ini di atas kode </head> tadi.

<!--kotak komentar berdampingan-->

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='masukkan ID fb kamu' property='fb:admins'/>
    <meta content='masukkan ID app' property='fb:app_id'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.comments-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
    </script>

<!--kotak komentar berdampingan-->

ganti yang berwarna biru dengan ID fb kamu, dan yang berwarna merah dengan app yang tadi sudah dibuat. Untuk mengetahui ID facebook kamu bisa mengikuti panduan Cara Mengetahui ID Facebook klik disini! caranya sangat sederhana.

7. Cari kode <div class='comments' id='comments'> , kodenya ada 2 silahkan pastekan kode di bawah ini di bawah <div class='comments' id='comments'> yang pertama.

<!--kotak komentar berdampingan-->

 <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUedTNpCtrEDaYzc_rJ7wGlHOoQ3PlwPbN1fNcirdx5W3Xx0Luj0jD9t4LampGyVl915MvUZnl4hkfLgm3gK5zfaSFmqdLtt-Y1Q3n5yynCx7D30cnU5S4RKWIctHt53zrOUlEHq-vog/s1600/sas.gif'/>
<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='3' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'><font face='times new roman' size='3'>Untuk Berkomentar Silahkan klik <b>Post a Comment</b></font><br/><br/>


<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>

<!--kotak komentar berdampingan-->

Lalu simpan template kamu.

Silahkan kamu ganti yang warna ungu adalah jumlah komentar di awal tampilan, merah adalah lebar kotak komentarnya, dan yang berwarna biru adalah warna dari kotak komentar tersebut.

Setelah di pasang di blog untuk mengecek komentar masuk silahkan kamu ikuti panduan Cara Mengetahui Komentar Facebook di Blog klik disini! 

Sekian tutorial blog kali ini, jika ada kesulitan silahkan tanyakan Insya Allah kami siap membantu.