Adding a Share on WhatsApp Button to your Website

Whatsapp is the latest trend in social networking. Web developers already use facebook and twitter, but the latest is Whatsapp. Very few websites have implemented the "Share on Whatsapp" button on their websites. Using this button the viewer can easily share your web-page link to his/her Whatsapp contacts through the Smartphone. The only drawback of this feature is that it works only when somebody accesses it via a smartphone with Whatsapp installed on it.


So lets see how we can implement it on your website. I personally used in on the right column of my website, which remains intact in every post. The code is very simple and given below.

<table><tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9FweaQEXKJA6Mw9wN-u-5k9RSPNLqxcBQFgADLDlncT-H-mG1nHcWza9X3chCko76pQy-29v96YpGrVfQh7OebpLuY6YlHkQXI6Kp73xyCeEGlaBR8d7igBF7VneKn6KfbPq241D1YLRv/s1600/whatsapp.jpg" height="25" /></td>
<td height="30"><a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fbestrix.blogspot.com%2F"
 onmouseover="this.href='whatsapp://send?text='+encodeURIComponent(location.href);"><b>Share on Whatsapp</b></a></td>
</tr></table>

Live Preview:

Share on Whatsapp

If you want to understand the code a bit more, then the above code is a bit lengthy (just provide the right look). The real code is given below.

<a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fbestrix.blogspot.com%2F"
 onmouseover="this.href='whatsapp://send?text='+encodeURIComponent(location.href);"><b>Share on Whatsapp</b></a>

In this code the event onmouseover is used to change the link to currently viewed page by the user. But if you want this code to just share the link of your homepage then you can make it simple, just like provided below.

<a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fbestrix.blogspot.com%2F"><b>Share on Whatsapp</b></a>

Note: In the above code i have maked the name of my blog with green color. Your can change that part by your websites name. Don't use "http://" or "/" mark in that name as its already there in encoded format.

If you know some HTML programming skills then you can modify the code to make it look like anything.

Here are some articles to help you in HTML programming :