Facebook Fan Page (Google.com)
Facebook (Google.com)

Cara Memasang Kotak Komentar Facebook di WordPress – Sebagai salah satu jejaring sosial yang paling diminati dan paling banyak penggunanya, Facebook menyediakan aplikasi untuk kita yang ingin menempatkan Facebook Fan Page di blog kita, juga menyediakan fitur kotak komentar.

Fitur kotak komentar yang disediakan oleh Facebook bisa kita tempatkan di akhir setiap postingan blog kita. Dengan memasang kotak komentar Facebook di blog, pengunjung akan lebih mudah memberikan komentar di blog Anda menggunakan akun Facebook mereka tanpa harus mengetikkan nama + email + alamat website + captcha terlebih dahulu.

Harus kita akui bahwa kebanyakan pengunjung terkadang malas berkomentar di tulisan kita karena harus mengisi data diri singkat (nama + email + alamat website + captcha) setiap kali hendak berkomentar. Dengan memasang kotak komentar Facebook di blog kita maka kita juga menyediakan kemudahan bagi pengunjung untuk berkomentar. Semakin mudah maka semakin gampang Anda mendapatkan komentar dari para pengunjung blog Anda.

Biasanya, semakin banyak komentar di suatu tulisan, sering dianggap bahwa tulisan itu cukup populer. Namun seperti yang saya tuliskan di atas, kebanyakan pengunjung blog yang ingin berkomentar sudah merasa malas terlebih dahulu karena harus mengisi beberapa data sebelum memasukkan komentar.

Tentu tujuan utamanya agar bisa memverifikasi si penulis komentar sekaligus menghindari komentar spam. Tetapi kebanyakan orang yang ingin berkomentar tidak memperdulikan hal tersebut. Untuk itu jika Anda ingin memasang komentar Facebook di blog Anda, khususnya pengguna blog wordpress, maka panduan ini patut Anda coba.

Ada dua cara yang bisa Anda gunakan untuk memasang kotak komentar Facebook di wordpress. Cara yang pertama merupakan cara manual dengan mendapatkan kode kotak komentar Facebook dan memasukkannya ke dalam theme Anda, dan cara kedua Anda bisa menggunakan plugin.

Saran saya gunakan cara pertama untuk menghindari kapasitas penggunaan memori database dan CPU Usage server hosting Anda. Namun bila Anda tidak begitu mengerti atau malas berhadapan dengan coding, maka pilihlah cara kedua.

Berikut cara memasang kotak komentar Facebook di wordpress:

 

Cara Pertama

1. Buat sebuah aplikasi Facebook baru. Log in terlebih dahulu ke dalam akun Facebook Anda dan Facebook Developers Apps untuk membuat aplikasi komentar. Setelah Anda sampai ke halaman tersebut, silahkan Create New App, masukkan judul aplikasi tersebut (terserah Anda) dan jangan lupa centang Facebook Terms.

2. Setelah Anda membuat satu aplikasi di Facebook, Anda bisa mengubah data-data yang tadi Anda buat, namun hal tersebut tidak terlalu penting untuk kita ubah. Yang terpenting adalah Anda harus memperoleh App ID yang bisa Anda dapatkan di bagian paling atas halaman dimana Anda, setelah melakukan tahap pertama, berada.

3. Setelah itu klik bagian Web di sebelah kiri halaman tersebut dan masukkan URL blog Anda. Setelah itu Anda akan mendapatkan kode dari aplikasi yang Anda dapatkan tadi.

4. Bagian selanjutnya, Anda perlu memasukkan kode tadi ke theme blog Anda. Caranya, pertama Anda copy App ID yang Anda dapatkan di bagian kedua tutorial ini dan paste di Appearance => Editor => header.php. Di antara kode <head> Anda harus memasukkan kode App ID Anda, sehingga nanti kodenya kira-kira menjadi seperti di bawah ini:

<meta property=’fb:app_id’ content=’Letakkan APP ID Anda disini‘ />

Jika Anda bingung dimana bagian <head> yang saya maksudkan untuk meletakkan App ID Anda, contoh kodenya seperti ini:

<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta property=’fb:app_id’ content=’Letakkan APP ID Anda disini‘ />
<title><?php wp_title( ‘|’, true, ‘right’ ); bloginfo( ‘name’ ); ?></title>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
</head>

Setelah itu ganti tulisan berwarna merah dengan App ID Anda.

5. Berikutnya Anda harus membuat dan memasang kotak komentar Facebook di blog Anda. Sebelumnya, lihat kode di bawah ini:

<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:comments href=”<?php the_permalink(); ?>” width=”880“></fb:comments>

Perhatikan angka yang berwarna biru, itu adalah lebar kotak komentar Facebook yang nantinya Anda tempatkan di bawah setiap postingan blog Anda. Anda bisa mengubahnya sesuai ukuran lebar postingan Anda.

Kode di atas merupakan salah satu contoh kode komentar Facebook yang akan dipasang. Copy kode komentar Facebook Anda setelah Anda membuat aplikasi dan kotak komentar tadi.

