Cara Pasang Komentar FB di Blog Lengkap Dengan Moderasi

Pandaanku -Hai sobat pandaanku.com, lama tidak posting artikel nih admin, maaf soalnya lagi sibuk dengan deadline bikin web blog baru. Oke, baiklah sekarang admin pandaanku akan memberikan kalian turorial cara membuat kotak komentar facebook pada blog secara rinci, lengkap disertai dengan setting moderasi untuk komentar yang masuk. Namun sebelum itu perlu juga saya sampaikan disini mengenai kegunaan dan keuntungan kita memiliki form kotak komentar FB pada blog kita. Alasannya adalah faktor popularitas jejaring sosial raksasa tersebut memang menakjubkan disamping itu dengan menaruh kotak komentar FB pada blog maka setiap kali ada pengunjung yang komentar di kotak FB blog kalian maka secara otomatis url postingan kalian akan muncul dan dishare di FB.

Disini akan saya tunjukkan langkah2 pembuatanya dimulai dari membuat Applikasi dulu di FB hingga tahap pemasangan kotak komentar FB. Dan yang tidak kalah pentingnya adalah cara memasang moderasi komentar FB pada blog agar sang pemilik blog bisa memfilter terlebih dahulu komentar FB yang masuk dan mengontrol tiap komentar FB yang ada pada blog.

Baiklah langsung saja akan saya share caranya dari tahap awal, ikuti dari awal ya Gan biar nanti nggak bingung.

TAHAP I

Membuat Aplikasi untuk komentar di Facebook. 

Langkahnya sangat mudah, caranya sebgai berikut:
1 Masuk/login ke Facebook.com
2 Setelah itu lanjutkan dengan masuk developer/pengembang situs FB di link ini:
   developers.facebook.com/setup
3 Klik Create New App

 

4 Setelah itu akan muncul jendela munculan:

5 Ketik Nama Aplikasi yang dikehendaki, sekedar contoh diatas adalah: pandaankucom
6 App Namespace: Ini bisa dibiarkan kosong atau tulis nama dengan minimal 7 karakter
7 Klik Lanjutkan
8 Selanjutnya muncul jendela munculan verifikasi kata, ketik terus Submit.
9 Selesai.

Nah, sampai tahap ini kalian sudah selesai membuat Aplikasi yang akan digunakan untuk fungsi komentar di blog kalian. Pada screeshoot diatas tertera nama Aplikasi dan nomor ID Aplikasi serta kode rahasia Aplikasi. 

TAHAP II

Memasukkan alamat blog kedalam Aplikasi yang telah kaliah buat pada tahap I

Seringkali kita menjumpai blog atau situs yang memiliki kotak komentar FB kadangkala mengalami error dengan adanya pesan seperti "Warning: the url --- is Unreachable". Penyebab utama dari kasus tersebut sebaian besar adalah  tidak dimasukkannya alamat URL blog pada Aplikasi yang baru dibuat. Berikut saya jelaskan cara memasukkan alamat blognya.

1. Sampai pada tahap I ketika kalian sudah mendapatkan ID App kalian maka lihatlah pada
    kolom bawahnya, disitu tertera  beberapa kolom yang harus kalian isi.
    Ket: Page ini bisa juga diakses dengan  link: https://developers.facebook.com/apps/ID App 
    Ganti font merah dengan kode ID App pada step tahap 1.
2. Setelah itu ketik alamat email FB kalian, contoh: pandaanku@gmail.com
3. Abaikan saja kolom App Domain
4. Pada bagian tengah dimana terdapat kalimat "Select how your app integrates with
    Facebook", langsung klik saja checklist Website dan kemudian lanjutkan dengan
    pengisian nama domain blog kamu yang akan dikasih kotak komentar.
5. Iya, isi pada kolom tersebut nama domain blog kamu dan harus diakhiri dengan
    garis miring, contoh: http://www.pandaanku.com/
6. Lanjutkan dengan Klik Save Changes pada bagian bawah
    Lihat screeshoot berikut agar lebih jelas.

TAHAP III

Pada Tahap ini kalian harus memasang tiga jenis kode dari developer FB ke template blog kalian:
Kita harus memasukkan 3 (tiga) script kode ke template blog kalian. Dengan catatan kalian sudah mengetahui ID App dan ID  FB kalian, Untuk cara mengetahui kode akun bisa dilihat disini.
Nah biar aman dan lancar lebih baik copas dulu nomor ID App dan ID FB pada Notepad.
Seperti biasa kalian harus masuk ke blogger dan pilih Template ----> edit HTML ----> Proceed----> Centang Expand Widget Templates 

(PERHATIAN: BACK UP DULU TEMPLATE KALIAN AGAR AMAN)

Terus???ini kelanjutannya.. 

1. Menyisipkan kode fbml facebook pada template blog.

Caranya yaitu mencari dulu kode <html < span="" style="color: black;">lalu sisipkan kode <>xmlns:fb='http://www.facebook.com/2008/fbml'dan taruh pada bagian setelah kode tersebut, contoh <html xmlns:fb='http://www.facebook.com/2008/fbml'

2. Memasukkan kode Open Graph Protocol Tag pada template blog.
Caranya adalah sebagai berikut:
- Carilah kode <b:skin> 
- Copas kode berikut tepat diatas kode <b:skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='BLOG NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='YOUR APP ID '   property='fb:app_id'/>
<meta content='YOUR ID FB PROFILE'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Nah, nyampai disini waktunya kalian membuka file Notepad tentang ID App dan ID FB sebagaimana yang sudah diajarkan diatas tadi :
- Ganti BLOG NAME dengan nama blog kalian.
- Ganti YOUR APP ID dengan nomor ID App kalian.
- Ganti YOUR ID FB PROFILE dengan ID FB Profile kalian, bila nggak tahu yang ini buka cara menemukannya disini.

3. Memasukkan kode SDK Facebook 
Caranya adalah sebagai berikut:
- Cari kode <body

- Copas kode berikut tepat dibawah kode <body

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
<fb:comments/>
</script>

- Ganti YOUR APP ID dengan nomor ID App kalian.


Penting!!...Nah, nyampai disini berarti kalian sudah memasang atau mengintegrasikan Aplikasi dan perangkat sistem moderasi komentar FB pada blog kalian. Namun kalian masih belum memasang kotak komentar FB pada blog kalian sehingga sudah dipastikan gak akan muncul. Nah untuk memasang kotak komentar FB maka kalian akan saya kasih sebuah tips yang sangat menarik yakni tentang pemasangan kotak komentar FB yang bersebelahan dengan komentar blogger. Modelnya persis seperti yang ada di blog pandaanku ini. Lihat screenshoot:

Untuk cara memasangnya silahkan ikuti panduan lanjutannya lengkap tentang memasang kotak komentar FB pada blog bersebelahan dengan komentar blogger disini

CATATAN: Apabila sudah memasang kotak komentar diatas, maka pemasangan komentar FB+Moderasi sudah selesai, untuk melihat komentar masuk dan melakukan moderasi bisa di akses di URL:http://developers.facebook.com/tools/comments

Tutorial ini telah diuji dan dipraktikkan dan sukses, sumber ilmu ini didapat dari rujukan http://www.alkhoirot.net. Saya selaku admin pandaanku.com mengucapkan terima kasih kepada admin alkhoirot.net karena sudah memberikan ilmu yang sangt bermanfaat ini dimana sebelumnya belum pernah saya temukan se detail itu.

Berbagi :