Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

BiP Messenger Share Button for AMP HTML Blog

Cara memasang share button BiP Messenger di Blog berbasis AMP HTML

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

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

11 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Nora amat ya baru denger BIP hadeuw...
    1. hihi padahal udah lama ya
    2. Skr lebih ke telegram org..entah mengapa..hehe
    3. tapi tetep mayoritas pake WA sih
  2. Malah keingetan Bandung saya mah kang hihi
    1. Bongki Ipang dan Pay itu ya kang, hehehe lagu-lagunya enak didengar juga eh, beneran ya Bip itu hehehe
    2. nah betul, pas awal denger BiP yang keingetan Bandung Indah Plaza, sama Bintang Hidupku wkwkwk
  3. Ini khusus blog AMP ya kang? Blog saya masih belom AMP. Padahal pengen tau lebih banyak tentang BIP Messenger.
    1. iya kang.. soalnya saya belum dapat API sharenya buat non AMP
  4. Baru tau nih Kang. Bisa diterapkan di AMP seperti temolate besutan Kang Adhi kang?
    1. bisa mas... asal basicnya AMP
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.