Membuat Kotak Komentar Di Facebook 2012

Kali saya akan mencoba membuat tutorial tentang membuat kotak komentar Facebook pada Blogger / Website kita. Ok kita langsung aja pekerjaan kita dengan langkah-langkah sebagai berikut :

A. Membuat Aplikasi di Facebook.

Langkah 1 - Konfirmasi HP

Sebelum membuat aplikasi, anda wajib konfirmasi HP 1x per 1 akun Facebook. Konfirmasi ini diwajibkan Facebook, bukan diwajibkan saya. Jadi kita tidak bisa protes dengan kebijakan Facebook ini.

Tanpa konfirmasi HP, anda tidak akan bisa membuat aplikasi apa pun

Untuk cara konfirmasi HP, silakan ke link ini http://www.facebook.com/confirmphone.php
Penjelasan :

Kalau sudah konfirmasi HP,

Langkah 2 - Buat Aplikasi

Tutorial ini dibuat pada Facebook berbahasa Inggris. Jadi kalau Facebook anda berbahasa Indonesia, tampilan bahasanya akan beda. Disarankan agar memakai bahasa Inggris paling tidak selama pembuatan aplikasi.

Buka link ini : https://developers.facebook.com/apps/
Klik tombol "Create New App" di pojok kanan atas.
Nanti akan muncul tampilan seperti di bawah (kalau tidak ada tampilan di bawah, tekan saja tombol yang ada di layar)

Isikan nama aplikasi yg diinginkan di kotak "App Name". Sebagai contoh di gambar di atas saya namai aplikasinya sebagai "Ini Nama Aplikasiku"
Kita juga akan mengisi "App Namespace". Apa App Namespace ini? App Namespace adalah alamat web yang akan kita pakai kalau kita ingin membuka aplikasi kita.
Contoh buat yang suka main Mafia Wars di Facebook, alamat game Mafia Wars adalah http://apps.facebook.com/inthemafia/. Ini berarti App Namespace dari Mafia Wars adalah inthemafia.
Contoh lain, buat yang suka main game Pet Society di Facebook, alamatnya adalah http://apps.facebook.com/petsociety/, berarti App Namespace game Pet Society adalah petsociety.
Setiap App Namespace hanya boleh digunakan 1 aplikasi saja. Jadi misal sudah ada aplikasi dengan App Namespace "inthemafia", aplikasi lain tidak boleh ada yang menggunakan App Namespace "inthemafia" dan aplikasi lain harus menggunakan App Namespace lain.
Silakan buat App Namespace yang unik. Terserah mau diisi apa. Tapi ingat App Namespace hanya boleh mengandung huruf kecil dan tanda minus.
Spasi, titik, tanda garis bawah, angka, dll, tidak diperbolehkan di App Namespace.
Sebagai contoh, di atas saya pakai App Namespace "ininamaaplikasiku"
Kalau sukses, akan ada tulisan hijau kecil "Available"
Klik juga pilihan "I agree to..."
Klik tombol "Continue"

Langkah 3 - Verifikasi Gambar

Ada tampilan di bawah, ketikkan apa yang tertulis di layar

Contoh, di gambar di atas, saya ketikkan "pnp randone"
Klik tombol "Submit"

Langkah 4 - Halaman Aplikasi

Ada tampilan di bawah, ini adalah halaman utama untuk mengatur setting aplikasi.
Di sini kita lihat hanya kotak "App Display Name" "App Namespace", dan "Contact Email" yang baru terisi. Sisanya masih kosong.

Kita akan membuat lebih banyak pengaturan di langkah berikutnya.

Langkah 5 - Gambar

Silakan atur sendiri setting lain di gambar aplikasi (Icon & Logo).

Langkah 6 - Mencatat

Langkah terakhir di langkah 6 ini adalah buka Microsoft Word. Lalu catat informasi :

App ID (lihat gambar di atas, yaitu yang 123456789, dst)
App Secret (lihat gambar di atas, yaitu yang abc123456defg789, dst)
App Namespace (lihat gambar di atas, yaitu yang ininamaaplikasiku, dst)

B. Membuat Plugin Comment Facebook.

Buka halaman ini https://developers.facebook.com/docs/reference/plugins/comments/

keterangan :
1. masukan alamat url blog/website anda.
2. jumlah komentar yang ingin ditampilkan di blog/website anda.
3. lebar kotak komentar facebook tersebut di blog/website nanti.
4. kemudian tekan Get Code maka akan tampil seperti di bawah ini :

keterangan:
1. pilih tab XFBML
2. klik JavaScript SDK maka akan keluar kode seperti di bawah

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

- Ganti YOUR_APP_ID dengan ID Aplikasi yang tealh di buat pada Langah 6 di atas tadi
- Ganti WWW.YOUR_DOMAIN.COM dengan domain url anda.

C. Memasukan Kode-kode Script Di Atas Ke Blog/Website

1. Masuk ke admin blogger
2. Pilih Tab Rancangan
3. Pilih Tab Edit HTML
4. Tekan Ctl+F kemudian cari kode xmlns:expr='http://www.google.com/2005/gml/expr' pada kotak pencarian di bawah
5. Kemudian kopikean kode xmlns:fb='http://ogp.me/ns/fb#' di samping kode di atas dipisahkan dengan spasi
6. Kemudian kopikan kode <fb:comments href="http://example.com" num_posts="50" width="500</fb:comments> di bawah artikel/post blog Anda masing-masing pada Tab Edit HTML.....yang bercetak merah num_posts="50" = jumlah komentar yang ingin ditampilkan, width="500" = lebar dari kotak kotak komentar pada blog tersebut

Semoga bermanfaat..!