Cara Membuat Komentar Facebook Di Blog

Saya yakin di antara teman-teman semua pasti pernah berkomentar pada sebuah status di sosial media yang bernama Facebook. Lalu, apakah pernah terpikir oleh anda untuk berkomentar di blog menggunakan akun facebook?

Walaupun Blogger sendiri sebenarnya telah ,meyediakan kolom komentar tersendiri. Namun sudah banyak teman-teman blogger yang menerapkan hal ini pada blog mereka masing-masing. selain simple, hal ini juga keren karna ada 2 kolom komentar yang saling berdampingan dalam satu blog (hanya pendapat saya sih, hehe)

Lalu bagaimanakah cara memasang kolom komentar facebook tersebut?
Silahkan simak artikel ini baik-baik:

1.Pertama-tama silah masuk ke akun  blogger anda, lalu pilih TEMPLATE > EDIT HTML
2.Lalu cari kode ]]></b:skin>
3.Anda bisa menggunakan CTRL+F untuk mempermudah pencarian.
4.Letakan kode berikut ini tepat di atas 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, silahkan anda cari kode </head>. setelah itu letak kode berikut 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>

 Ket: Pada kode diatas, perhatikan kode yang saya beri latar belakang warna biru, tepatnya kalimat ID FB ANDA. Kode ini bisa anda ganti dengan ID Facebook anda. Sebagai contoh, misal Link Fanspage Facebook anda adalah https://www.facebook.com/Tekojari maka ambil kata Tekojari sebagai ID anda.

6.Karna kita akan membuatnya berdampingan dengan kolom komentar Blogger. silahkan cari kode <div class='comments' id='comments'>. Biasanya terpadat lebih dari satu, jika pada template blog anda terdapat lebih dari 1, carilah yang paling terakhir. Kemudian letakan kode berikut 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-->

  7.Klik pratinjau untuk mengecek apakah hal diatas sudah anda ikuti dengan benar, jika sudah, maka anda bisa klik SIMPAN untuk menerapkannya pada blog anda.

Ket: hal ini suda saya terapkan pada blog ini, jadi keberhasilannya bisa di jamin. tapi jika anda masih menemukan kegagal dalam menerapkannya, mungkin saja ada langkah-langkah yang belum tepat penempatannya.

Untuk kode <div class='comments' id='comments'> sendiri memang lebih dari 1, jadi mungkin saja anda salah di bagian ini. jika demikian, anda bisa mengcut kode yang paling terakhir dari ke bawah kode  <div class='comments' id='comments'> yang lain.