How to add WhatsApp share button to your website?

Why use WhatsApp button?

WhatsApp is one of the most popular communicator nowadays.It has became alternative of SMS.People are using it to communicate with each other and share stuffs with each other.With rise in popularity of WhatsApp it is important for Blogger to tap WhatsApp for traffic.

You can expect better click through rate on content shared on WhatsApp.WhatsApp is very specific sharing platform.One person shares content with other known person or group of closely known individuals.Since the content comes with trusted and known individuals the click rate on the content is good.

The best way to tap potential of WhatsApp is to add WhatsApp share button on your website.Similar to other social networking buttons share button will make sharing easy for visitors.There are multiple ways you can put WhatsApp share button on your website.

I have outlined ways to put WhatsApp share button on WordPress,Joomla,Drupal and websites powered by other technologies below.Using the method mentioned below you can also track visits received from WhatsApp.You can decide whether to use the button or not on your website seeing the performance of it over a period of time.

It is worth mentioning that mobile traffic is increasing with time. Your website may have 40% or more traffic from Mobile. So using a sharing button of most popular platform will be beneficial. WhatsApp does not have limitation on type of content it is used to share. People can share any type of content on it.

For example if you are programmer then you can share articles related to it with your friends. Chances are that some of your friends will also be programmer or similar job profile.Similarly if you are preparing for job then you will have group of job seekers. So WhatsApp is good fit to share all type of content.

How to add WhatsApp button?

I will start with generic method. The generic method will work for all websites. I would recommend using this method. The reason is you do not have to add extra code. The code is best for performance as well. So even if you are using frameworks like WordPress or Joomla I would recommend this approach.

This one involves easy code changes. If you are not comfortable making code changes you can skip this section and move to next section. Next section shows how you can add the WhatsApp share button using plugins.

Method 1 – All website types

Note this method helps you track WhatsApp share button usage in Google Analytics.The plugins method mentioned later in this article does not have this feature.

Step 1

Download the below JavaScript file.

Download WhatsApp JS File


Click on Facebook like button to download WhatsApp JS File


Step 2

Upload the File to your Server. For example if you are using WordPress then upload it to your theme inside themes folder (wp-content/themes/your-theme/). In fact you can upload it to any folder but uploading theme folder helps you find it easily.

Step 3

Now add below code in your website code. For example if you are using WordPress then add below code to footer.php. In footer.php locate for </body> tag. Add below code before this closing tag.

<script type="text/javascript">
    if(typeof wabtn4fg==="undefined"){
        wabtn4fg=1;
        h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");
        s.type="text/javascript";
        s.src="https://your-domain/wp-content/themes/your-theme/whatsapp.js";
        h.appendChild(s);
    }
</script>

Note if above code you have to modify s.src line. The line is URL to JS file you downloaded in first step. You have to replace the URL with yours. Above URL is created with WordPress users in mind.

If you are WordPress user replace your-domain and your-theme with values as per your website. Once above changes are made you can copy the code to footer.php.Non WordPress users can copy the code to file or place just above </body> tag.

Step 4

Now it is time to add WhatsApp button on your site. You should paste below code where you want to display the button.

<a href="whatsapp://send" data-text="Text you want to Share" class="wa_btn wa_btn_s" data-href="URL you want to share" onClick="ga('send', 'event', { eventCategory: 'Social', eventAction: 'Share', eventLabel: 'WhatsAppShare', eventValue: 0});" >
<button>Share on WhatsApp</button>
</a>

In above code you have to modify two things

data-text

You should replace the text ( Text you want to share) with something relevant to your website. You can also use some placeholder like Awesome website or article you must read.

data-href

This parameter is used to set URL you want to share. You can set it to any URL. But if you want to share page URL the button is placed you should omit this parameter. Your button code in that case will become

