Membuat Komentar Facebook dan Blog Berdampingan

Assalamualaikum sobat semua. Posting kali ini sebenarnya berjudul Cara Membuat Kotak Komentar Facebook Berdampingan dengan Kotak Komentar Blog, berhubung judulnya panjang jadi saya singkat deh menjadi Membuat Komentar Facebook dan Blog Berdampingan,,hihihi. Kalo sobat sering jalan-jalan ke blog-blog tentu tidak asing dengan kotak komentar facebook kan. Sobat bisa pasang kok kotak komentar facebook di blog sobat tanpa menghilangkan kotak komentar bawaan blog. Biar gk bingung lihan SSnya aja:

Bagaimana ?? sobat tertarik ?? langsung praktek aja ya. Caranya mudah, sederhana, dan cepat.
Login ke blog seperti biasa. Pilih Template/Rancangan. Pilih Edit Html. Centang pada Expand Template Widget''.
1. Cari kode berikut ''<div class='comments' id='comments'>''.kode ini biasanya ada 2. sobat pilih yang ke-2 dan copy paste kode dibawah ini tepat di bawah kode ke-2.
 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'> <div id='fb-root'/> <fb:comments expr:href='data:post.url' num_posts='3' width='400'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'>
Code num_posts='3' width='400' sobat rubah sesuai kehendak sobat. 3=jumlah komentar facebook yg akan tampil, 400=lebar kotak komentar. Sebenarnya tidak dirubah juga udah bagus kok.

2.Cari kode </head> dan letakan kode dibawah ini tepat diatas kode </head>

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://code.jquery.com/jquery-latest.js'/>

<meta content='ID Facebook' 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>

ID Facebook : Ganti dengan ID Facebook sobat yang terletak di bagian belakang browser URL Profil Facebook sobat, Misalkan http://www.facebook.com/Remajasampit ID Facebooknya adalah Remajasampit

3.Cari kode berikut /* Comment atau #comments atau /* Comments----------------------------------------------- */ berhubung setiap template berbeda-beda, kalo sobat tidak menemukan ketiga code tersebut di blog sobat. sobat cari saja yang mirip dengan code tersebut. Pokoknya kode yg mengatur komentar. kemudian copy paste kode dibawah ini tepat dibawah kode tadi.

  .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;}
SIMPAN DAN SELESAI
Catatan: mungkin sebagian dari sobat ada yang bertanya, kenapa blog saya tidak mnggunakan sistem ini ?? apakah sistem ini tidak bekerja ?. Saya pertama kali mengetahui info ini, saya langsung coba dan berhasil. Tapi ada satu masalah ''menu dropdown saya tidak bekerja. jadi saya kembalikan lagi ke asal. Ternyata memasang kotak komentar facebook berdampingan dengan komentar blog bisa menimbulkan sedikit error jika terdapat kode css yg tidak cocok. Tapi hal ini sangat jarang sekali, jadi apa salahnya jika sobat mencoba terlebih dahulu. jika tidak ada gangguan. Lanjutkan saja.Sekian artikel dari saya tentang Membuat Komentar Facebook dan Blog Berdampingan, semoga bermanfaat.