Cara Buat 2 Komentar Facebook dan Blogger

Cara Membuat Komentar Facebook di Blog 

Hal ini merupakan hal yang sudah umum dan bukan lagi baru. Banyak para blogger yang sudah menerapkan trik ini di blog nya karena beberapa alasan. Ada yang bilang kalau menggunakan facebook akan lebih simple, ada yang bilang kalau menggunakan facebook jadi lebih gaul, ada juga yang bilang kalau pake facebook jadi tidak ribet. Itu semua pendapat orang, bagaimana pendapat kamu ?

Sebenarnya blogger sendiri juga sudah menyediakan kolom komentar sendiri. Tapi di samping itu kebutuhan akan suatu hal yang baru tentunya akan selalu muncul. Ini juga terjadi pada blog ini, dikarenakan muncul terlalu banyak komentar pada salah satu artikel saya maka saya putuskan untuk membagi komentar pengujung blog ini ke kolom komentar facebook. Bisa anda lihat sendiri di kolom komentar. Anda juga dapat melihat screenshot nya di bawah !

 Langkahnya adalah……

1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML

2. Jangan lupa centang tulisan EXPAND TEMPLATE WIDGET

3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F 

4. Letakan kode CSS di bawah tepat 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;}

5.Setelah itu cari lagi kode </head> kemudian letakan lagi kode di bawah ini tepat di atas 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' property='fb:admins'/>

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

Dari kode di atas, perhatikan kode yang saya beri warna merah. Ganti kode berwarna biru dengan ID Facebook anda.. Contoh : halaman facebook anda www.facebook.com/ari.x.ordinarymaka ambil ari.x.ordinary sebagai ID anda

Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode<div class='comments' id='comments'>  .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<!--FB COMMENT-->

 <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='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(&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='5' width='500'/>

    </b:if>

    </div>

    <div class='comments comments-page' id='blogger-comments-page'>

<!--FB COMMENT-->

Perhatikan script di atas, ada 2 kode yang saya beri warna merah. 5 itu berarti jumlah komentar yang di tampilkan sedangkan 500 itu berarti lebar kolom komentar tersebut.

kemudian jangan lupa SIMPAN template anda dan lihat hasilnya .