Menambahkan plugins komentar facebook di posting blogger
Diantara sekian banyak pengunjung yang datang dan ingin berkomentar di
blog kita sangat mungkin diantara mereka ada yang tidak memiliki Open
ID. Tentu saja kita bisa memperbolehkan 'anonymous' akan tetapi cara ini
sering mengundang spam. Sebagai alternatif kita bisa memasang kolom
komentar untuk akun facebook, selain bisa lebih memfilter spam juga bisa
lebih mempercantik tampilan blog kita.
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.
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 -->Note :
<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='4' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<!--HTML komentar facebook end -->
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 KERAH LEDREK
.Preview terlebih dahulu lalu save. Sekarang Di bawah postingan blog sobat akan terdapat kolom untuk pengunjung berkomentar menggunakan menggunakan akun facebook mereka. Regards.
Sumber : http://www.kerahledrek.asia/2012/11/menambahkan-plugins-komentar-facebook.html
0 komentar:
Post a Comment