Sabtu, 09 Maret 2013

Cara Membuat Kotak Komentar Facebook Berdampingan dengan Kotak Komentar Blogger

Seven Jon

Setelah browsing sekian lama dan mencoba scrip scrip untuk membuat komentar pada blog via facebook ternyata thema yang saya gunakan tidak sesuai dengan scrip yang akan di masukan karna terdapat beberapa fitur yang tidak ada di thema saya seperti <div class='comments comments-page' id='blogger-comments-page'> dan saya putuskan untuk tidak mencobanya kembali karna fitur yang satu ini sangat penting contoh'nya seseorang ingin berkomentar tentang postingan yang saya buat mingkin saja dia tidak punya akun google dll dkk dst akhir'nya tidak jadi komentar dan mencari sumber lain
tapi teringat nasihat ibu saya " Dimana ada kemauan disitu ada jalan " , sayapun mencoba kembali mencari scrip dan ketika di apply , jreeng dan hahaha ternyata work , Mungkin udah banyak yang tau dan buat tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger. Tapi belom semua tau cara paling mudah dan gak berbelit-belit seperti yang saya gunakan,Yuk disimak dulu caranya

1. Login dulu ke akun Blogger kamu.
2. Pilih Rancangan lalu Edit HTML kemudian centang  Expand Template Widget
3. Cari kode <div class='comments' id='comments'> kemudian copas kode dibawah ini, letakkan tepat dibawah kode <div class='comments' id='comments'> tadi.
NB : Jika kode <div class='comments' id='comments'> ada 2, pastekan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> yang ke-2.
Berikut adalah code / scripnya

 <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='2' width='400'/>
</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='Masukan 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>
<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. Ganti tulisan warna merah (Masukkan ID Fb anda disini) dengan ID facebook anda. Karna ID fb sudah diganti menjadi username, untuk mengetahui ID anda silahkan pastekan link ini ke browser anda https://graph.facebook.com/username (contoh http://www.facebook.com/jonjinchuuriki maka usernamenya jonjinchuuriki)
5. Setelah diganti Simpan Template anda dan lihat hasilnya.

Nah gampang kan 
Okeh selamat mencoba dan jangan lupa tinggal kan komentar 

2 komentar:

  1. ga bisa gan, mohon pencerahannya.
    http://kyubhil.blogspot.com/

    BalasHapus
  2. terimakasih gan ats infonya :)
    http://freebiexp.blogspot.com

    BalasHapus