Cara Memasang WhatsApp Share Button Blogger AMP

November 05, 2016
Advertisemen
Meningkatnya pengguna mobile device yang semakin merajalela, maka dari itu mari kita naikan tarif blognya, yaitu tombol yang digunakan (Share Button).

Whatsapp adalah aplikasi yang kita bisa gunakan. Dengan menggunkan tombol Button Whatsapp Share, pengguna lainnya yang baca akan mudah mengshare atau membagikannya.

Sebenarnya begini biar paham Cara Memasang WhatsApp Share Button Blogger AMP sudah banyak sekali yang berbagi. Cuma sayangnya tidak dapat digunakan pada Template AMP HTML. Oleh karena itu mari kta pelajari bersama, penjelasan ini khusus template yang menggunakan Template AMP HTML.

Cara Memasang WhatsApp Share Button Blogger untuk Template AMP


Ingat persaratan utamanya harus terpasang JS untuk Social Share dari AMP Project, lihat seperti dibawah ini :

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

Kalau sudah ada di template kalian seperti share button Facebook, Twitter dan lainnya, artinya JS tersebut sudah ada terpasang.

Mari kita lanjutkan dan tinggal simpan saja kode ini dimana saja sesuai selera masing-masing :

<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;Di sini gak ada yang aneh, kalo ga buka pasti ngiler.. kunjungi: &quot; + data:blog.url'>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0Vu_a5WO9_JnHQO0BKt6D3zwwYEAVrUukC8vc4ZcsQNdfZwaOdqGOgYtg-f3Gjay8MV1pkd_3iJcalSJDjjRhJ881h_Pba-U5eCOe_DyA3C-oRw3ncbbk0UBX35Uf_beMdKbTtFJ/s1600/amp-button-whatsapp-share.png"
      width="200"
      height="38"
      layout="fixed"
      alt="Message whatsapp share"></amp-img>
</amp-social-share>
</b:if>

Hasilnya, tampilan pada mobile akan seperti begini :


Setelah di klik tombol share button maka yang terkirim ke Whatsapp seperti gambar ini:


Perhatikan kode sebelumnya. Sobat bisa mengganti pesan ke penerima (sebelum URL) dengan mengganti yang saya tandai (kuning).

Kalau mau menampilkan Judul dan URL Postingan, gantilah pada baris ke 5 kode di atas, dengan ini :

expr:data-param-text='data:post.title + &quot; - &quot; + data:blog.url'>

Maka setelah di Kirim, hasilnya kurang lebih akan seperti ini :


Kalian bisa secara gampang dengan merubah Tombol, dengan menggunakan gambar yang berbeda, dan jangan lupa harus sesuia Ukuran tinggi dan lebarnya image atau gambar ok.

Button Alternatif


Saya sudah buat 2 button tambahan yang bisa sobat gunakan :


<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-nD282PwbJ8eoZH7m6gxkCD0PBMixU5uNEp550kDwiNoIU71JufkJq5TMBkD6Kt1BQhshAo4SqYNH2pWvR91JrSVZNHWT6I3h2umdSoXe-ReXGSNPbPanfT9F_kTYJf5DuS8d06U5/s1600/wa-btn.png"
      width="37"
      height="37"
      layout="fixed"
      alt="Message whatsapp share"></amp-img>


<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjbjccnULJADc9gbQmp-TlHqpdAlXk5mxBLpN4ajKMuLRqxxUneO6IAcVThRxM1d0ida3BQn6QRKOTeT5HBRyKYIaYFmuDHAtVaISZhyGB5PZmhkSj3rL5WOOmpRzgG011YXJn6w0WKOp/s1600/whatsapp-share3.png"
      width="95"
      height="37"
      layout="fixed"
      alt="Message whatsapp share"></amp-img>

Khusus 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 penampilannya.
Advertisemen

Add Comments

Disqus Comments