Cara Membuat Facebook Coment di blog di bawah Posting

Agar blog kita lebih friendly yakni ketika setip pengunjung blog bisa lebih mudah dan sekaligus megikuti perkembangan saat ini, facebook comment merupakan widget yang cukup popular digunakan pada blog.

berikut cara memasang facebook comment di blog dibaawh postingan:

1.login ke blog anda
2.pilih ke pengaturan template EditHTML dan jangan lupa expand template
3. cari kode dibawah ini:

     <div class='comments' id='comments'>


4.letakkan kode di bawah ini  di bawah kode diatas


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

</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='ID FB Sobat disini' 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>

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



note: untuk kode <div class='comments' id='comments'>  ada 2 , taruh kode diatas pada kedua-duanya

5. lalu simpan

untuk melihat hasilnya silahkan klik salah satu artikel anda dan lihat posisi bawah artikel anda . jika belum berhasil mungkin anda melakukan kesalahan ketika meletakkan kode warna diatas. silahkan bertanya langsung kepada saya, dengan memberikan komentar di bawah,


selamat mencoba..
         

Artikel Terkait: