How to Share Content on Whatsapp using jQuery

My readers keep on asking me that How to share information directly from the web page into WhatsApp? So I thought to write a simple tutorial which will help to share articles from the webpage to Whatsapp using jQuery.

Report says that by adding a Whatsapp sharing button on websites that will generate more shares than popular social sharing websites.

Before that I just want to explain you few things

Why Whatsapp?

WhatsApp is one of the most popular messaging apps in the world – Facebook bought whatapp for $19 billion.

One third of world’s population is using Whatsapp on their smartphones. So adding whatsapp share button in your website will be helpful to share content with anyone anytime anywhere!

CSS Code to Style the Whatsapp Share Button

.w3_whatsapp_btn {

background-image: url('icon.png');

border: 1px solid rgba(0, 0, 0, 0.1);

display: inline-block !important;

position: relative;

font-family: Arial,sans-serif;

letter-spacing: .4px;

cursor: pointer;

font-weight: 400;

text-transform: none;

color: #fff;

border-radius: 2px;

background-color: #5cbe4a;

background-repeat: no-repeat;

line-height: 1.2;

text-decoration: none;

text-align: left;

}

.w3_whatsapp_btn_small {

font-size: 12px;

background-size: 16px;

background-position: 5px 2px;

padding: 3px 6px 3px 25px;

}
.w3_whatsapp_btn_medium {

font-size: 16px;

background-size: 20px;

background-position: 4px 2px;

padding: 4px 6px 4px 30px;

}
.w3_whatsapp_btn_large {

font-size: 16px;

background-size: 20px;

background-position: 5px 5px;

padding: 8px 6px 8px 30px;

color: #fff;

}

a.whatsapp { color: #fff;}

I have designed three sizes of button with small, medium & large. Please use it based on your design template.

HTML Code

Please pass the title and url of the post in data-text and data-link attributes.

<a data-text="Your message goes here.." data-link="http://w3lessons.info" class="whatsapp w3_whatsapp_btn w3_whatsapp_btn_large">Share</a>

jQuery Code to Share Articles on Whatsapp

I have used Google’s jQuery CDN. Please place this code in bottom of the page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Below code is used to share the content on Whatsapp. By using the Class Name .whatsapp of the element, we are taking the title and link of the post using HTML5 Data Attributes data-text, data-link

The encodeURIComponent() function encodes a URI component. This function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

The IF statement is used to identify the mobile device because In desktop, whatsapp share will not work.

$(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());

}

};

$(document).on("click", '.whatsapp', function() {

if( isMobile.any() ) {

var text = $(this).attr("data-text");

var url = $(this).attr("data-link");

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");

}

});

});

Please see the live demo in mobile device to share the articles on Whatsapp.

I hope you like this article very much & Please dont forget the share and subscribe my blog to get the latest updates delivered in your email.

Thanks 🙂