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
  1. 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;}
    
  2. Selanjutnya buat pemanggilnya, nanti pemanggilnya bisa diletakan di node.tpl.php
  3. Atau jika menggunakan display suite, Anda bisa menambahkannya ke layout display suite yang digunakan
  4. 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>
    
  5. 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

Related Posts :

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

Post a Comment

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...