Accelerated Mobile Page (AMP) merupakan salah satu solusi untuk mempercepat load website anda. Dengan menggunakan AMP website akan di load lebih cepat melalui mobile dan tablet serta melalui desktop. Walaupun AMP sendiri didesain untuk mobile dan tablet namun ketika diakses dengan menggunakan perangkat desktop akan tetap dengan performa yang baik.
Baca juga: Sudahkah Website Semeton Bali Diperbaharui ke AMP? (terdapat penjelasan lebih jauh tentang AMP)
Namun sayang, jika website lama anda menggunakan banyak javascript maka siap-siap anda mencari alternatif lain untuk mengganti javascript tersebut dengan versi AMP yang ada. Seperti contoh dalam penggunaan komentar facebook pada website anda.
Jika anda tetap menggunakan script komentar facebook versi lama, maka saat melakukan validasi AMP akan terlihat error pada bait komentar facebook tersebut. Solusi yang bisa dipakai yaitu dengan mengganti script tersebut dengan versi AMP. Cara menggantinya cukup mudah dan bait program yang diterapkan juga tidak membebani load website.
Untuk lebih jelasnya saya akan menjelaskan perbagian:
Langkah pertama yaitu dengan meletakkan script amp facebook comment plugin pada tag head website anda. Kurang lebih seperti berikut.
<head>
...
<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
</head><amp-facebook-comments width=486 height=657
layout="responsive"
data-numposts="5"
data-href="http://www.domainanda.com/url-halaman-anda">
</amp-facebook-comments>
Penjelasan:
Perlu diingat bahwa script yang ada di website yang menggunakan amp akan slalu mengecek hubungan atau komponen dari masing-masing script. Seperti contoh, jika anda menambahkan script js yang di load di header tanpa menyertakan script untuk menampilkan facebook comment maka amp akan menampilkan pesan error untuk setiap halaman yang memiliki kesalahan yang sama. Jadi telitilah dalam meletakkan script tersebut agar tidak terjadi error.
Bait code di atas tidak akan menampilkan loading saat form komentar hendak ditampilkan. Sebagai solusi kita tambahkan animasi loading yang bisa diambil dari gif ataupun css. Pada saat ini saya menggunakan fontawesome sebagai animasinya.
Hal pertama yaitu mengaplikasikan Fontawesome pada tag head, dengan cara meletakkan script berikut diatas tag </body>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">Selanjutnya yaitu membuat css untuk memperindah tampilan loading, ikuti script berikut:
.loading{padding: 10px; border: 1px solid #eee; margin-top: 10px; text-align: center;}Langkah selanjutnya memodifikasi bait kode facebook comment amp, seperti berikut:
<amp-facebook-comments width=486 height=657
layout="responsive"
data-numposts="5"
data-href="http://www.domainanda.com/url-halaman-anda">
<div placeholder>
<div class="loading">
<i class="fa fa-spinner fa-pulse fa-fw"></i> loading form, please wait
</div>
</div>
</amp-facebook-comments>
Langkah selanjutnya yaitu merefresh halaman yang telah anda isikan plugin facebook comment dan melakukan validasi AMP. Jika sudah sukses dan tidak ada error AMP, maka tutorial ini sudah berhasil anda terapkan di website anda.
Untuk dapat menerima pemberitahuan jika terdapat komentar baru di artikel yang dibuat maka anda dapat melakukan beberapa tahapan seperti:
<meta property="fb:app_id" content="YOUR_APP_ID">isikan YOUR_APP_ID dengan App ID facebook yang anda gunakan (lihat langkah 2).
Pemasangan notifikasi pada artikel anda terkadang tidak menghasilkan notifikasi pemberitahuan komentar untuk artikel lama. Sedangkan untuk artikel baru setelah menerapkan langkah di atas akan mendapatkan pemberitahuan komentar, biasanya ditandai dengan adanya link menuju halaman moderators pada plugin facebook comment di artikel tersebut.
Demikian tutorial untuk memasang plugin komentar facebook di website AMP, semoga dapat membantu.
