Cara Membuat Tombol Share Button WhatsApp Keren Untuk Blogger AMP
WhatsApp semakin hari semakin banyak penggunanya. Selain banyak dimanfaatkan untuk chatting personal ternyata WhatsApp juga ada grub yang bisa digunakan sebagai media untuk berbagi. Dengan banyaknya pengguna perang seluler tentu WhatsApp juga banyak digunakan dengan begitu bisa kita manfaatkan untuk mendongkrak visitor blog kita. Bisa dengan membagikan lik artikel kita ke teman-teman kita atau di grub-grub WA.
Jika artikel yang anda miliki menarik anda bisa mendapatkan kesempatan agar artikel anda bisa dibagikan oleh pengunjung blog anda. Apalagi jika pengunjung ingin membagikan artikel ketemannya melalui WA mereka tidak perlu menyalin url artikel blog kita dan membagikannya secra manual. Cukup klik tombol share button WA maka mereka bisa membagikan artikel tersebut ke siapa saja.
2. Salin kode dibawah ini dan pastekan diatas kode </head>
3. Untuk mememunculkan share button WAnya silakan anda salin kode dibawah ini dan letakkan dimana share button WA ingin dimunculkan.
Jika ingin meletakkan share button dibawah artikel maka letakkan kodenya dibawah kode <data:post.body/>
Apa share button ini bisa digunakan didesktop? Untuk pengguna selain mobile maka tidak bisa menggunakan fitur ini karena ketika dibuka dengan laptop/pc maka share button WhatsApp ini tidak akan muncul. Jika anda ingin share button ini bisa muncul didesktop maka nanti anda hanya perlu menghapus tag kondisionalnya nanti. Nah gimana tertarik untuk memasang tombol share button WA di blog anda? Berikut ini langkah-langkahnya
Memasang Tombol Berbagi WhatsApp Di Blogger
1. Masuk ke blogger, pilih Template → Edit HTML2. Salin kode dibawah ini dan pastekan diatas kode </head>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
3. Untuk mememunculkan share button WAnya silakan anda salin kode dibawah ini dan letakkan dimana share button WA ingin dimunculkan.
Jika ingin meletakkan share button dibawah artikel maka letakkan kodenya dibawah kode <data:post.body/>
<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='"Baca artikel ini siapa tahu bermanfaat" + data:blog.url'>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDIzeI54GgONOovJa7XXrCqpmihu2BTradNTgnFplO1yD-3ya050CKTQTgqv3phdnMF6zCXcZzw0OTTCmQO92xiq7KCCanMrnpzhP-6-0c2es1ZY-ciHm7zMr7VgnZjbrlyv8GPcnx9fq/s1600/whatsapp-share.png"
width="200"
height="38"
layout="fixed"
alt="Share via Whatsapp"></amp-img>
</amp-social-share>
</b:if>
- Hapus kode berwarna kuning jika ingin memunculkan share button WA di desktop
- Ganti tulisan berwarna kuning dengan pesan yang akan muncul ketika dibagikan
Terakhir simpan template.
Sekarang coba lihat blog anda apakah share button WA-nya sudah muncul. Jika anda belum menghapus kode berwarna kuning maka share button tidak akan muncul didesktop anda perlu membuka dengan perangkat seluler untuk melihat share button WA-nya. Cukup sekian artikel yang bisa saya bagikan semoga bermanfaat.
ReplyDeletekalau untuk menambahkan tombol share button seperti di web anggasave, gimana caranya mas?