Menambahkan Widget Facebook Messenger Live Chat di Blogger AMP

Cara Menambahkan Widget Facebook Live Customer Chat di Blogger AMP

Note: This tutorial only for blogger who have Facebook Page/Facebook fanspage. And domain have SSL / https.

Facebook adalah salah satu platform jejaring sosial paling sukses dan paling banyak digunakan di dunia. Setiap harinya, jutaan orang di dunia menggunakan facebook untuk berbagai kebutuhan. Mulai dari untuk hiburan maupun bisnis. Hal inilah juga yang membuat facebook menjadi lahan bisnis bagi banyak orang, termasuk para Blogger yang sering menggunakan Facebook sebagai pihak ketiga.

Banyaknya para penggiat website dalam menggunakan facebook inilah yang mendorong pihak Facebook berusaha mengembangkan API nya melalui Facebook Developer.

Dan akhir-akhir ini, facebook sudah meresmikan salah satu fitur Facebook Developer terbaru yang bisa digunakan para blogger secara gratis.

"Messenger Customer Chat (Beta)", merupakan salah satu fitus baru dari developer yang memungkinkan para developer website untuk menaruh widget facebook messenger di website maupun blognya.

Pertanyaan nya, apakah Facebook Customer Chat ini bisa digunakan pada halaman Google AMP? Apakah bisa dipasang pada blogger AMP? Tentu saja! Berikut caranya:

Setup Widget Facebook Messenger Chat

Perlu diketahui bahwa tutorial ini hanya berlaku untuk anda yang mempunyai Facebook fanspage dan sudah memiliki Facebook Apps ID. Jika belum memiliki Apps id, silahkan daftar terlebih dahulu di https://developer.facebook.com. Dan juga perlu diingat bahwa domain blog anda sudah support SSL / https.

Jika 2 persyaratan dasar tersebut sudah dipenuhi, langsung saja akses dashboard Facebook fanspage anda. 

Langkah pertama, klik setting/pengaturan di halaman dashboard fanspage. Lalu pada bilah sebelah kiri, klik Messenger Platform.

Selanjutnya, silahkan masukan ID APPS facebook developer yang telah anda buat sebelumnya pada kolom "Link your app to your Page" kemudian klik Link.

Selanjutnya masukan domain blog anda pada "Whitelist domain" dan klik save. 

Tahap pertama sudah selesai, lanjut ke tahap akhir pemasangan.

Memasang Customer Live Chat Widget di Blogger Valid AMP

Setelah anda selesai mengatur Facebook Customer Chat anda, kini tinggal tahap akhir yaitu meletakannya pada sidebar blogger anda. 

Pada dashboard blogger.com langsung menuju layout lalu klik add widget. Untuk menambahkan widget baru tersebut, pilih HTML. 

Selanjutnya masukan kode di bawah ini:

 <amp-iframe width="250"
       height="300"
       sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
       frameborder="0"
       scrolling="no"
       src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fusername%2F&tabs=messages&width=250&height=300&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=APPID">
   </amp-iframe> 

Note:

• Ubah username dengan username facebook fanspage anda.
• Ubah APPID dengan kode nomer aplikasi facebook developer yang anda buat. 

Untuk tahap akhir, silahkan hapus kode <b:include name='quickedit'/> pada template anda agar tidak terjadi error pada kevalidan Google AMP blogger anda.

Terima kasih, semoga berguna.

Bagikan Artikel ini