Skip to content

Instantly share code, notes, and snippets.

@homaily
Created April 8, 2015 13:44
Show Gist options
  • Select an option

  • Save homaily/f2614b73757ac61ec999 to your computer and use it in GitHub Desktop.

Select an option

Save homaily/f2614b73757ac61ec999 to your computer and use it in GitHub Desktop.
Whatsapp share button
<a alt="Whatsapp" href="whatsapp://send" data-text="Text to share" data-href="http://example.com/url-to-share" class="whatsapp wa_btn"><span class="ion-social-whatsapp"></span> Whatsapp</a>
waShBtn = function() {
if( this.isIos === true ) {
var b = [].slice.call( document.querySelectorAll(".wa_btn") );
for (var i = 0; i < b.length; i++) {
var t = b[i].getAttribute("data-text");
var u = b[i].getAttribute("data-href");
var o = b[i].getAttribute("href");
var at = "?text=" + encodeURIComponent( t );
if (t) {
at += "%20%0A";
}
if (u) {
at += encodeURIComponent( u );
} else {
at += encodeURIComponent( document.URL );
}
b[i].setAttribute("href", o + at);
b[i].setAttribute("target", "_top");
b[i].setAttribute("target", "_top");
b[i].className += ' activeWhatsapp';
}
}
}
waShBtn.prototype.isIos = ((navigator.userAgent.match(/Android|iPhone/i) && !navigator.userAgent.match(/iPod|iPad/i)) ? true : false);
var theWaShBtn = new waShBtn();
.whatsapp{
display: none;
color: #1DC143;
}
.whatsapp:hover, .whatsapp:focus{
background: #1DC143;
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,0.2);
}
.whatsapp.activeWhatsapp{
display: inline-block;
}
@iitpranata

Copy link
Copy Markdown

Hi, Abdulaziz Homaily
Thank You for the code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment