Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi dengan judul pada postingan artikel ini
Cara Memasang WhatsApp Share Button Tempelate AMPHTML
Memasang tombol berbagi WhatsApp pada template AMPHTML bisa menjadi cara yang efektif untuk meningkatkan interaksi pengguna dengan konten Anda.
AMPHTML (Accelerated Mobile Pages HTML) adalah inisiatif dari Google yang dirancang untuk membuat halaman web lebih cepat dimuat pada perangkat mobile. Berikut adalah langkah-langkah untuk memasang tombol berbagi WhatsApp pada template AMPHTML Anda:
Menambahkan Skrip AMP Pastikan Anda sudah menambahkan skrip AMP pada header halaman HTML Anda. Skrip ini diperlukan agar halaman Anda dikenali sebagai halaman AMP. Tambahkan kode berikut di dalam elemen <head>
Sebetulnya Cara Memasang Whatsapp Share Button ini sudah banyak yang berbagi tutorial. Tapi tentunya tidak dapat digunakan pada Template dengan AMPHTML. Oleh karena itu, tutorial ini khusus bagi pengguna Template AMP HTML saya buat.
Memasang WhatsApp Share Button untuk Template AMP
Syarat wajibnya pada template anda harus terpasang JS untuk Social Share dari AMP Project, seperti dibawah ini :
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>Apabila pada template anda sudah ada share button Facebook, Twitter dan lainnya, artinya JS tersebut sudah terpasang.
Selanjutnya anda tinggal simpan code ini dimana saja sesuai keinginan anda :
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "true"'>
<amp-social-share type="whatsapp"
layout="container"
data-share-endpoint="whatsapp://send"
expr:data-param-text='"Ada yang keren lho guys, nyesel kalo gak buka.. kunjungi: " + data:blog.url'>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2OeEmKD4Bahe1uxA-fHGlzYML6qOHeyrVruFzEquHAVRzB6bhbABRmjgQGG1iv2nj06iOYziwq3ZyVW4sySA-xmqQUS6Dr9OAox6PhRQuu_U2xqR5OYhZYdVdN6P9p5K7WWDs-2lDed3/s1600/whatsapp-share.png"
width="200"
height="38"
layout="fixed"
alt="Share via Whatsapp"></amp-img>
</amp-social-share>
</b:if>
Ketika anda klik tombol share maka yang terkirim ke Whatsapp seperti ini:
Perhatikan kode sebelumnya. Sobat bisa mengganti pesan ke penerima (sebelum URL) dengan mengganti yang saya tandai (kuning).
Apabila ingin menampilkan Judul dan URL Postingan, ganti pada baris ke 5 kode di atas, dengan ini :
expr:data-param-text='data:post.title + " - " + data:blog.url'>
Maka ketika di Kirim, hasilnya kurang lebih seperti ini :
Tentu anda bisa berkreasi dengan merubah Tombol, dengan menggunakan image yang berbeda, tentunya sesuaikan Ukuran tinggi dan lebarnya sesuai image.
Button Alternatif
Saya sudah membuat 2 button tambahan yang bisa anda gunakan :
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5k2yoWRrYv9w314nooharYXFUnDePcub4lu1R7YGPxgX8HtoXRlwf2yixkF4nXkAbGfD8w8tOGtIgbpQzYYF79I8wPkyxcfAsougUufy0ootXto7DPn2wJub9puNUp3MV0rMwke4bmdg/s1600/wa.png"
width="37"
height="37"
layout="fixed"
alt="Share via Whatsapp"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhoPsQKLc247ratZQm0zZ4rpaiP5jwySJyTmaYRLhbiou6VjSwVN-GhIfAZQYGKUDiOtcRlR5jHHveg1RuGuTcD9wui483vsEkO8NOfoFJeEXbtLNg3PIonMS013MSOZVH45CiHEOTsZG/s1600/whatsapp-share3.png"
width="95"
height="37"
layout="fixed"
alt="Share via Whatsapp"></amp-img>Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah memasang tombol berbagi WhatsApp pada halaman AMPHTML Anda. Ini tidak hanya akan membantu dalam meningkatkan interaksi pengguna dengan konten Anda tetapi juga memastikan halaman Anda tetap cepat dan responsif di perangkat mobile.
Wassalamu’alaikum Warahmatullahi Wabarakaatuh
