Cara Membuat Kotak Komentar Facebook Di WordPress Tanpa Plugin

Posted on

Beberapa waktu yang lalu saya ditanya oleh saudara Pendatang Baru Bagaimana cara membuat kotak komentar facebook di wordpress seperti yang anda lihat di blog ini. dan saya pun berkata bahwa saya menggunakan plugin wordpress “facebook comment for wordpress versi 3.1” ternyata ybs agak kesulitan menggunakan plugin ini sampai menyinggung masalah single.php yang membuat saya berpikir dan mendapatkan ilham untuk menulis tutorial ini. ^^ hehehe terima kasih..

Kebetulan juga pada waktu itu saya sedang membuat tutorial cara membuat facebook like box, sehingga saya menemukan plugin facebook facebook comment yang dikembangkan oleh developernya.

Langsung saja

  • Silahkan ke link di bawah ini

http://developers.facebook.com/docs/reference/plugins/comments/

  • Isikan sesuai dengan data anda

    Cara membuat kotak komentar facebook
    Cara membuat kotak komentar facebook
  • Klik Get Code
  • Copy code tersebut di notepad

atau bisa juga langsung copy code di bawah ini

<div id=”fb-root”></div><scriptsrc=”http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1″></script><fb:comments href=”http://ads.adhani.com” num_posts=”2″ width=”500″></fb:comments>

href               =   “http://ads.adhani.com” ganti dengan website anda

num-post    =   “2” bisa anda ganti dengan angka berapa pun. berfungsi berapa jumlah komentar yang ingin anda munculkan

width            =   “500” lebar kolom komentar facebook nantinya

Cara memasukkan kotak komentar facebook di blog wordpress

  • Login ke dasbord wordpress anda
  • Pilih “appearance” >>“editor”
    Memasukkan kode comment facebook di wordpress
    Memasukkan kode comment facebook di single.php

  • Pilih  “single post (single.php)”
  • Cari kode <?php comments_template(); ?> atau <?Php comments_template(”, true); ?> semua tergantung dari theme bawaan anda
  • Pastekan kode tersebut di atas atau di bawah kode <?Php comments_template(); ?> atau <?Php comments_template(”, true); ?>
  • Kemudian klik “update file”

Selesai anda telah berhasil membuat kotak komentar facebook di blog wordpress anda tanpa plugin.

Update 23/03/2011 :

  • Tutorial ini khusus untuk wordpress self host (hosting sendiri) tidak bisa digunakan untuk wordpress.com
  • Hati-hati saat mengcopy script secara langsung, terkadang tanda petik terbaca sebagi simbol lain, tips dari saya copy script di atas kemudian ketik manual tanda petik yang menyertainya
Update 16/07/11:
Trik komentar facebook tanpa plugin hanya berguna untuk seluruh post, tidak untuk tiap-tiap post. Jadi, harap untuk menggunakan plugin untuk memasang kotak komentar facebook di wordpress

demo kotak komentar facebook