6. Di beberapa theme, di bagian Appearance => Editor => Comments.php, Anda harus mencari kode seperti di bawah ini:

<div id=”comments”>
<?php if ( post_password_required() ) : ?>
<p class=”nopassword”><?php _e( ‘This post is password protected. Enter the password to view any comments.’, ‘twentyten’ ); ?></p>
</div>
<?php return; ?>
<?php endif; ?>

<?php if ( comments_open() ) : ?>
<div id=”fbcomments”><div id=”fb-root”></div><script src=”http://connect.facebook.net/de_DE/all.js#xfbml=1″></script><fb:comments href=”<?php the_permalink(); ?>” width=”880″></fb:comments></div>
<?php endif; ?>

<?php if ( ! comments_open() ) : ?>
<p><?php _e( ‘Comments are closed.’, ‘twentyten’ ); ?></p>
<?php endif; ?>
</div>

Kode yang berwarna oranye merupakan kode yang berada di poin nomor 5 panduan ini. Ganti kode tersebut dengan kode yang Anda dapatkan setelah membuat aplikasi kotak komentar Facebook tadi.

6. Penempatan kode di atas mungkin berbeda-beda di setiap theme. Namun Anda juga bisa menempatkan kode kotak komentar Facebook Anda di bagian single.php di atas kode ini atau sejenisnya:

<?php comments_template( ”, true ); ?>

7. Setelah Anda klik Update/Save maka coba lihat di salah satu postingan blog Anda. Apakah Anda berhasil memasang kotak komentar Facebook di blog Anda?

Jika Anda belum berhasil maka silahkan coba cara kedua.

Anda perlu menggunakan plugin seperti Facebook for WordPress. Untuk mendapatkannya Anda cukup masuk ke Dashboard, lalu klik Plugins => Add New dan ketikkan nama plugin tersebut lalu install dan aktifkan.

 

Referensi:

Wptutsplus

36 KOMENTAR

  1. sangan bermanfat sekali wa, ane praktek dulu.. :sun

      • kalo pengen buat tampilan comment nya kayak replay ini gimana ya mas? tapi ga pake name, email sama website, cuma comment doang, dan submitny tapa form submit , tapi ketika kita enter langsung auto submit tau ga kira kira kayak mana?

        • perlu tweak khusus di functions.php wordpress seperti unregister form name dan form website. mungkin nanti akan dibahas eksklusif tutorialnya di sini

    • untuk sekarang sih seperti ini. nanti kalo ada yang lebih gampang bakal diupdate. makasih udah berkunjung 🙂

  2. gan, ane sudah coba dan berhasil. tapi bahasa di kotak komentarnya aneh. gimana cara gantinya gan? makasih

    • cari yang versi inggris atau yang bahasa indonesia gan. biasanya ada di bagian apps-nya tempat agan dapetin code-nya

    • cari yang versi inggris atau yang bahasa indonesia gan. biasanya ada di bagian apps-nya tempat agan dapetin code-nya

  3. B-) telah di coba…. tapi kurang sukses… :0

  4. cilangkahan.com

    cara yang terakhir baru bisa di web ku
    terima kasih

    • bisa aja gan, asalkan FB yang dipake ya satu (jangan beda2) untuk banyak blog 😀

  5. klo di wordpress gratisan ini bsa diterapin gk ya mas? apa cuma di self hosting aja bisa di pake nya? trims mas.. mohon pencerahannya 🙂

  6. Nyari menu Web kok gak ada 🙁

  7. Mas kalo pake google+ gmn mas caranya? Jaman skrg kan semua org jg mesti login gugel, apalagi yg pake android tuh 😮

  8. Cara nomor satu agak susah, aku coba no.2.
    Dan gimana cara bikin kolom komentar seperti agan punya?.

  9. makasih gan, sudah kupraktekkan di www.bisnisonlinebatam.com

  10. udah ane praktekkan gan,,,, n berhasil….tambahannya:jika kita mau memakai app id kita, maka app id kita harus disetting dlu menjadi “available to the general public” pada panel “status n review” app id kita…trima kasih atas infonya….

  11. mantap, terima kasih gan info nya
    ijin terapkan di blog

  12. terima kasih kak infonya , blajar ngoding dikit dikit hehe 😀

  13. sangat bermanfaat sekali artikelnya min terima kasih gan info nya
    ijin terapkan di blog pake google+ gmn mas caranya? Jaman skrg kan semua org jg mesti login gugel, apalagi yg pake android tuh

  14. mas cara bikin reply balasan komentar admin kaya web sampean ini gimanaya biar rapi ngga tumpang tindih

  15. Wah Thanks Gan Aikelnya, kebeutulan ane juga kepingin mengganti colom ane pake facebook ..
    Trims’

  16. Keren banget kak sangat membantu, bagus banget artikelnya, makasih banget ya kak 😀

  17. Makasih banyak mas, akan saya terapkan di blogku. Semoga artikel ini jadi amal jariah bagimu mas. sekali lagi makasih banyak..

  18. Bermanfaat mksh min…
    Lumayan buat nambah wawasan dan pembelajaran…

TINGGALKAN KOMENTAR

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.