Search

Nov 23, 2012

Cara memasang komentar facebook di blog


memasang komentar facebook untuk blog ?? hehe mungkin sobat-sobat bertanya-tanya bagaimana sih cara memasangnya di blog. jika dicermati lagi ternyata berkomntar dengan facebook  untuk di blog lebih efektif, dikatakan efektif karena siapa sih yang engga punya akun facebook donk,, hehe pernah engga sobat-sobat sekalian mengunjungi suatu blog dan ingin berkomentar dan persyaratannya harus memiliki akun google tentunya orang-orang yang biasa blogging punya donk akun google, nah klo yang engga punya gimana donk ?? disini bermanfaatnya cara memasang komentar facebook di blog. berikut langkah-langkahnya :

1. pertama sobat-sobat harus login dahulu ke blogger

2. jika sudah selanjutnya sobat pilih Template

3. Jika sudah selanjutnya sobat-sobat pilih Edit HTML

4. dan jika sobat sudah memilih lalu pilih lanjutkan untuk meneruskan


5. dan jangan lupa centang Expand Template Widget

6. Jika sudah lalu cari kode dibawah ini

<div class='comments' id='comments'>
Catatan : Untuk mempermudah pencarian Tekan CTRL+F

7. Jika sudah ketemu lalu letakan Code dibawah ini tepat dibawah kode yang ditujukan di nomor 6


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

8. Jika sudah lalu cari salah satu kode #comments atau /* Comment dan letakan kode dibawah ini tepat dibawahnya


.comments-page { background-color: #f2f2f2;}
.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;}
}

9. jika sudah cari kode </head> lalu copy kode dibawah ini tepat diatasnya :


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

Ganti tulisan yang ditandai dengan warna merah dengan id facebook sobat-sobat sekalian sebagai contoh gambar dibawah ini yang bertanda biru itu adalah id facebook kita..

Jika sudah simpan templatenya dan buka blog sobat berhasil atau tidak jika berhasil maka tampilannya akan seperti dibawah ini

Selesai juga terimakasih sobat karena telah membaca, semoga saja postingan ini dapat bermanfaat bagi sobat-sobat sekalian .. :)


Related Post:

Comments

1 komentar:

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Post a Comment