Hai my dear blog readers,
In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc.
We are using HTML5 attributes data-text for article text and data-link for article URL. Once we click on share button, using jQuery and encodeURIComponent function we created the full message and share on whatsapp.
Here is the code regarding this please copy and paste code as it is.
Here we need to add jQuery CDN from google. If you have this file in your local you can load from there with latest one. You can add this file <head> </head> section (or) bottom of page.
HTML Code:
CSS Style:
.whatsapp-btn {
background-image: url('');
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;
}
.btn-small {
font-size: 12px;
background-size: 16px;
background-position: 5px 2px;
padding: 3px 6px 3px 25px;
}
.btn-medium {
font-size: 16px;
background-size: 20px;
background-position: 4px 2px;
padding: 4px 6px 4px 30px;
}
.btn-large {
font-size: 16px;
background-size: 20px;
background-position: 5px 5px;
padding: 8px 6px 8px 30px;
color: #fff;
}
a.whatsapp { color: #fff;}
jQuery Code:
$(document).ready(function() {
$(document).on("click",'.whatsapp',function() {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
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("Oh Sorry! Please share this content in mobile device");
}
});
});
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.
I hope you like this article very much & Please don't forget to share .
Thankyou
In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc.
We are using HTML5 attributes data-text for article text and data-link for article URL. Once we click on share button, using jQuery and encodeURIComponent function we created the full message and share on whatsapp.
Here is the code regarding this please copy and paste code as it is.
Here we need to add jQuery CDN from google. If you have this file in your local you can load from there with latest one. You can add this file <head> </head> section (or) bottom of page.
"//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
HTML Code:
<a data-text="How to share content on whatsapp using jQuery.." data-link="http://tekinfotree.blogspot.in/" class="whatsapp whatsapp-btn btn-large">Share on Whatsapp</a> |
CSS Style:
.whatsapp-btn {
background-image: url('');
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;
}
.btn-small {
font-size: 12px;
background-size: 16px;
background-position: 5px 2px;
padding: 3px 6px 3px 25px;
}
.btn-medium {
font-size: 16px;
background-size: 20px;
background-position: 4px 2px;
padding: 4px 6px 4px 30px;
}
.btn-large {
font-size: 16px;
background-size: 20px;
background-position: 5px 5px;
padding: 8px 6px 8px 30px;
color: #fff;
}
a.whatsapp { color: #fff;}
jQuery Code:
$(document).ready(function() {
$(document).on("click",'.whatsapp',function() {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
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("Oh Sorry! Please share this content in mobile device");
}
});
});
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.
I hope you like this article very much & Please don't forget to share .
Thankyou
This content is really great. Thanks for sharing..
ReplyDeleteশেয়ার ব্যবসা
অল্প পুজিতে লাভজনক ব্যবসা