Kotak komentar facebook pada blog berfungsi agar pengunjung dapat berkomentar menggunakan akun facebook nya dengan mudah. Selain itu komentar tersebut juga bisa di share oleh pengunjung di akun sosial media nya jadi dengan menambahkan kotak komentar ini dibawah postingan blogger, wordpress maupun website maka tidak menutup kemungkinan dapat meingkatkan trafik situs/blog sobat apalagi dari facebook yang merupakan sosmed terpopuler yang memiliki banyak pengguna di internet dan pastinya jika blog memilik banyak komentar maka juga akan membuat blog tersebut menjadi lebih SEO.
Kali ini saya akan share gimana Cara Membuat Kotak Komentar Facebook Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menambahkan kolom komentar fb dibawah post / artikel pada blogger.
Cara Memasang Kotak Komentar Facebook Di Blog Tanpa Fungsi Tab :
1. Bikin kotak komentar tanpa fungsi tab seperti gambar di atas yaitu dengan cara masuk menu Template dan klik Edit
HTML
 |
| Klik Untuk Memperbesar Gambar |
2. Cari kode
<body>, gunakan
Ctrl+F untuk memudahkan pencarian
 |
| Klik Untuk Memperbesar Gambar |
3. Kemudian copy kode berikut :
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
paste tepat dibawah kode
<body>
 |
| Klik Untuk Memperbesar Gambar |
4. Lalu cari kode
<div class='comments' id='comments'>, biasanya kode tersebut ada 2 di html namun sobat bisa cari yang pertama dari atas, gunakan Ctrl+F untuk mempermudah
 |
| Klik Untuk Memperbesar Gambar |
5. Kemudian copy kode berikut :
<b:if cond='data:blog.pageType == "item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
paste tepat dibawah kode
<div class='comments' id='comments'>, jika sudah klik Simpan template.. Selesai dan lihat hasilnya
 |
| Klik Untuk Memperbesar Gambar |
6. Jika cara diatas tidak berhasil, sobat bisa menggunakan cara yang satu ini yaitu sobat bisa bikin dulu ID Aplikasi FB silahkan login Facebook lalu buka situs https://developers.facebook.com/apps maka akan muncul tampilan berikut dan klik
Register Now
 |
| Klik Untuk Memperbesar Gambar |
7. Kemudian klik tombol disamping kanan menjadi angka 1, jika sudah klik Mendaftar
 |
| Klik Untuk Memperbesar Gambar |
8. Selanjutnya langsung saja klik Selesai
 |
| Klik Untuk Memperbesar Gambar |
9. Pada tampilan Add a New App pilih platform
WWW
 |
| Klik Untuk Memperbesar Gambar |
10. Kemudian masukkan Nama dan klik Create New Facebook App ID
 |
| Klik Untuk Memperbesar Gambar |
11. Setelah itu pada Kategori pilih Aplikasi untuk Halaman, jika sudah klik Buat ID Aplikasi
 |
| Klik Untuk Memperbesar Gambar |
12. Maka akan muncul tampilan berikut silahkan sobat scroll ke bagian bawah halaman
 |
| Klik Untuk Memperbesar Gambar |
13. Pada kotak Site URL masukkan alamat blog sobat lalu klik Next
 |
| Klik Untuk Memperbesar Gambar |
14. Kemudian scroll lagi kebawah sedikit dan klik Skip to Developer Dashboard
 |
| Klik Untuk Memperbesar Gambar |
15. Maka akan muncul tampilan Dashboard Aplikasi FB dan sobat pun sudah mendapatkan ID Aplikasi FB seperti pada gambar dibawah ini
 |
| Klik Untuk Memperbesar Gambar |
16. Selanjutnya silahkan masuk Edit HTML blog dan cari kode
<head>
 |
| Klik Untuk Memperbesar Gambar |
17. Kemudian copy kode berikut :
<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>
paste tepat dibawah kode
<head> ,ganti tulisan warna merah dengan kode ID Aplikasi FB yang sudah sobat buat tadi
 |
| Klik Untuk Memperbesar Gambar |
18. Cari kode
<div class='comments' id='comments'>, biasanya kode tersebut ada 2 cari yang pertama
 |
| Klik Untuk Memperbesar Gambar |
19. Setelah itu copy kode berikut :
<b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </b:if>
dan paste tepat dibawah kode
<div class='comments' id='comments'>, jika sudah klik Simpan template.. Selesai dan lihat hasilnya
 |
| Klik Untuk Memperbesar Gambar |
Comments