BiP Messenger Share Button for AMP HTML Blog

Tentang BiP messenger

Beberapa bulan kebelakang ramai diperbincangkan tentang BiP messenger ini. BiP messenger adalah aplikasi pesan instan layaknya WhatsApp, Telegram dsb. Aplikasi chat BiP dikembangkan oleh salah satu operator selular asal Turki yaitu Turkcell. Sampai saat ini saya lihat di PlayStore sudah 50juta lebih unduhan. Belum lagi pengguna AppStore.

Banyak kelebihan di fitur BiP ini bila dibandingkan WhatsApp, diantaranya yang paling saya rasakan adalah bisa mengirim gambar versi HD. Dan ini sangat berguna bagi kepentingan desain, cetakan dan advertising. Tapi terlepas dari itu ada saja sisi kekurangan, diantaranya tidak ada fitur Status.

amp-social-share

Pada tutorial terdahulu saya sudah membagikan Cara Memasang Telegram share Button dan WhatsApp share Button untuk AMP HTML. Untuk WahtsApp sekarang sudah tersedia secara default di AMP

BiP dan Telegram saya lihat belum tersedia, sampai saat ini ketersediaan amp-social-share : Email, Facebook, Linkedin, Pinterst, Tumblr, Twitter, WhatsApp dan Line.

Memasang BiP Share Button

1. Pastikan sudah terdapat JS amp-social-share seperti di bawah (kalau belum ada silahkan pasang)

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

2. Simpan kode ini, dimana saja sobat akan pasang (misal di bawah postingan)

<amp-social-share type="bip"
  layout="container"
  data-share-endpoint="bip://send"
  expr:data-param-text='&quot;&quot; + data:blog.url'>
    <amp-img src="https://cdnblogger.github.io/images/bip-messenger.png"
      width="29"
      height="28"
      layout="fixed"
      alt="Share via BiP">
	</amp-img>
</amp-social-share>

Apabila akan ditampilkan hanya pada versi mobile (recommended) gunakan kode ini :

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<amp-social-share type="bip"
  layout="container"
  data-share-endpoint="bip://send"
  expr:data-param-text='&quot;&quot; + data:blog.url'>
    <amp-img src="https://cdnblogger.github.io/images/bip-messenger.png"
      width="29"
      height="28"
      layout="fixed"
      alt="Share via BiP">
	</amp-img>
</amp-social-share>
</b:if>

penampilan setelah di pasang

BiP send message

Seperti layaknya WhatsApp, maka ketika di share akan seperti gambar di bawah ini :

Button alternatif

Pada kode di atas, icon yang tampil seperti ini :

Saya sudah mempersiapkan icon lainnya seperti ini:

untuk kodenya silahkan gunakan

<amp-img src="https://cdnblogger.github.io/images/bip-logo-37.png"
      width="28"
      height="28"
      layout="fixed"
      alt="Share via BiP">
</amp-img>

Untuk percobaan silahkan buka Blog ini di HP, kemudian klik tombol dan klik BiP.
Semoga bermanfaat