Cara Memasang Share Button WhatsApp pada Blogger AMP

Cara Memasang Share Button WhatsApp pada Blogger AMP

Cara Memasang Share Button WhatsApp pada Blogger AMP

Tombol share artikel selama ini memang banyak digunakan oleh para blogger untuk mendukung dan mengoptimalkan Mesin Pencari (SEO) guna memudahkan pengunjung blog untuk menyebarkan informasi dari isi kontent atau artikel. Jika pengunjung blog mengeklik tombol share whatsapp maka akan semakin meningkatkannya popularitas dan peringkat blog di halaman hasil pencarian (SERP).
Cara Memasang Share Button WhatsApp pada Blogger AMP

Cara Memasang Share Button WhatsApp pada Tamplate AMP

Pertama, tamplate harus sudah terpasang JS untuk Social Share dari AMP Project, seperti kode dibawah :

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

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

Selanjutnya, tinggal terapkan kode dibawah ini 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://4.bp.blogspot.com/-0XYiiPfEZ1c/WBr8sQOimII/AAAAAAAAH6w/nkXzWqKrjRsIOMCR9bnBSt3RpuB4hcsvwCK4B/s1600/whatsapp-share.png"
      width="200"
      height="38"
      layout="fixed"
      alt="Share via Whatsapp"></amp-img>
</amp-social-share>
</b:if>

Hasilnya akan seperti gambar dibawah.

Cara Memasang Share Button WhatsApp pada Blogger AMP

Cara Memasang Share Button WhatsApp pada Blogger AMP

Apabila ingin mengubah pesan ke penerima Ada yang keren lho, nyesel kalo ga buka.. kunjungi: dengan judul artikel, silahkan ganti kode dibawah :

expr:data-param-text='&quot;Ada yang keren lho, nyesel kalo ga buka.. kunjungi: &quot; + data:blog.url'>

Ganti dengan kode ini :

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

Merubah Tombol Share Button Whatsapp
Bisa merubah tombol share, dengan menggunakan gambar yang berbeda, harus sesuaikan ukuran tinggi dan lebarnya gambar.

<amp-img src="https://4.bp.blogspot.com/-nuWfSt-GHRc/WBsZe1kXxmI/AAAAAAAAH7c/gGKKNm32SkYqQthHzcptJrqk4GejHdjGgCK4B/s1600/wa.png"
      width="37"
      height="37"
      layout="fixed"
      alt="Share via Whatsapp"></amp-img>

<amp-img src="https://4.bp.blogspot.com/-JX8AxaL6pKY/WBsFJ-pz2NI/AAAAAAAAH7M/knyUdogmj_E8Gg3ubzS9MsGEXBqiaxKzgCK4B/s1600/whatsapp-share3.png"
      width="95"
      height="37"
      layout="fixed"
      alt="Share via Whatsapp"></amp-img>

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

6 Comments Add Comment

Asli keren banget tutorialnya gan... Itu nnt dampak positif apa ya?

Balas

Ih bisa gitu. Keren abiss gan

Balas

seperti yang dijelaskan di atas "Jika pengunjung blog mengeklik tombol share whatsapp maka akan semakin meningkatkannya popularitas dan peringkat blog di halaman hasil pencarian (SERP)." :-d

Balas

thanks tampilan wanya jadi keren :3

Balas
Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×