Cara Membuat Komentar Facebook di Blogspot

Aktivitas browsing diinternet pasti akan banyak kita jumpai beranekaragam jenis blog dengan design yang sangat beragam tentunya. Diantara sekian banyak blog tersebut banyak kita jumpai kolom komentar yang terdapat di blog tersebut menggunakan komentar dengan menggunakan akun facebook.
Kolom komentar dengan menggunakan akun facebook menurut saya sangat bagus untuk digunakan. Selain memudahkan bagi para pengunjung, juga dapat menjadi salah satu cara untuk meningkatkan traffic blog kita. bagi para pengunjung yang memberikan komentar, kemudian dia memilih opsi berbagi di dinding mereka, secara otomatis akan memberikan pemberitahuan kepada teman-temannya yang lain. Menarik kan ???
Nah..untuk itu kali ini saya akan coba memberikan sedikit tutorial bagaimana membuat kolom komentar facebook yang secara otomatis akan muncul dibawah setiap postingan...
Silahkan ikuti tutorialnya dibawah ini :

  • Langkah Pertama Membuat Aplikasi

  1. Pastikan Anda Telah Login/masuk di Akun Facebook Milik anda. Kalau belum login/masuklah terlebih dahulu.
  2. Setelah itu, Kunjungi URL ini : http://developers.facebook.com/setup/ tunggu sebentar hingga muncul jendela seperti dibawah ini:


  3. Isikan Kotak yang tersedia. Contoh :
    App Name [?] : X-Cube
    App Namespace [?] : dikosongkan saja
    Web Hosting [?] : contreng pada kotak kecil yang tersedia
    Kemudian Klik Lanjutkan
  4. Setelah itu akan muncul jendela seperti dibawah ini :


  5. Isikan huruf-huruf yang diberikan pada kolom yang terdapat dibawah nya kemudian klik "Kirim" dan yang terakhir akan muncul satu jendela lagi. Untuk langkah ini anda tinggal meng-klik tombol "BUAT". Langkah pertama telah selesai. anda telah berhasil membuat aplikasinya.

  • Langkah KeduaMenambah Alamat Blog Ke Facebook

    Alamat blog/situs harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". Berikut cara menambah alamat blog: 
  1. Masuk/login ke aplikasi Anda yang tadi dibuat. Atau kunjungi link ini: https://developers.facebook.com/apps/nomor-app-id-anda/ (ganti nomor-app-id-anda dengan nomor aplikasi Anda). Untuk Nomor "App id" Perhatikan gambar berikut :

  2. note : Abaikan Lamgkah ini jika anda mengikuti langkah-langkahnya dari awal. langkah ini dikhususkan bagi yang sebelumnya telah pernah membuat aplikasi. untuk itu silahkan lanjut kepoin kedua.


  3. Perhatikan gambar diatas. Pada pojok kanan terdapat Tulisan "Edit Setting". klik pada tulisan tersebut. setelah itu akan muncul halaman seperti dibawah ini :


  4. Klik pada kolom Website kemudian isikan alamat URL blog anda. Contoh : http://x-cube.blogspot.com/ jangan lupa diakhiri garis miring (/)
  5. Kemudian  coba geser kebagian bawah. disitu terdapat tulisan "Save Changes" atau "Simpan Perubahan" jika anda menggunakan bahasa indonesia. klik tombol tersebut

  • Langkah Ketiga Memasukkan Kode Kedalam Template Blogspot

  • Ini mungkin merupakan langkah yang agak sedikit sulit bagi anda yang masih pemula dalam hal mengutak-atik template blog. akan tetapi saya akan memberikan langkah semudah mungkin agar anda dapat dengan mudah memahaminya.Ada Empat kode yang harus anda masukkan kedalam template blog anda. ikuti langkahnya berikut ini :
  1. Kode Pertama, Kode FBML facebook
  2. Masuk Kemenu "Edit Html" Pada akun blogspot milik anda. Perhatikan gambar dibawah ini :


    Masukkan kode xmlns:fb='http://www.facebook.com/2008/fbml' pada bagian HTML blogspot milik anda. kode ini terdapat pada bagian paling atas  perhatikan contoh dibawah ini :

    Anda Dapat menyisipkan pada bagian awal atau akhir dari kode default html milik blogspot. nah pada tutorial ini saya menyisipkan pada bagian akhir. Yang terpenting kode tersebut harus berada dalam sintaks kode <html bla...bla...bla....> dan harus sesudah kode xmlns yang lain. Seperti contoh diatas saya meletakkan sesudah kode xmlns:expr='http://www.google.com/2005/gml/expr'.jangan lupa disimpan.
  3. Kode Kedua, Open Graph Protocol Tag
    • Cari kode ini : <b:skin> (untuk memudahkan pencarian tekan kombinasi CTRL+F kemudian pastekan kode <b:skin> pada kolom pencarian)
    • Taruh kode berikut persis di atasnya kode no. 1.

    •  
      PENTING: 
      a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda. 
      b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda. 
      c. Ganti NOMOR ID PROFIL FB dg yang sesuai. Tidak tahu cara mengetahui nomor profil? 
  4. Kode Ketiga, Kode SDK Facebook
    • Cari kode <body kode ini tepatnya berada dibawah kode </head>. alasan saya hanya menulis <body tanpa ada penutupnya ">" karena kode template blog berbeda-beda. jika terdapat kode <body yang lain pilihlah kode <body yang paling atas dan berada dibawah kode </head>
    • Letakkan kode berikut setelah kode <body


    • a. Ganti Tulisan APP ID ANDA dengan App ID milik anda 
      b. jika setelah kode <body terdapat kode yang lain, taruhlah setelah kode body tertutup. misalnya <body..bla...bla...bla...> letakkan kode diatas setelah kode <body diakhiri oleh tanda kurung ">". jangan lupa disimpan.
       
  5. Kode Keempat, Kode Kotak Komentar Facebook
  6. Ini langkah terakhir yang terpenting. Tanpa kode ini, kotak komentar FB tidak akan muncul di blog Anda 
    • Pada Pojok Kiri Atas terdapat tulisan "Expand Template Widget " contreng terlebih dahulu baru kemudian Cari kode ini: <div class='post-footer-line post-footer-line-3'> atau (kalau tidak ada) cari kode ini: <p class='post-footer-line post-footer-line-3'>
    • Tambahkan kode berikut di bawahnya kode no. 1

    • Klik Simpan.
Sekarang coba buka salah satu Artikel Blog Milik Anda. Jika kolom komentar belum muncul, coba tunggu beberapa detik. jika tidak muncul juga coba refresh halaman blog anda.

CATATAN :
  • Tutorial ini telah saya uji coba pada blog ini dan tidak terdapat masalah.
  • Bagi anda yang masih menggunakan tampilan dashboard blogspot yang lama menu-menunya akan sedikit berbeda. silahkan anda sesuaikan saja.
  • Saya sangat merekomendasikan anda untuk meng-upgrade dashboard anda ke bentuk dashboard blogspot yang baru. ini berfungsi agar anda tidak bingung dalam menerapkan tutorial ini.
  • Jika masih terdapat masalah silahkan bertanya pada kolom komentar dibawah atau pada chatbox bagi anda yang tidak mempunyai akun facebook.
Terima Kasih Telah Berkunjung
Andrian Saputra

Comments
0 Comments

Blogger Templates by x-cube