Cara Membuat Share Button WhatsApp di Wordpress - Juragan Review

Juragan Review

Cara Membuat Share Button WhatsApp di WordPress

JuraganReview.com – Cara Membuat Share Button WhatsApp di WordPress | Button share ke sosial media sangat membantu setiap blogger dalam menyebarkan artikel yang berhasil mereka posting di blog / website mereka.

Share button juga membantu kita untuk meningatkan traffic blog / website. Melalui konten yang viral, artikel yang ditulis juga sangat bermanfaat bagi orang lain akan membuat orang lain senang dengan blog / website kita.

Saat ini, banyak para netizen yang melakukan browsing melalui Smartphone. Bahkan dengan smartphone sendiri para netizen dengan leluasanya menyelami dunia maya. Nah, terkadang mereka juga ingin berbagi artikel yang mereka temukan hanya dengan sekali klik bisa langsung share ke WhatsApp teman atau Group WhatsApp mereka tanpa harus copy link url dari postingan blog / website kita.

Nah, bagaimanakah kita memanjakan pengunjung blog / website untuk mereka dengan gampangnya share artikel kita ke Group WhatsApp mereka? Disini JuraganReview.com akan berbagi tips kecil untuk mambuat button share whatsapp di website kita yang berbasi wordpress.

Tips ini merupakan hasil diskusi tim JR dengan salah seorang developer template wordpress yang sudah sangat berpengalaman dalam membuat sebuah themes wordpress dan template – template beliau sudah dipakai oleh website – website besar. Simak ya..

Cara Membuat Share Button WhatsApp di WordPress

Untuk tutorial kali ini saya menggunakan template bawaan dari WordPress yaitu TwentyEleven.

Masuk ke CPANEL website anda, kemudian pergi ke folder tempat kita install themes, biasanya di “/wp-content/themes/namathemes/

Buat file baru format javascript di folder js di cpanel hostingan kita, misal buat saja dengan nama file “custom.js“.

Cara Membuat Share Button WhatsApp di WordPress

Cara Membuat Share Button WhatsApp di WordPress

Setelah file terbuat, silahkan klik kanan dan edit menggunakan code edit, dan paste kan kode dibawah ini.

$(document).ready(function($) {

var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
$(‘.whatsapp’).click(function(e) {
e.preventDefault();
if( isMobile.any() ) {

var text = $(this).attr(“data-text”);
var url = $(this).attr(“href”);
var message = encodeURIComponent(text) + ” – ” + encodeURIComponent(url);
var whatsapp_url = “whatsapp://send?text=” + message;
window.location.href = whatsapp_url;
} else {
alert(“Please share this article in mobile device”);
}
});
});

Setelah itu, silahkan kembali di folder themes kamu, cari “function.php” kemudian edit menggunakan code edit.

Cara Membuat Share Button WhatsApp di WordPress

Cara Membuat Share Button WhatsApp di WordPress

Kemudian silahkan copy kode dibawah ini tepat pada bagian paling bawah saja.

}
function my_scripts_method() {
wp_enqueue_script(‘mycustom’, get_template_directory_uri() . ‘/js/custom.js‘, array(‘jquery’), false, true);
}

Cara Membuat Share Button WhatsApp di WordPress

Cara Membuat Share Button WhatsApp di WordPress

Keterangan : custom.js yang berwarna merah sesuai dengan nama file javasrcipt yang kita buat diawal tadi.

Setelah itu silahkan pergi ke dashboard wordpress rekan – rekan, masuk ke Appearance >> Editor dan pilih “single.php“.

Silahkan copy kode dibawah ini dan letakkan sesua dengan posisi button yang akan kalian letakkan. Apakah berada di bawah judul ata dibawah artikel. Kali ini saya letakkan di bawah artikel pada template TwentyEleven.

<?php
global $post;
$link = get_the_permalink($post->ID);
$judul = get_the_title($post->ID);
?>
<span class=”share_text”>Share:</span>
<a class=”whatsapp” href=”whatsapp://send?text=<?php echo $judul.’ – ‘.$link;?>” title=”Share this on Whatsapp”>WhatsApp</a>

Cara Membuat Share Button WhatsApp di WordPress

Cara Membuat Share Button WhatsApp di WordPress

Saya tambahnya kode </br> sebanyak 2 kali untuk memberikan jarak antara button dan kolom komentar di template.

Langkah terakhir adalah kita membuat kode css untuk button WhatsApp nya. Silahkan rekan – rekan pergi ke Appearance >> Editor dan pilih “style.css“, copy kan kode dibawah dan masukkan kedalam file css dan letakkan saja pada bagian paling bawah.

.whatsapp {
background: #01c42c;
padding: 10px;
}

Dah akhirnya share button WhatsApp sudah berhasil terpasang kedalam template kita.

Cara Membuat Share Button WhatsApp di WordPress

Cara Membuat Share Button WhatsApp di WordPress

Catatan :

  • jika button belum muncul juga silahkan cek posisi anda meletakkan kode button tadi, ataupun segera lakukan shitt+reload browser rekan – rekan.
  • untuk formas css button silahkan sesuaikan dengan keinginan sendiri, dan jika tombol ingin menggunakan gambar sesuaikan pada script yang kita memasukkan pada single.php.
  • share button ini hanya berfungsi ketika rekan – rekan browsing melalui smartphone, belum bisa terintegrasi dengan WhatsApp For Web.

Demikianlah sharing mengenai Cara Membuat Share Button WhatsApp di WordPress yang berhasil tim JuraganReview.com berikan. Semoga dapat memberikan tambahan ilmu yang bermanfaat bagi rekan – rekan sekalian. Mohon komentarnya jika teman – teman juga berhasil mengaplikasikannya.

cara buat link group whatsapp, bagaimana cara membuat tema di watsap, buat link whatsaap, cara membuat iklan di whatsapp, cara membuat url link whatsapp