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.Now WhatsApp is available for mobile as well as web.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.

On all the methods mentioned below whatsapp button is only displayed to mobile users.Desktop users will not see the button.I do not think it as limitation as majority of users are mobile users.

WhatsApp share button on WordPress Website

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.

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 bounce rate and tie on site is also decent.So the traffic is good.

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.

WhatsApp share button on Drupal Website

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 last step.That will help you gather button usage data in Google Analytics.

WhatsApp share button on Joomla Website

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 at the end of the post.

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

WhatsApp share button all websites

This step is applicable for all websites.If you are not comfortable using the plugin or no plugin is available for your content management system then you can use this approach.The plugins also use this approach so there is basically no difference between this one and plugin way.

  • Go to the WhatsApp sharing button github page (link to website)
  • Select your button size.I prefer the large one
  • You can modify the button text and share text as per your requirement.
  • If you want to share one particular URL then you can mention that custom URL.But if you to share the URL on which the button is places then select option current page URL
  • Now you can copy the button code and then download the resources.
  • You need to upload these files to your server.The JS file should be included in your page on which the button code is placed.

Above steps will help you get the share button on your website.If you have Google Analytics installed on your website you can use below code to track traffic generated from button.

onClick="ga('send', 'event', { eventCategory: 'Social', eventAction: 'Share', eventLabel: 'WhatsAppShare', eventValue: 0});"

So your final button code will become

<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="wa_btn wa_btn_l" style="display:none" onClick="ga('send', 'event', { eventCategory: 'Social', eventAction: 'Share', eventLabel: 'WhatsAppShare', eventValue: 0});" >Share on WhatsApp</a>

With this code you can see how many times visitors have clicked on this button.So it gives fair idea of usage.You can add above code to code generated by WordPress plugin as well.After adding this code you can see button usage in Events section under Behavior option of your Analytics dashboard.

The above code will only work if you have Google Analytics universal code installed on your webpage.If you do not have Google Analytics universal code installed you should do so.

Conclusion

I have seen decent results using this button on my website.The button does not impact much on performance as well.The JS file mentioned in last step is 6KB is size.You can also defer load the file to minimize the impact.There are no additional requests.

I do not prefer using too many social networking buttons.You should use three or four best performing social media buttons.WhatsApp button does outperform other social media buttons on mobile traffic.So preferred using it on my mobile website.

The official social media buttons are too heavy.As performance is important factor in mobile search ranking using too many official plugins can impact your website Mobile Friendliness.Performance impact of social media button and their usage statistics should be examined to make decision whether they should be included on your website or not.

Based on it I decided to use it on my website.I would recommend using this button on your mobile website as well.Feel free to share your thoughts on WhatsApp share button or any questions you have while implementing this on your website.

4 thoughts on “How to add WhatsApp share button to your website?

  1. 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!

    • I have updated the link.Please use the Github page for implementation details

      • Thank you. I will try that and come back here with what I get.

  2. is it possible to share image on whatsapp from a website?

Leave a Comment