Membuat Kolom Komentar Facebook Untuk Blogger

Kesan-kesan unik yang ditampilkan pada kolom komentar  blog akan menimbulkan minat para pembaca untuk memberikan komentarnya di blog kamu. Salah satunya adalah dengan menempatkan kotak komentar facebook berada didekat kolom komentar blog. Memang ini bukanlah hal yang baru bagi sebagian pembuat blog. Dan salah satu faktor yang menyebabkan banyak blogger memakai plugin facebook adalah karena ingin mendapatkan pengunjung baru dalam blognya.

Jejaring social buatan MZ yang dikenal dengan facebook memang memberikan kemudahan bagi banyak orang untuk bersosialisasi secara online. Dan bila kamu dapat menghubungkan facebook dengan media blog maka blog kamu pun bisa mendapatkan traffic baru dari dari facebook . Untuk itu jika kamu ingin menggunakan trick ini maka harus membuat aplikasi facebook terlebih dahulu.

Membuat Aplikasi di Facebook :

1. Masuk ke Facebook Kamu.

2. Silahkan klik link Pembuatan Aplikasi Facebook ini.

3. Klik "Create New App"

4. Masukkan Nama Aplikasi kamu di "App Display Name" , seperti gambar diatas.

5. Beri centang di I agree to the Facebook Platform Policies dan tekan "Continue".

6. Masukkan kode yang tertera, apabila kode benar maka akan muncul tampilan berikut ini

Isikan pada kolom "Website", dan "App on Facebook (Canvas URL)" dengan alamat blog kamu. Lalu Simpan. Catat nomor Aplikasi ID Kamu, seperti yang ditunjukkan di gambar Facebook tersebut. Sampai disini kamu telah selesai membuat plugin aplikasi facebook. Sekarang lanjut ke tahap pembuatan komentar facebook di blog.

Membuat Kolom  Komentar Facebook Untuk Blog :

1. Masuk ke blogger kamu lalu pilih Template > Edit HTML,

2. Jangan lupa centang tulisan Expand Template Widge,

3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F

4. Letakan kode CSS di bawah tepat di atas kode ]]></b:skin>

.comments-page { background-color: #00BFFF;}

#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 lagi kode </head> kemudian letakkan kembali kode di bawah 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 Kamu' 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 kata ID FB Kamu dengan aplikasi facebook yang telah Kamu buat tadi. Jika Kamu tidak membuat aplikasi facebook, silahkan masukkan id facebook kamu yang terlihat di browser. Contoh : http://facebook.com/pemakan.wortell/ masukkan pemakan.wortell saja.

6. Karena kamu akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kamu perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>  .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template kamu terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<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'/>
    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by
<b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b>
</div>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

7. Simpan Template,

8. Selesai.

Bila Kotak Komentar Facebook belum terlihat juga mungkin template tidak memiliki script kode yang support dengan facebook.

Maka, cari kode ini <html dan ganti dengan kode di bawah ini :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Simpan Template Kamu.