Cara meng-install Facebook Connect

Mungkin ada diantara pembaca The Karimuddin yang punya blog dan tertarik untuk memasang fitur Facebook Connect yang sudah saya pasang sebelumnya di sidebar. Saya sadar bahwa blog ini bukan situs untuk geek, untuk itu saya coba memberikan bantuan langkah-langkah yang seharusnya tidak sulit untuk diimplementasikan oleh siapapun.

Sebagai referensi, silakan lihat slideshow yang dibuat oleh Pitra. Langkah-langkah berikut hanya untuk blog dengan platform WordPress dengan hosting tersendiri, bukan di WordPress.com. Secara garis besar, ada 2 hal yang harus di-setting, sisi blog dan sisi Facebook.

Berikut adalah setting dari sisi Facebook:

  1. Arahkan browser Anda ke alamat http://www.facebook.com/developers/ dan login dengan menggunakan account Facebook pribadi
  2. Klik tombol Set Up New Application di kanan atas
  3. Isi Nama Aplikasi, misalnya “tes” dan pilih Agree di checkbox Term of Service
  4. Di tab Basic, Anda akan menemukan angka-angka API Key dan Secret yang nantinya akan digunakan untuk mengkoneksikan Facebook dengan fitur Facebook Connect
  5. fbconnect-api

  6. Yang penting, isi bagian Canvas dan Connect. Isi Canvas Page URL dengan nama aplikasi yang dipanggil (bisa apa saja) dan isi Canvas Callback URL dan Connect URL dengan alamat situs kita, ada yang bilang harus lengkap hingga ke alamat tempat aplikasi Facebook Connect, misalnya http://www.situskita.com/wp-content/plugins/fbconnect/
  7. Simpan perubahannya

Selanjutnya adalah mengatur dari sisi blog:

  1. Download/unduh plugin Facebook Connect for WordPress dari http://www.sociable.es/2008/10/09/facebook-connect-wordpress-plugin-released/
  2. Upload plugin seperti bisa di folder wp-content/plugins/
  3. Aktifkan plugin
  4. Klik menu Setting dan pilih Facebook Connector
  5. Isilah API key dan secret dari data yang sudah kita peroleh di langkah-4-Facebook
  6. Check pilihan yang Anda inginkan untuk bagian komentar auto-approval, menambahkan tombol share Facebook, ataupun mengirim komentar ke Facebook
  7. Berikutnya tekan tombol “Create Template”
  8. Selesai di bagian itu, silakan pindah ke Appearance dan klik Widget
  9. Masukkan Facebook Connector ke dalam sidebar
  10. Supaya “lebih afdol” dan kompatibel dengan segala browser, terutama IE, silakan masukkan kode berikut di awal header.php:
  11. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

  12. Kemudian masukkan kode berikut di akhir footer.php sebelum </body>:
  13. < ?php wp_footer(); ?>

  14. Oh ya, jikalau versi WordPress Anda masih belum mendukung Widget atau memang tidak suka menggunakan Widget, silakan paste code berikut untuk memasang FB Connect:
  15. <?php
    widget_FacebookConnector(array());
    ?>

That’s it. Seharusnya Facebook Connect sudah terpasang dengan indah di blog Anda 😉

Disclaimer: plugin ini hanya bekerja untuk platform WordPress self-hosting. Untuk platform yang lain, silakan search di Google. Tentunya tidak/belum bisa diaplikasikan di blog WordPress.com kecuali memang disediakan.

