Cara Membuat Kotak Komentar Facebook Berdampingan

Cara membuat kotak komentar facebook berdampingan dengan komentar blog. Mungkin sudah banyak sekali blog blog tetangga yang juga menulis topik yang sama, tapi berbagi ga ada salahnya kan??

Menurut saya kotak komentar facebook punya peranan cukup penting dalam sebuah blog. Terutama untuk saling berinteraksi antara pembaca. Ya memang sih udah ada komentar blog, tapi terkadang pembaca cukup malas untuk menulis komentar pada kotak blog (curhat pengalaman pribadi). Selain tampilanya yang kurang menarik, dan juga agak ribet.

Tapi untuk kotak komentar facebook cukup efektif dan mudah. Lagi pula sebagian orang punya akun facebook, jadi kemungkinan pembaca untuk berinteraksi pada blog agan lebih besar.

Tanpa banyak kata lagi langsung aja di coba tutorial cara membuat kotak komentar facebook berdampingan dengan komentar blog,,, cekidoooot,,,,:

1. Seperti biasa, Login ke account blogger Anda
2. Klik Rancangan lalu klik Edit HTML
3. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
4. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

.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;}

Catatan :

Pada kode diatas agan bisa mengganti warna tampilan kotak komentar sesuai dengan template blog agan. Dicoba aja mana yang paling cocok/ pas hehee :).

5. Kemudian Anda cari kode </head>
6. Jika sudah dapat, masukkan kode berikut 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 FB Anda disini' 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>

Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/ID. fb agan, maka ID Anda berada pada tulisan yang berwana biru.

7. Kemudian cari kode <div class='comments' id='comments'>
Keterangan: Biasanya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode <div class='comments' id='comments'> yang pertama atau kedua (tidak apa-apa, sejauh ini belum ada efek yang merugikan). Atau salah satu saja juga bisa, kalau di blog ini pada kode pertama.

<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='2' width='500'/>
    </b:if>
    </div>
<span style='font-size: 85%'>Widget Comment <a href='http://mbaht21.blogspot.com/2013/08/cara-membuat-kotak-komentar-fb-berdampingan-dengan-komentar-di-blog.html' rel='follow' target='_blank'>FB-Blog </a></span>
    <div class='comments comments-page' id='blogger-comments-page'>

Catatan:
Pada tulisan warna merah adalah jumlah komentar yang ingin di tampilkan.
Sedangkan warna kuning adalah lebar dari kotak komentar tersebut

8. Jika langkah di atas sudah di lakukan semua, yang terakhir klik save

Semoga berhasil dan bermanfaat