Cara Menambahkan Komentar Facebook di Blogger Paling Mudah

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog. Tidak ketinggalan juga mempercantik tampilan kolom komentar pada blog.

Memasang Kolom Komentar Facebook dan Blog secara bersamaan merupakan salah satu cara mempercantik tampilan blog, khususnya tampilan postingan / artikel yang ada pada blog tersebut. Dimana Komentar-komentar dari pengunjung seakan-akan disembunyikan, dan komentar-komentar tersebut akan terlihat kembali apabila kita memilih berdasarkan Facebook atau Blog, bukan sepenuhnya dihilangkan (komentar tetap ada selama tidak kita hapus). Tujuannya adalah agar tampilan isi postingan terlihat ramping dan jelas (Apabila komentar artikel banyak loh).

Nah, Jika blog / website Anda belum ada model komentar seperti itu, Anda bisa mencoba memasangnya dengan mengikuti langkah-langkah di bawah ini :

Seperti inilah tampilan yang anda lihat bila Memasang Kolom Komentar Facebook dan Blog Model Tab

Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
Langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML
2. Cari Kode : <div class='comments' id='comments'>
3. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya Pastekan tepat di bawah Kode : <div class='comments' id='comments'>

<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://www.patriotaims.com/facebook-logo.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.methodsinecologyandevolution.org/SpringboardWebApp/userfiles/mee/image/icons/Blog%20Icon%20Red.png'/> <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='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFACEBOOK' 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>

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

4. Apabila sudah selesai, Simpan Template Blog Anda. 
5. Lihat hasilnya.

Catatan:

·         Ganti IDFACEBOOK dengan ID Akun Facebook yang anda punya.

·         Jika tidak diganti pun tidak masalah.

·         Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Kuning di atas. (width='550')

·         Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu.

sumber: http://bos-tutorial.blogspot.co.id/