How to Share Content on WhatsApp using jQuery

In this tutorial we are going to learn How to Share Content on WhatsApp using jQuery. WhatsApp is one of the best messaging client all around the world. WhatsApp has 700 Million active users. So by implementing WhatsApp Share Button on your site, can help your visitors to share your content with their friends easily and WhatsApp share button generate more shares than any other Social Website.

LIVE DEMODOWNLOAD

We are using HTML5 attributes ‘data-text‘ for article title and ‘data-link‘ for article link. When we click on share button, jQuery and encodeURIComponent function create the full message and share on WhatsApp.

jQuery

$(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("This option is only available on mobile devices.");
}

});
});

HTML

HTML part contain only a link tag (<a>), but we are using some HTML5 attributes in this tag, i.e., data-text for article title and data-link for article link as already mention above.

<a data-text="<--Text To Display in Message-->" data-link="<-Link to send in message-->" class="whatsapp">Share</a>

CSS

Now to style the above Share button we use some CSS.

.whatsapp{
background-image: url('whatsapp.png'); 
border: 1px solid #5cbe4a; 
display: inline-block !important; 
position: relative; 
cursor: pointer; 
text-transform: none;
color: #fff; 
border-radius: 5px; 
background-color: #28A619; 
background-repeat: no-repeat; 
background-position: 5px; 
line-height: 1.2; 
text-decoration: none; 
text-align: left;
padding: 6px 6px 6px 30px;
letter-spacing: .6px;
font-size:16px;
font-weight:bold;
}
.whatsapp:hover{
text-decoration:none;
color:#FFF;
}

You can use own CSS to style button as your requirement.

LIVE DEMODOWNLOAD