WhatsApp Sharing Button For More Traffic

Posted on Posted in PHP, Technology

WhatsApp is one of the most popular communicator nowadays when it comes to mobile apps. As WhatsApp is one of the most popular messaging app. Almost everyone have this app even now it is available on web too.

So today we will learn how to add WhatsApp button on wordpress and other website. Just imagine what will happened after adding sharing button to your blog and what kind of immense traffic it will bring to your website. You can expect better click through rate on content shared on WhatsApp.

WhatsApp sharing button to wordpress website

As we all know most of the users use WhatsApp as a android app, so it’s good to have a check of mobile device and then added a chunk of code to add whatsApp sharing button at desired location. The below code is to add a sharing button below a post. Pass the arguments as mentioned in the syntax.

if ( wp_is_mobile() ) {
<a data-text="<?php echo get_the_title($post_id); ?>"; data-link="<?php echo get_the_permalink($post_id); ?>" class="whatsapp w3_whatsapp_btn w3_whatsapp_btn_large" href="whatsapp://send?text=<?php echo get_the_title($post_id); ?> - <?php echo get_the_permalink($post_id); ?>"><i class="fa fa-whatsapp" aria-hidden="true"></i>WhatsApp</a>
<?php } ?>

Above is the simplest example to add WhatsApp sharing button in the wordpress website. Eventually I will create a simple plugin and come soon with it which will gives customer a better UI and other options too!!

WhatsApp sharing button on other website

It’s quite easy to add a WhatsApp button in other websites. We need to follow very simple steps, need to detect that whether application is opened in a mobile device, tab etc or not. Then need to add a simple one line code. Below is the code snippet.

<script type="text/javascript">
jQuery(document).ready(function() {
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
	//make visible this anchor tag and when a user clicks on it rest code will work the same...
	 	<a style="border-color:#5CBE4A; color:#5CBE4A;" data-text="msg title/post title" data-link="post link" class="whatsapp" href="whatsapp://send?text=text need to send with link"><i class="fa fa-whatsapp" aria-hidden="true"></i>WhatsApp</a>