Jan 4, 2017

Cara Pasang WhatsApp Share Button Blog AMP

Seperti yang sudah saya jelaskan terlebih dahulu mengenai penerapan AMP pada blog sekarang ini banyak sekali para blogger yang masih bingung dalam penerapan Blog AMP tersebut, karena memang banyak sekali kita harus mengedit kembali setingan dan kode-kode script yang ada di dalam templated blog. Seperti yang saya pernah bahas sebelumnya Cara Edit Templated Blog AMP disitu sedikit banyak ada penjelasannya meskipun masih belum banyak membantu, termasuk Blog saya ini sampai tulisan ini di terbitkan masih saja ada laporan error di Blog saya ini, namun saya tetap berusaha dan mempelajari cara memperbaiki error pada Blog AMP saya ini, dan pastinya akan selalu saya share perkembangannya dan berbagi kepada sobat semua.

Terkait artikel postingan kali ini saya akan berbagi mengenai Cara Pasang WhatsApp Share Button Blog AMP cara ini sebenarnya sama penerapannya pada Templated blog yang bukan AMP namun yang membedakannya adalah penerapan kode scriptnya untuk pasang Whatsapp share button pada blog. Alasan saya mengapa blog harus dipasang Whatsapp share button dikarenakan sekarang ini teknologi handphone sudah sedemikian berkembang cepat, sekarang ini para pengguna lebih banyak mengakses informasi dari internet lebih banyak menggunakan smartphone, sama seperti halnya juga kita meskipun ada Laptop atau PC komputer rasanya lebih nyaman jika hanya sekedar mencari informasi yang tidak membutuhkan kerja yang lama lebih nyaman dan efisien menggunakan smart phone, apalagi sekarang ini OS di hampir semua Smart Phone sudah mendukung teknologi terbaru terutama untuk Blog AMP. 

Nah dari sekian banyak pengguna smart phone rata-rata selalu ada dan sudah menggunakan aplikasi Whatsapp yang terinstal di dalamnya, pengguna bisa membagikan informasi melalui Aplikasi Whatsapp tersebut, untuk itu kita pun sebagai Blogger harus bisa tanggap dan menangkap peluang mendatangkan trafik untuk Blog atau website kita adalah salah satunya memanfaatkan Aplikasi Whatsapp yang akan saya bahas kali ini, bagaimana cara penerapannya berikut penjelasannya.


Cara Pasang WhatsApp Share Button Blog AMP
Untuk Sobat yang belum menambahkan kode script untuk sosial share JS dari AMP Project silahkan copy kode berikut.  
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>

Jika sudah terpasang sebelumnya share button facebook, twitter, dan lainnya berarti kode JS sosial share sudah ada dan sobat bisa lanjut ketahap berikutnya.

Copy kode dibawah ini silahkan sesuaikan penempatannya.


<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='data:post.title + " - " + data:blog.url'>
    <amp-img src="https://1.bp.blogspot.com/-FCLjD2JglBM/WGx6SesSt9I/AAAAAAAAAho/IyeBr2xlvccTXKJBDhmsLDJngXZIEriPQCLcB/s1600/whatsapp%2Bshare.png"
      width="200"
      height="38"
      layout="fixed"
      alt="Share via Whatsapp"></amp-img>
</amp-social-share>
</b:if>


Jika sudah nanti akan tempil pada smartphone seperti ini

WhatsApp share



Sobat atau pengunjung bisa langsung tekan sosial share button Whatsapp tersebut dan secara otomatis akan masuk ke Aplikasi WhatsApp di smartphone. Penerapan kode diatas khusus untuk Blog AMP perhatikan betul kode tiap kodenya.

Untuk penampakan Icon sosial share Whatsappnya sobat bisa kreasikan sendiri dengan mengganti kode diatas kebetulan saya sudah buatkan sobat tinggal pilih saja sesuai selera dan disesuaikan di penampakan blog AMP nya.

wa share

<amp-img src="https://1.bp.blogspot.com/-SPvnrymEd3k/WGx4GO0PR1I/AAAAAAAAAhc/SUlZpJTSjkgNO2-Nnap7NFwGiQiSAQqgACLcB/s1600/WA.png"
      width="37"
      height="37"
      layout="fixed"
      alt="Share via Whatsapp"></amp-img>

WhatsApp Share
<amp-img src="https://1.bp.blogspot.com/-FCLjD2JglBM/WGx6SesSt9I/AAAAAAAAAho/IyeBr2xlvccTXKJBDhmsLDJngXZIEriPQCLcB/s1600/whatsapp%2Bshare.png"
      width="95"
      height="37"
      layout="fixed"
      alt="Share via Whatsapp"></amp-img> 

Catatan tambahan :
Penerapan kode Share button WhatsApp ini diperuntukan bagi pengguna mobile, jadi tidak akan terlihat jika menggunakan website. Untuk melihat hasilnya pergunakan versi mobile. agar lebih mudahnya, silahkan gunakan SmartPhone Android atau SmartPhone iPhone untuk melihat tampilannya.

Baiklah Sobat Blogger ini saja yang bisa saya tulis di kesempatan ini, jika ada sobat yang ingin menambahkan atau ingin berbagi pengalamannya seputar artikel ini dapat melalui kolom komentar ini, terima kasih sudah berkunjung dan semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.

2 komentar