How to Add “Share on WhatsApp” Button on your mobile website

Recently, WhatsApp has released a functionality that allows us to add a “Share” button on our own website, automatically linking our site’s content to our contacts in this famous Facebook-owned messenger.

La efectividad de este botón se explica por sí sola, y en este breve tutorial te mostraré cómo agregar el botón de “Compartir en WhatsApp” a tu propio sitio:

The efectiveness of this button is pretty obvious, because of WhatsApp’s billions of users arount the world. In this short tutorial, I’m going to show you how to add the “Share on WhatssApp” button to your own site:

share on whatsapp button





Here we can see an example of the “Share on WhatsApp” button.

How to add the button on any site: HTML method

Simply copy and customize the following code:

<a href=”whatsapp://send” data-text=”How to create the Share on WhatsApp button on your site:” data-href=”” class=”wa_btn wa_btn_s” style=”display:none”>Share</a>


The most important part is the href that links to “whatsapp://send”. Then, data-text defines the text that will be joining our link. In this case, the text is “How to create the Share on WhatsApp button on your site:”. The following parameter, data-href, refers to wich link will be share. Leave this field empty to share the link of the actual URL. Last but not least, class and style define how our button will be shown. We can customize this option all we want.


How to add the “Share on WhatsApp” button: WordPress dynamic method

<a href=”whatsapp://send?text=<?php the_title(); ?> – <?php urlencode(the_permalink()); ?>” data-action=”share/whatsapp/share” >Share on WhatsApp</a>

This way, the post title will automatically be joining the link, and the button text is “Share on WhatsApp”. Attention: we must add style and class to give this button a design.

That’s it

4 thoughts on “How to Add “Share on WhatsApp” Button on your mobile website

Leave a Reply

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