83 comments

  1. Selamat mlm!
    saya mau tanya letak appearance” >> “editor” itu dimana??
    say cari di blog saya tapi saya tidak menemukannya…
    saya tunggu balasannya…
    Terimakasih banyak

    1. Untuk pengguna wordpress.com memang tidak ada mas tommy.. dikarenakan fasilitas untuk mengedit tema (themes) tidak disediakan oleh penyedia blog berplatform wordpress tersebut.
      Kesalahan saya pada artikel di atas adalah tutorial tersebut khusus untuk wordpress self host (hosting sendiri).. sekali lagi saya minta maaf atas kekhilafan yang terjadi 🙂

      Btw terima kasih atas kunjungannya 😀

  2. masbro, tanya
    kok malah komentnya muncul di semua artkel/halaman ya? itu knp?

    msalkan, ak mau koment di artikel tertentu tapi kok malah muncul di semua.
    ada solusi.
    kalo gak keberatan juga bisa di cek di URL ak masbro.

    maksih 🙂

    1. saya koment normal aja kok, tapi sekarang saya menggunakan plugin “simple comment facebook for wordpress” lebih simple dan lebih ringan dibanding “facebook comment for wordpress” walaupun facebook comment for wordpress punya fitur hebat untuk menampilkan komentar seseorang di bagian widget sidebar. 🙂

      1. Saya ikut yang simple2 aja gan, tapi thanx dah kasih pilihan jadi makin variatif dan tentunya makin nambah ilmu buat pemula kayak saya…
        salam kenal buat semua dan salam persahabatan…

  3. nice tutorial banget nich..
    jd bingung juga nich mau pakai yg mana …
    kolom komentar bawaan wordpress (blog)
    atau dari faceboo.k

    1. jika dicoba, nanti akan ketahuan yang mana enaknya #tech tips
      jika ingin mengutak-ngatik theme pakai cara di atas, jika tidak ingin utak-atik theme pakai plugin, plugin memasang komentar facebook di wordpress bermacam-macam, contohnya yang saya gunakan sekarang simple facebook comment atau facebook comment for wordpress. masing masing punya kelebihan.. insya Allah saya akan membuatkan artikelnya dalam waktu dekat ini

  4. mas, reques yg buat blogger dan wap html ya.. muter2 g nemu2… sekalinya nemu gatot mulu.. thnx

    1. ini bisa kok mie digunakan di blogspot,, tapi harus diletakkan di bawah post:body,, nah di post body itu ada 2 yang kedua,,
      bisa dicari referensinya di google “cara memasang komentar facebook di blogspot” saya rasa sudah banyak kok yang share 🙂

    1. kok ga bisa ya? dibagian mananya mas?
      klo pengguna wordpress, lebih baik menggunakan plugin aja mas.. lebih simple tanpa utak-atik script single.php lagi..

      atau ada indikasi mas #sanjaya menggunakan plugin cache ya ? mungkin masih terkena efeknya tu mas.. ada baiknya hapus dulu cachenya kemudian refresh kembali halaman blog di browser anda.

  5. My company blocked facebook plugin by using firewall. What can we do to counterblock it?

  6. Salam… Mas Adhani 🙂

    Sangat luar biasa…
    Halaman-halaman Mas Adhani walaupun banyak fiturnya tetapi tetap cepat diakses.

    1. masa sih mas #fauzi,, kok saya yang akses agak masih lambat ya ?
      sementara ini saya masih banyak melakukan uji coba optimasi kecepatan loading blog mas
      baru2 saja saya menghilangkan banner serta beberapa script bawaan themes

      1. Saya coba berulang kali meng-akses blogsite Mas Adhani dan masih kencang kok, rata-rata dibawah 2s 🙂

        Hanya saja kalau buka artikel yang ada fitur facebook-nya jadi agak lambat karena terkadang fb maintenance dan akhirnya loading fb comment di blogsite Kita membutuhkan waktu lebih lama untuk ditampilkan oleh browser 🙂 (Maaf, sepengetahuan Saya sih begitu

        Tapi, memang dengan adanya fitur fb comment, fb like, fb share; bisa meningkatkan jumlah kunjungan ke blogsite sebab pengunjung secara otomatis diajak untuk berinteraksi di blogsite Kita dengan mudah, gampang dan tak bertele-tele dengan mengisikan identitas2 di form komentar biasa 🙂

      2. benar mas #fauzi, facebook like dan facebook like box dsb, bisa menguntungkan dan bisa merugikan,, untungnya traffic bertambah, ruginya kecepatan akses blog menjadi berkurang.. terlalu banyak memakan permintaan query ke database
        maunya saya juga ingin menyimplekan jumlah permintaan query, cma masih bereksperimen,, lumayan lah mas,, memasukkan kotak komentar facebook ke blog

      3. Selagi masih banyak keuntungan yang didapat, ya sebaiknya lanjutkan saja 🙂

        Sepertinya pengunjung juga masih enjoy Mas, kalau blogsite Kita kecepatannya dibawah 4s, seperti blogsite Mas Adhani tentunya… 🙂

        Saya juga senang sekali berkunjung ke blogsite ini dan baca setiap artikel karena antara satu artikel dan yang lainnya cepat loadingnya.

      4. terima kasih banyak apresiasinya mas, saya semakin bertambah semangat lagi ngeblognya 🙂

    1. sama-sama mas zarnadi, senang bisa membantu,
      terima kasih sudah singgah di blog ini ^^

    1. bisa diterapkan mas, tinggal di sisikan di bawah kode post:body
      atau menggunakan teknik sticky post tapi letakkan di bawah bagan postingan anda. cara ini adalah cara yang termudah,, tinggal add a gadget, pilih javascript / html, kemudian pastekan kodenya disitu kemudian gunakan teknik membuat sticky post di blogspot

  7. sebelum nya terima kasih atas info nya mas..

    tapi saya kok ga berhasil ya..udah di coba sesuai petunjuk tapi gak nampil juga 😀

    trus mau nanya nh mas..ini ntar klu udah bisa..setiap post yang lama juga otomatis ada ya comment box nya ?? atau psoting an terbaru aja setelah pemasangan comment Fb ini ??

    trus..itu ntar tiap post komen komen2 nya sendiri2 kan ?? karna pernah cba jadinya nya semua komen gabung di semua post..jadinya ga nyambung 😀

    Mohon pencerahan nya mas 🙂
    maaf banyak nanya heee

    Terima kasih

    1. sepertinya tetap ada mas tapi pada waktu itu menggunakan plugin,
      ada beberapa kasus, komennya menjadi satu antar semua postingan, tapi ada juga yang berbeda.
      klo misalnya ingin simple gunakan plugin simple facebook comment atau facebook comment for wordpress.

      1. sya udah pernah coba facebook comment fot wordpress pesan nya bgini
        Fatal error: Uncaught exception ‘Exception’ with message ‘Facebook needs the CURL PHP extension.’ in /var/www/sites_public/news/wp-content/plugins/facebook-comments-for-wordpress/scripts/facebook.php:4 Stack trace: #0 /var/www/sites_public/news/wp-content/plugins/facebook-comments-for-wordpress/facebook-comments.php(34): require_once() #1 /var/www/sites_public/news/wp-admin/plugins.php(149): include(‘/var/www/sites_…’) #2 /var/www/sites_public/news/wp-admin/plugins.php(151): plugin_sandbox_scrape(‘facebook-commen…’) #3 {main} thrown in /var/www/sites_public/news/wp-content/plugins/facebook-comments-for-wordpress/scripts/facebook.php on line 4

        klau simple komen bru di coba tp…ga pernah bisa nampil..

        atau ada pengaruh template ya mas hihii

        puyeng nh

      2. klo ada comment begitu delete folder di directory wordpress anda,
        atau bisa jadi, versi wordpress tidak kompetible dengan versi terbaru., entah wordpress ya yang ketinggalan (belum diupdate) atau pluginnya yang belum diupdate untuk versi wordpress yang mas gunakan sekarang.

        klo simple facebook comment asal sudah terinstal dan masukkan api key facebooknya mungkin sudah muncul. atau saya brasumsi blog yang mas gunakan terinstal salah satu plugin cache, sehingga halamannya statis, bsa jadi browser juga menyimpan cache

  8. setelah saya coba malah semua posting semua koment nya sama ckckckck balik lg pakai plugin aja dah

    1. ternyata banyak yang mengeluhkan hal ini,, klo begitu akan saya update di artikel di atas,, terima kasih infonya ya gan

    1. Plugin tersebut menggunakan plugin iklan baris cafebisnis mas, tinggal upload, instal kemudian konfigurasi sedikit maka jadilah, blog iklan baris seperti yang ada lihat di http://ads.adhani.com

      untuk mendapatkannya anda harus menjadi premium member, klo tidak salah untuk menjadi premium member biaya yang harus dikeluarkan sejumlah 197rb, tdak hanya satu plugin iklan baris saja, anda akan mendapatkan plugin wp affiliasi cafebisnis (mengubah blog wordpress menjadi web affiliasi)
      pokoknya dua plugin cafebisnis di atas hanya bisa didownload apabila anda telah menjadi premium member cafebisnis

      Jika mas mau melihat-lihat isi member area cafebisnis dan sekalian mendownload 2 ebook cafebisnis secara gratis, silahkan ke halaman panduan blogging gratis ini untuk melihat tata cara download kedua ebook tersebut
      informasi lebih lanjut silahkan ke halaman cafebisnis

  9. mohon pencerahanya.
    blok kami wordpress beralamat di agrobuah.com
    kami mempunyai sedikit permasalahan yaitu
    bila pengunjung masuk dan mau komentar setelah mengisi form yang ada yaitu
    nama, email, alamat web, isian komentar sudah di isi selanjutnya kirim komentar.
    akan tetapi tidak sukses terkirim dan
    tertahan mesin pengaturan yang isinya

    Error 1: Click back and type in the password.

    apakah maksudnya itu. dan bagaimana untuk mengaturnya.
    mohon bantuannya bagaimana cara mengaturnya ?

  10. saya coba praktekan, tapi ko ga nemu menu : Pilih “appearance” >>“editor” ini yah. di appearance ga ada menu editor. mohon petunjuknya..makasih..

    1. mungkin agan aris, menggunakan wordpress.com, bukan wordpress.org..
      tutorial di atas hanya untuk wordpress yang di hosting sendiri ^^

  11. Maf Pak. kalau untuk memasukan Acara/Even yang kita buat di FB ke dalam blog bisa ndak ya?Saya dah coba cari-cari tapi belom ketemu.

    1. banyak cara mas,
      bisa melalui link direct langsung
      atau menggunakan facebook like box seprti yang ada di halaman ini mas
      http://adhani.com/berlanganan-artikel

      jadi, jika punya fans page,, buat eventnya,
      kemudian update event status di wall akan secara otomatis muncul di facebook like box
      tapi coba saja dulu..

      seandainya tidak bisa, satu-satunya cara untuk menampilkan event FB ke dalam blog hanya bisa melalui direct link langsung berupa anchor text nama event tersebut, Kmudian jika ada pengunjung blog yang tertarik dan klik ia akan terbawa ke halaman event FB tersebut

  12. Mas ko di dasbornya gak ada ““appearance” >>“editor” y?
    bingung mau paste dimana kopian diatas?

    1. wordpress self host itu, wordpress yang untuk mengonlinekan blognya diperlukan domain dan hosting mas,, tidak numpang wordpress.com.. dan sifatnya berbayar..

      perbedaan yang mencolok dari wordpress versi gratis dan versi berbayar,
      di berbayar, ada plugin, bisa edit script, dsb
      sedangkan yang versi gratis, wordpress tidak memiliki fungsi itu..

      jadi appearance >> editor jelas tidak ada jika menggunakan wordpress.com/
      penjelasan lebih lanjut silahkan ke halaman ini

      http://adhani.com/2011/panduan-wordpress-gratis.html

  13. saya juga pernah menggunakan cara ini, namun yang terjadi adalah komentar masuk di semua postingan…sama seperti update yang ditulis agan. akhirnya saya harus menggunakan plugin kembali

  14. Mas diwordpress saya kok tidak ada menu editornya ya ? saya jadi bingung mau edit tapi ga bisa …!! mohon solusinya

  15. sudah saya coba gan, sukses di web saya. ada beberapa baris kode yang harus diletakan sesudah headnya. coba di lihat di website saya. trm ksh

  16. Salam kenal,
    Mau tanya ni sob, gimana cara ngilangin tulisan (dan mengedit kata2nya) :
    “Hey there! Thanks for dropping by rantinghijau! Take a look around and grab the RSS feed to stay updated. See you around!”
    Saya menggunakan tema Motion.
    Thanx…

    1. salam kenal juga sebelumnya

      saya juga sudah melihat blognya,
      maaf sayang sekali mas, wordpress dot com tidak menyediakan fasilitas untuk edit themes, jadi hal yang dimaksud oleh ranting hijau tidak memungkinkan untuk dilakukan

  17. gan sya cari2 sesuai intruksi diatas belum nemu yang mana ya ..? ini tamplan singgl postnya, mohon penceahannya…makasih gan.

    * @package WordPress
    * @subpackage Twenty_Ten
    * @since Twenty Ten 1.0
    */

    get_header(); ?>


    <div data-href=”ID ); ?>” data-send=”false” data-width=”700″ data-show-faces=”true”>

    1. untuk theme twenty ten versi 1.0..
      buka file loop-single.php kemudian taruh kode di atas ke dalam file tadi tepat di atas

Comments are closed.