38 thoughts on “Cara meng-install Facebook Connect

  1. sekar says:

    Mas Amir .. numpang tanya boleh nggak? Maaf kalau mungkin agak OOT. Aku sedang bikin blog lewat WP, udah punya domain, jadi bisa pake themes yang bukan basic dari WP aja. Trus, instruksinya bilang bisa upload ke direktori theme folder ke wp-content/themes. Nah .. pertanyaanku, ini direktori ada dimana ya? Hi hi hi .. maaf .. ga bisa nemuin sih. Makasih ya.
    -s-

  2. sekar says:

    Heeuu (mukanya merah malu) … FTP itu apa ya? Sering dengar, tapi nggak paham bener. *duh .. maap!*
    -s-

  3. sekar says:

    Pake Fantastico Deluxe, yang bisa dibuka dari cPanel dari domain/hosting. Jadi kemarin itu tinggal isi requirement, trus udah langsung tersambung WPku dengan domain yang dimiliki. Thanks ya 🙂 Maaf, jadi ngerepotin.
    -s-

  4. Mr. Karimuddin says:

    Sekar,
    assuming bahwa Sekar pakai cPanel, silakan liat di File Manager. masuk ke folder yang sudah saya bilang tadi di atas. Cari apakah Sekar bisa upload langsung dari File Manager tersebut (biasanya ada untuk hosting yang ada di luar Indonesia).

    Jikalau tidak ada, ada baiknya sekarang belajar dulu tentang File Transfer Protocol (FTP). Silakan unduh Filezilla, gak sulit kok nyobanya.. tinggal isi URL, username, dan password.. terus cari deh folder yang tadi saya kasih 🙂

  5. sekar says:

    Oke deh .. thanks buwanyaaaaakkk banget ya. Nanti saya coba pas jam istirahat 🙂 Nanti saya kabari lagi.

    -s-

  6. sekar says:

    Aaahh.. BERHASIL!!! *dengan senyum yang lebhuwaaaar banget* Makasih banyak ya Mas Amir 🙂 Nanti kalau udah ada isinya, saya undang lihat-lihat. Sekarang masih kosong .. hi hi hi .. Salam buat Mbak Anggi, and have a nice weekend!
    -s-

  7. sekar says:

    Sudah tayang dengan beberapa artikel 🙂 silakan berkunjung ke astari-siddhartha.com yah. Info darimu manjur sekali 😀 Sekali lagi, banyak-banyak terimakasih 🙂
    -s-

  8. Erman says:

    haloo pak, thanks atas infonya, saya dari pagi cari cara install fb connect baru dari info bapak yg berhasil, he..he.., kelihatanya lebih jelas dan rinci..makasih yah, jadi member aq dong, thanks

  9. Beni Oktopiansah says:

    Bung Karimuddin, help me please
    udah coba pasang di blogku tapi eror terus..peringatannya begini :

    Invalid Argument

    The Facebook Connect cross-domain receiver URL (http://ngenet.web.id/wp-content/plugins/fbconnect/xd_receiver.htm#fname=_opener&%7B%22t%22%3A3%2C%22h%22%3A%22fbCancelLogin%22%2C%22sid%22%3A%220.848%22%7D) must have the application’s Connect URL (http://ngenet.web.id/wp-admin/plugins.php/fbconnect) as a prefix. You can configure the Connect URL in the Appication setting editor.

    Solusinya gimana ya

  10. Mr. Karimuddin says:

    @Chita
    Seharusnya bisa.. silakan cari plugin/code untuk blogspot

    @Beni
    Sudah di-setting seperti langkah (4) sisi blog pak? Nampaknya itu karena belum di-set Connect URL-nya

  11. Irwan saputra says:

    Pak saya saya kok gak bisa ya integrated FB connect nya saya mau coba letakin face book connect di deket comment tapi gimana caranya ya… tolong ajarin dung pak

  12. Mr. Karimuddin says:

    @Azlan Ahmad
    Kenapa tidak bisa? Jika ada pastikan menu untuk publish post ke akun Facebook Anda, pasti setelah memasukkan comment akan muncul menu Facebook untuk memastikan Anda mau memasukkan ke akun Facebook atau tidak.

  13. Eko says:

    Sudah saya coba Mas, di Firefox bisa,
    tapi kenapa di browser lain (IE, Oprera, Safari)
    icon facebooknya gak muncul?
    Mohon pencerahan.

  14. nelli mayawati says:

    mas mau tanya nih, saya punya FB bisa dibuka tapi ga bisa lihat pesan masuk ama kirim pesan. hanya bisa ngeliat aza ga bisa ngapa2in komentarpun tdk bisa.dipojok kiri bawah ada tulisan error on page (gambar tanda seru warna kuning). tapi klo buka di komputer lain bisa. Knapa ya mas. tolong dong… and mohon jawabannya di email ke alamt emailku ya. thax….mas..

  15. baym dino says:

    fb saya susah sekali masukan akun ada printah ganti sandi baru tapi kenapa masih sulit biyarpun sudah ganti sandi baru teryata masih sulit masuk………………..

  16. ajie yuna says:

    saya juga kok gak bisa masuk facebook.
    klw masuk di layar keluar tulisan kyk gini ”URL tersebut tidak valid dan tidak dapat dimuat ”
    gi mana solusi nya ??

    THX atas perhatian ny 🙂

  17. eas says:

    pak, kenapa ya gk bisa buka fcbk, stlh msukin passwordnya ada ket. Untrusted Connection ? tolong bantu pak thanx

Comments are closed.