Menambahkan Plugins Facebook Comments Untuk Blogger

Ada beberapa langkah yang bisa kita lakukan untuk menambahkan plugins komentar menggunakan akun facebook kita di postingan blogger, sebagian dari cara-cara tersebut malah membuat blog kita jadi tidak enak dipandang sebab posisinya tidak proporsional. Misalnya, kolom komentar plugins facebook tersebut berada di bawah kolom komentar blogger, praktis jadi ada 2 kolom komentar kosong yang terlihat di bawah postingan kita. Kasus seperti sebetulnya karena penempatan HTML nya saja yang kurang pas.

Dibawah ini langkah-langkah membuat plugins komentar facebook yang menurut saya relatif proporsional karena tampilannya berada tepat berderet dengan tombol postingan blogger, sehingga komentator bisa memilih mau komentar pakai akun yang mana, tanpa tampilan pilihannya tumpang tindih.

Langsung saja, langkahnya sebagai berikut :

1. CSS
Masuk ke dashboard >> Edit Template >> Expand Template Widget,tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* komentar facebook */
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

2. HTML :
Cari kode:
<div class='comments' id='comments'>
Biasanya terdapat lebih dari satu kode di atas pada template blogger, jika anda ingin agar plugins komentar facebook itu tampil di setiap postingan, silahkan simpan kode HTML di bawah ini tepat di bawah kode-kode tersebut.

<!-- HMTL komentar facebook start -->

<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='4' width='500'/>

</b:if>

</div>

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

<!--HTML komentar facebook end -->

Note :
Nilai 500 di atas adalah lebar kolom komentar yang bisa sobat sesuaikan sendiri berdasarkan kebutuhan.

3. Javascript
Letakkan kode di bawah ini tepat di atas kode </head>

<!--script komentar facebook start -->
<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 SOBAT BLOGGER' 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>
<!--script komentar facebook end -->

Ganti tulisan MASUKKAN ID FB SOBAT BLOGGER dengan ID Facebook sobat, misalnya kalau saya Septian_cheepy .

Preview terlebih dahulu lalu save. Sekarang Di bawah postingan blog sobat akan terdapat kolom untuk pengunjung berkomentar menggunakan menggunakan akun facebook mereka. Regards.

source : http://www.kerahledrek.asia