Cara Menampilkan Komentar Facebook pada Halaman Tertentu

Bagi sebagian pengguna / visitor ada saja yang menyukai komentar Facebook, biasanya di gunakan oleh blog berita yang sering share ke Facebook

Pada tutorial kali ini saya akan menjelaskan tentang bagaimana menampilkan komentar facebook di halaman tertentu, baik di Blogger ataupun web statis lainnya. yang bisa digunakan untuk Forum ataupun lainnya.

Demo Non AMP Demo AMP

Non AMP

1. Buat Halaman kosong kemudian Publish (untuk mendapat URL Halaman)
2. Tambahkan script SDK ini di bawah </body> (saya tambahkan tag kondisional agar tidak diload dihalaman lain)

<b:if cond='data:blog.url == &quot;URL-Halaman&quot;'>
<script> //<![CDATA[
  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v3.1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]> </script>
</b:if>

3. Ganti URL-Halaman dengan Halaman yang sudah dibuat tadi
4. Kemudian simpan kode ini pada Halaman yang sudah di buat, ganti juga URL-Halaman

<div class="fb-comments" data-href="URL-Halaman" data-width="100%" data-numposts="10" data-order-by="reverse_time"></div>

Kustomisasi

data-width="100%" 100% sengaja saya buat agar responsive, bisa juga menggunakan px.
data-numposts="10" berapa banyak komentar yang akan ditampilkan
data-order-by="reverse_time" Supaya menampilkan komentar terbaru di paling atas. bisa diganti dengan data-order-by="time" untuk menampilkan terlama, di paling atas.

Moderasi Komentar

Untuk bisa melakukan moderasi pada komentar. Anda harus membuat Aplikasi di Facebook (baca: Cara Membuat Aplikasi di Facebook Developer Terbaru). Kemudian simpan meta tag diatas </head>

<meta content='123456789' property='fb:app_id'/>

Ganti 123456789 dengan ID Aplikasi yang sobat buat. Hasilnya muncul seperti ini

Blog AMP HTML

1. Buat Halaman kosong dan publish (untuk mendapat URL Halaman)
2. Simpan Kode ini diatas </head>

<b:if cond='data:blog.url == &quot;URL-Halaman&quot;'>
<script async="" custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
</b:if> 

3. Ganti URL-Halaman dengan Halaman yang sudah dibuat tadi
4. Kemudian simpan kode ini pada Halaman yang sudah di buat, ganti juga URL-Halaman

<amp-facebook-comments
  width='600'
  height='180'
  layout='responsive'
  data-numposts='10'
  data-locale='id_ID'
  data-order-by='reverse_time'
  data-href='URL-Halaman'>
</amp-facebook-comments>

Untuk kostumisasi dan Meta Tag, sama seperti Non AMP di atas.

Semoga bermanfaat...