Cara Membuat Kotak Komentar Facebook di Blog

Cara membuat kotak komentar facebook di blog - cara membuat kotak komentar facebook supaya berada di atas kotak komentar blog.Membuat komentar dengan tampilan menarik tentu akan memancing pengunjung atau visitor untuk berkomentar di dalam blog kita.Hal ini sudah tidak asing lagi di mata para blogger dan sudah banyak yang memakai aplikasi plugin tambahan dari facebook ini.Mengapa banyak blogger ingin memasang kotak komentar facebook di dalamnya ? karena mereka ingin meningkatkat traffic pengunjung ke blog mereka.

Facebook adalah suatu media sosial yang sangat terkenal sedangkan blogger adalah pembangun blog dengan platform gratis,Tujuan mengkontribusikan kotak komentar facebook atau pembuatan kotak Komentar Facebook di  Bloggerl bukan untuk promosi di sosial media melainkan untuk menghubungkan konektifitas sosial media tersebut dengan blog kita.Sehinggag blog kita mendapat lalulintas yang besar dengan facebook.Untuk cara pembuatan kotak komentar facebook ini cukup mudah dan dijamin pasti bisa dan pasti berhasil.Langkah pertama adalah dengan membuat Aplikasi di facebook terlebih dahulu.Tetapi bagi anda yang ingin menjadi admin di kotak komentar tersebut anda tidak perlu membuat aplikasi ini.

Cara Membuat Aplikasi di Facebook

- Login Ke Facebook anda
- Klik link Pembuatan Aplikasi Facebook ini
- Klik "Create New App"
- Masukan nama aplikasi anda di "App display name"
- Beri Centang di "I agree to the Facebook Platform policies" dan tekan contunie
- Maukan kode yang tertera,apabila kode benar akan muncul tampilan kode berikut.

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

Cara Membuat Kotak Komentar Facebook di Blog :

1. Masuk ke dasbor > pilih Template > Edit HTML

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

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

4. 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 Agan' 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 Anda dengan aplikasi facebook yang telah Anda buat tadi. Jika Anda tidak membuat aplikasi facebook, silahkan masukkan id facebook anda yang terlihat di browser. Contoh : http://facebook.com/Fadhil.76/ tuliskan Fadhil 76 saja.

5. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>  .. 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'>

Lalu, Klik Simpan Template dan lihat hasilnya. Jika 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'

Kemudian Simpan Template Anda dan liat hasilnya.

Sekian Artikel saya tentang Cara Membuat Kotak Komentar Facebook di Blogger. Semoga Bermanfaat. Jika Ada permasalahan mengenai cara mengganti komentar facebook ini, silahkan berkomentar.