Update! Add WhatsApp Button On Amp-social-share Fixed Show Hide

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/04/2016

Kemarin saya telah share cara memodifikasi amp-social-share menjadi fixed amp-social-share with show hide and animation dengan tombol linkedin, pinterest, facebook, google+, dan twitter. Nah kini kita akan menambahkan tombol share WhatsApp yang kemarin dibagikan sama Kang Ismet (tombol WA ini tidak ada di default amp-social-share).

Secara, blog dengan AMP HTML dibuat untuk kemudahan akses pengguna mobile. Sementara aplikasi Whatsapp banyak digunakan oleh pengguna mobile. Maka berbagi artikel blog melalui aplikasi Whatsapp merupakan salah satu cara untuk meningkatkan pageview blog dari pengguna mobile.

Untuk itu, sebaiknya pemilik blog menyediakan tombol berbagi sosial media untuk aplikasi Whatsapp ini untuk memudahkan pengunjung mobile berbagi artikel blog.


Silahkan coba lihat penampakan tombolnya pada demo, untuk mencoba berbagi ke WhatsApp silakan coba dengan perangkat mobile Anda.

Ini hanya merubah beberapa kode dari tutorial sebelumnya, jadi silahkan buka juga postingan tentang fixed amp-social-share with show hide and animation.

Kemudian silahkan ganti kode pada langkah kedua dengan kode di bawah ini.

              <b:includable id='share-tool' var='post'>

<amp-accordion class='shares'>

    <section>

<h4 class='show-share'>

<div class='show-more rotateIn'><i class='material-icons'>&#59405;</i></div>

<div class='show-less rotateIn'><i class='material-icons'>&#58829;</i></div>

</h4>

<div class='share-icon'>

<ul class='slideInUp'>

   <li class='slideInUp1'> <amp-social-share height='50' type='twitter' width='50'/></li>

   <li class='slideInUp2'> <amp-social-share height='50' type='gplus' width='50'/></li>

   <li class='slideInUp3'> <amp-social-share data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li>

   <li class='slideInUp4'> <amp-social-share height='50' type='pinterest' width='50'/></li>

   <li class='slideInUp5'> <amp-social-share height='50' type='linkedin' width='50'/></li>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<li class='slideInUp5 wa'>

<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Ada yang keren lho, nyesel kalo ga buka.. kunjungi: &quot; + data:blog.url' layout='container' type='whatsapp'>

    <amp-img alt='Share via Whatsapp' height='35' layout='fixed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSi_I6Mw1T2JMaylnLPREGdmxAzzcB3562qt-wGVR6fEHDNJ9I8w4YahDK0PjPqtQYwCNwxDILjJArHPqi6a0vbtKVAkctasKt_shgifo20MSVB6bG_cg88WxrtadJsQGr8JmrBK0JXiT/s1600/wa.png' width='35'/>

</amp-social-share>

</li>

</b:if>

  </ul>

      </div>

  </section>

  </amp-accordion>

<div class='clear'/>

</b:includable>

Kemudian tambahkan kode css ini pada kode CSS langkah keempat.

amp-accordion.shares li.wa amp-social-share{background:#38bd4c;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center}

amp-accordion.shares li.wa amp-social-share amp-img{vertical-align:middle}

Selesai...