Memasang WhatsApp Share Button Blogger AMP

Pengguna mobile device semakin hari semakin meningkat, oleh karena itu para pemilik blog seyogyanya memanfaatkannya untuk menaikan traffik blognya, melalui tombol berbagi (Share Button).

Diantara aplikasi yang dapat digunakan untuk berbagi adalah Whatsapp. Dengan adanya tombol share ini, pembaca akan lebih mudah membagikan artikelnya ke pengguna lainnya.

Sebetulnya Cara Memasang Whatsapp Share Button ini sudah banyak yang berbagi. Tapi tentunya tidak dapat digunakan pada Template dengan AMP HTML. Oleh karena itu, tutorial ini khusus bagi pengguna Template AMP HTML.

Tutorial ini dibuat pada bulan November 2016, ketika mulai penggunaan AMP HTML. Saat itu secara default belum tersedia dari AMP. Saat ini fitur WhatsApp Share button telah ditambahkan. Tutorial ini masih bisa digunakan, tapi lebih simple menggunakan fitur bawaan AMP

Memasang WhatsApp Share Button untuk Template AMP

Syarat wajibnya pada template sobat harus terpasang JS untuk Social Share dari AMP Project, seperti ini :

<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>

Apabila pada template sobat sudah ada share button Facebook, Twitter dan lainnya, artinya JS tersebut sudah terpasang.

Selanjutnya sobat tinggal simpan kode ini dimana saja sesuai keinginan :

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<amp-social-share type="whatsapp"
    layout="container"
    data-share-endpoint="whatsapp://send"
    expr:data-param-text='&quot;Ada yang keren lho, nyesel kalo ga buka.. kunjungi: &quot; + 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>

Maka, tampilan pada mobile akan seperti ini :

Ketika sobat 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 :

Sobat bisa berkreasi dengan merubah Tombol, dengan menggunakan image yang berbeda, tentunya sesuaikan Ukuran tinggi dan lebarnya sesuai image.

Button Alternatif

Saya sudah buat 2 button tambahan yang bisa sobat 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>

Dikarenakan Share button ini untuk pengguna mobile, maka tidak akan terlihat apabila menggunakan web. Untuk melihat hasinya silahkan gunakan versi mobile. Untuk lebih mudahnya, gunakan Android atau iPhone untuk melihat penampakannya.