Social media sharing buttons allow website visitors to easily share your content on various social platforms like Facebook, Twitter, WhatsApp etc. Adding a WhatsApp share button to your website is a great way to increase your website’s reach and traffic.
When a user shares your content on WhatsApp, it gets broadcasted to all their contacts. This viral effect can result in massive growth for your website. WhatsApp currently has over 2 billion monthly active users worldwide. Tapping into even a fraction of this huge userbase can give your website a big boost.
Implementing a WhatsApp share button in your website is quite simple. It requires just a few lines of JavaScript code. No special plugins or libraries required.
In this comprehensive guide, we will go through the step-by-step process of adding a WhatsApp share button to your website using plain JavaScript.
Prerequisites
Before we start adding the WhatsApp share button code, let’s first go over the prerequisites:
– Basic knowledge of HTML, CSS, JavaScript
– Text editor or IDE for writing code
– Web browser for testing
– Access to edit source code of your website
– WhatsApp installed on your phone for testing
As long as you meet these requirements, you are ready to implement WhatsApp sharing in your website. No prior experience in JavaScript needed.
How WhatsApp Sharing Works
WhatsApp sharing relies on a technique called deep linking.
Deep links allow you to directly open a specific page or content within an app. For WhatsApp, the deep link format is:
“`
https://api.whatsapp.com/send?text=urlencodedtext
“`
This link opens WhatsApp and pre-fills the text you want to share.
To share a web page, we need to construct a URL-encoded message containing the page title, URL and description.
For example, to share a page with title “My Website”, URL “https://www.mywebsite.com” and description “Check out my website”, the deep link would be:
“`
https://api.whatsapp.com/send?text=My%20Website%20-%20https://www.mywebsite.com%20-%20Check%20out%20my%20website
“`
When you click this link on a mobile device with WhatsApp installed, it will open WhatsApp with the message pre-filled:
“`
My Website – https://www.mywebsite.com – Check out my website
“`
The user can then simply hit send to share it with their WhatsApp contacts.
This is the mechanism we will leverage to implement WhatsApp sharing in our website.
Step 1 – Add HTML Button
First, we need to add a button on our web page that triggers the WhatsApp sharing when clicked.
Add the following HTML code wherever you want the WhatsApp share button to appear:
“`html
“`
This adds a basic button with the text “Share on WhatsApp”.
We will enhance the styling later. For now, let’s get the functionality working first.
Step 2 – Construct Share URL
Next, we need to dynamically construct the WhatsApp share URL whenever the button is clicked.
Add this JavaScript code:
“`js
const button = document.getElementById(“whatsapp-share-btn”);
button.addEventListener(“click”, function() {
let url = window.location.href;
let title = document.title;
let message = title + ” – ” + url;
let encodedMessage = encodeURIComponent(message);
let whatsappUrl = “https://api.whatsapp.com/send?text=” + encodedMessage;
// More code here soon
});
“`
Breaking down the code:
– Get reference to the button using its ID
– Add click event listener to the button
– Construct message with page title and URL
– URL Encode the message to handle special characters
– Build the WhatsApp share URL with the encoded message
This prepares the share URL that we can use to open WhatsApp.
Step 3 – Open WhatsApp Share
Now when the button is clicked, we need to programmatically open the WhatsApp share URL.
Add this code:
“`js
window.open(whatsappUrl);
“`
So the complete JavaScript now looks like:
“`js
const button = document.getElementById(“whatsapp-share-btn”);
button.addEventListener(“click”, function() {
let url = window.location.href;
let title = document.title;
let message = title + ” – ” + url;
let encodedMessage = encodeURIComponent(message);
let whatsappUrl = “https://api.whatsapp.com/send?text=” + encodedMessage;
window.open(whatsappUrl);
});
“`
The `window.open()` method opens the WhatsApp share URL in a new browser window.
This will trigger the deep linking behavior we discussed earlier.
On mobile devices, it will open WhatsApp with the message pre-filled. On desktop, it will open web.whatsapp.com for sharing.
And we now have a fully functional WhatsApp share button!
Step 4 – Handle Errors
There is one problem with the current code.
If the user does not have WhatsApp installed, the `window.open()` will fail and throw an error.
We need to wrap it in a try/catch block:
“`js
try {
window.open(whatsappUrl);
} catch(error) {
alert(“WhatsApp not installed”);
}
“`
This gracefully handles the error by showing an alert.
The final JavaScript code looks like:
“`js
const button = document.getElementById(“whatsapp-share-btn”);
button.addEventListener(“click”, function() {
let url = window.location.href;
let title = document.title;
let message = title + ” – ” + url;
let encodedMessage = encodeURIComponent(message);
let whatsappUrl = “https://api.whatsapp.com/send?text=” + encodedMessage;
try {
window.open(whatsappUrl);
} catch(error) {
alert(“WhatsApp not installed”);
}
});
“`
Our WhatsApp sharing functionality is now complete!
Step 5 – Customize Button Style
Currently, our share button looks quite plain. Let’s enhance its appearance by adding some CSS.
Add this style:
“`css
#whatsapp-share-btn {
background: #25D366;
color: #fff;
border: none;
padding: 10px 25px;
border-radius: 5px;
font-size: 16px;
}
“`
This makes the button green (matching WhatsApp color) with white text and rounded corners.
To add the WhatsApp icon before the text, use:
“`html
Share on WhatsApp
“`
And add the CSS:
“`css
#whatsapp-share-btn img {
height: 20px;
margin-right: 10px;
}
“`
This inserts a small WhatsApp icon image and displays it before the button text.
You can find the WhatsApp icon PNG images online to download and use in your project.
This gives us a nice customized WhatsApp share button for our website!
Step 6 – Pass Custom Parameters
So far we are simply sharing the page URL and title.
You can also pass additional custom parameters in the message:
“`js
let message = “Check this out! ” + title + ” – ” + url;
“`
This will prepend a custom message to the shared text.
To share content to a specific WhatsApp contact, use:
“`js
let whatsappUrl = “https://api.whatsapp.com/send?text=” + encodedMessage + “&phone=1234567890”;
“`
Where `1234567890` is the mobile number with country code.
You can also pass other custom parameters like:
“`js
let params = “?text=” + encodedMessage + “&phone=1234567890” + “&app_absent=0”;
let whatsappUrl = “https://api.whatsapp.com/send” + params;
“`
Refer the WhatsApp documentation for all supported parameters.
This allows you to customize the shared message as per your requirements.
Conclusion
Adding a WhatsApp share button in your website is very easy with just a few lines of JavaScript. It can significantly boost your website’s reach, traffic and engagement.
Here are the key steps we covered:
– Add a share button in HTML
– Construct WhatsApp share URL with page details
– Open the share URL using `window.open()`
– Handle errors gracefully if WhatsApp not installed
– Customize button style using CSS
– Pass custom parameters like prefilled message, phone number etc
WhatsApp’s huge userbase offers a massive growth opportunity for your website. Implementing WhatsApp sharing is a must for improving your website’s presence on social media.
I hope this tutorial helped you learn how to easily add WhatsApp sharing in your website. Let me know if you have any other questions!