Cara Membuat Tombol Share WhatsApp di Drupal

Pada kesempatan sebelumnya sudah di share tentang bagaimana cara membuat tombol share secara manual di drupal, dimana yang digunakan untuk share terdiri dari twitter, facebook dan google plus

Jika misalnya kita menginginkan adanya tombol share untuk ke WhatsApp maka Anda tinggal menggunakan cara sebelumnya [ Baca : Membuat Tombol Share Sosial Media di Drupal Tanpa Module ] bedanya hanya terletak pada jenis api share yang digunakan serta style/gaya untuk whatsApp, jadi hanya tinggal ditambah saja

Cara Membuat Tombol Share WhatsApp di Drupal

Buat kode css seperti berikut :

/** Share */
.shareroot{position:relative;display:block;overflow:hidden;margin:20px 0;padding:15px 0;}
.sh-title{display:block;float:left;height:30px;line-height:30px;margin:8px 15px 8px 0;padding:0}
.sh-title strong{font-size:16px;display:block}
.shareroot a{float:left;font-size:12px;line-height:30px;color:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin:8px 3px;padding:0; 10px;height:30px;min-width:30px;text-align:center;}
.shareroot a:hover{background-color:#222;color:#fff;}
.shareroot a i.fa{margin-right:7px;font-size:12px;}
.shareroot .facebook{background-color:#003471;}
.shareroot .twitter{background-color:#00BFF3;}
.shareroot .googleplus{background-color:#EA4D29;}
.shareroot .whatsapp{background-color:#08CB3A;}
.shareroot .blackberry{background-color:#000;}
.shareroot .line{background-color:#09962D;}
.shareroot .pinterest{background-color:#C6393D;}
.shareroot .linkedin{background-color:#0077B5;}

Selanjutnya buat pemanggilnya, nanti pemanggilnya bisa diletakan di node.tpl.php
Atau jika menggunakan display suite, Anda bisa menambahkannya ke layout display suite yang digunakan

Nanti kurang lebih kodenya seperti berikut

<div class="shareroot">
<div class='sh-title'>
 <strong>SHARE THIS</strong>
 </div>

<a class="facebook" href="https://www.facebook.com/sharer.php?u=<?php global $base_root; print $base_root . $node_url; ?>" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-facebook color-facebook"></i></a>

<a class="twitter" href="https://twitter.com/intent/tweet?text=<?php print $title; ?>&amp;url=<?php global $base_root; print $base_root . $node_url; ?>&amp;via=Pangandaranlife" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-twitter color-twitter"></i></a>

<a class="googleplus" href="https://plus.google.com/share?url=<?php global $base_root; print $base_root . $node_url; ?>" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-google-plus color-google"></i></a>

<a class="whatsapp" href="whatsapp://send?text=<?php global $base_root; print $base_root . $node_url; ?>" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-whatsapp color-whatsapp"></i></a>
</div>

Terakhir simpan semua perubahan yang telah ditambahkan

Kurang lebih nanti jika berhasil, tombol share akan ditampilkan seperti berikut ini

Cara Membuat Tombol Share WhatsApp di Drupal

Untuk cara penggunaan Api share WhatsApp bisa dilihat di :https://faq.whatsapp.com/en/android/26000030/
Ket:

<?php global $base_root; print $base_root . $node_url; ?>

adalah kode untuk mendapatkan nilai url dari halaman aktif yang sedang diakses pengunjung.

Baca juga : Mendapatkan Judul Artikel Saat Menekan Tombol Pesan WhatsApp di Drupal

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Cara Membuat Tombol Share WhatsApp di Drupal

0 Response to "Cara Membuat Tombol Share WhatsApp di Drupal"

Post a Comment