Menambahkan Kotak Komentar Facebook DI Blog | Uphik Lamers

Sunday, June 17, 2012

Menambahkan Kotak Komentar Facebook DI Blog

 

Manusia Mana ya yang ga punya akun facebook,
hehehehe
pastinya semua netters punya akun yang satu ini, sebagai blogger kita harus mensiasati hal ini, karena kadang pengunjung malas komentar di blog kita karena ribetnya untuk komentar,apalagi yang ga punya akun google..

dari pada basa basi ga jelas mending langsung praktek ja
1.Login di akun blog anda
2.Masuk di menu "RANCANGAN" trus "EDIT HTML"
3.Centang "EXPAND TEMPLATE WIDGET"
4.Cari kode <div class='comments' id='comments'> agar lebih mempermudah pencarian tekan Ctlr + F kemudian copy dan paste kode tersebut didalam kotak pencarian lalu tekan enter.

5.Kalo sudah ketemu paste kan kode dibawah ini tepat dibawahnya

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


Ket : Angka 2 = Jumlah Komentar
         Angka 400 = Lebar Kolom Komentar

6. Selanjutnya cari lagi kode </head> dan letakkan kode berikut tapat diatasnya

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


Ket : yang warna merah ganti dengan id facebook anda
Untuk mengetahui id fb anda coba buka profil fb anda dan lihat di address bar contoh saya punya http://www.facebook.com/cr00s1d3

7.Kemudian cari kode /* Comment atau #comments dan letakkan kode berikut dibawahnya

.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;}


8. Simpan Template Anda Dan rasakan perubahanya
Post a Comment