Cara Membuat Komentar Facebook di Blog

Cara Membuat Komentar Facebook di Blog - Mungkin hal ini bukan lagi hal yang baru karena sudah banyak para Blogger yang menerapkan cara ini di Blognya karena beberapa alasa. Mungkin karna terlihat lebih simple, gaul, dan tidak ribet. Sebenarnya Blog sendiri sudah menyediakan kolom komentar, Tapi karna ingin kolom komentarnya terlihat menarik maka para blogger melakukan segara cara untuk meraihnya dan termasuk cara ini. Nanti kolom komentar Facebook ini akan berdampingan dengan kolom komentar Blog nih Screenshotnya kalau udah jadi :

Nah ! sekarang kita menuju ke cara bikinya !
1. Login ke Blogger
2. Pilih Template -> EDIT HTML
3. Lalu cari kode ]]></b:skin> (Agar pencarian mudah tekn Ctrl + F)
4. Letakkan kode CSS ini tepat diatas kode ]]></b:skin>
 

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

5. Setelah itu cari kode </head> kemudian letakan lagi kode dibawah ini tepat di atas kode </head> :

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

 6. Dari kode diatas kode yang berwarna biru ID FB ANDA ganti dengan ID Fanspage Facebook anda Contoh : http://apps.facebook.com/firman_tgb maka ambil firman_tgb sebagai ID FB ANDA.

7. Cari kode <div class='comments' id='comments'> , letakkan script dibawah ini tepat dibawah kode <div class='comments' id='comments'>

<!--FB COMMENT-->
 <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='5' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
<!--FB COMMENT-->

8. Perhatikan script di atas, ada 2 kode yang saya beri warna merah. 5 itu berarti jumlah komentar yang di tampilkan sedangkan 500 itu berarti lebar kolom komentar tersebut.
9. Simpan Template dan lihat hasilnya

Regards,

Twitter                ( @firmantgb )
Facebook           ( Firman Maulana Tgb )