<a href="whatsapp://send" data-text="Awesome article you must read" class="wa_btn wa_btn_s" onClick="ga('send', 'event', { eventCategory: 'Social', eventAction: 'Share', eventLabel: 'WhatsAppShare', eventValue: 0});" ><button>Share on WhatsApp</button></a>

Personally I set data-href to home page. But you can either set it or ignore all together.

Step 5

You can now clear your cache and visit the site on mobile. You can try sharing your content on WhatsApp. The button will work fine if everything was implemented correctly.

You can also see usage of button under Google Analytics. On Google Analytics Dashboard navigate to Events sub menu under Behavior menu. On the Page displayed click on Event Label. Number of events with Event Label WhatsAppShare shows shares made by this button.

Method 2 – Only WordPress Sites

The easiest way to put the share button on your website is to use this free plugin.The plugin is present in WordPress repository and can be installed like any other plugin.

Note this plugin is not updated in over couple of years. But it still works fine. You can use it without any issues. There are several new plugins but this one provides option to track the visits in Google Analytics.

Below is the configuration (settings screen) of the plugin.The plugin also provides shortcode.So you can place the button at your preferred location.

whatsapp configuration settings

You can also tracks visits your website received from content shared using WhatsApp share button.This will give you some insight about traffic received because of the share button.I have used the plugin on this very website.It works fine.Also I did see decent traffic from WhatsApp as source.

The plugin displays WhatsApp share button to only mobile traffic.Your desktop visitors will not see the button.So to test whether the button is rendered correctly you will have to browse your website using mobile device.Do not forget to clear your cache before browsing the website.

Method 3 – Only Drupal Sites

Drupal also has free plugin to place WhatsApp share button.You can use this free drupal module to add the button on your website.Currently there is only one plugin for this purpose.

Drupal plugin does not offer tracking the traffic generated from the button nor the button usage data.But you can customize it to include code mentioned in first step.That will help you gather button usage data in Google Analytics.

Method 4 – Only Joomla Sites

Joomla developers have also came up with plugin for this purpose.But as of now there is no free plugin for this purpose.You will have to pay money.Either you can download any of the paid ones or you can follow the step mentioned in first step of the post.

I have not used paid plugins so unable to recommend which one to use.Joomla users can use solution mentioned in first step.

Feel free to share your questions or issues faced.Consider sharing this post in case you found it useful.

13 comments How to add WhatsApp share button to your website?

  1. This is simple. We are using whatsapp share button in both desktop and mobile versions in our website http://www.codeforce.com/jobportal/ 9for your reference). You can use the below code to implement it on your websites too.

    For Web
    <a target="_blank" href="https://web.whatsapp.com/send?text=<&gt;” data-original-title=”whatsapp” rel=”tooltip” data-placement=”left” data-action=”share/whatsapp/share”>

    for mobile app
    <a href="whatsapp://send?text=<>” data-original-title=”whatsapp” rel=”tooltip” class=”btn btn-whatsapp” data-placement=”left”>

    for skype web
    <a target="_blank" href="https://web.skype.com/share?url=<&gt;” data-original-title=”Skype” rel=”tooltip” data-placement=”left”>

  2. How can I trust a code, including “data:image/svg+xml;base64” ?!?
    I will debug it, and if it turns out to be either harmful, or invasive, you will see hell on Earth !

  3. I have included all the code as per your given steps the link gets shared but image is not sharing is there any idea for that

  4. Thanks Esha, can we search to find out how beneficial this Whatsapp share botton on desktop websites will be?
    I appreciate you.

  5. The plugin mentioned in post displays WhatsApp share button and I think there is option to have this on desktop site as well.But not sure how beneficial it would be to display on desktop site

  6. So does it mean that apart from mobile websites, there’s yet NO APP for sharing from desktop website to WhatsApp? Not existing yet? I am looking for desktop to WhatsApp share button, please anyone?

  7. ww43 whatsapp-sharing com/ – link is dead.
    I want to place on my website which I am developing in ASP.NET MVC 4.

    Please let me know where I can grab the code

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *