Integrating a WhatsApp Button in Blogger
Method 1: Adding Custom CSS Styles
For beginners, the first method involves adding custom CSS styles to your Blogger theme file and using JavaScript and
HTML code within each individual blog post. Follow the steps below:
- Open your Blogger theme file.
- Locate the <head> section and add the WhatsApp Button CSS code.
- Save the changes to your theme file.
- Open each individual blog post and add the HTML and JavaScript code at the end of the post's content.
- Replace "YOUR_PHONE_NUMBER" in the JavaScript code with your actual phone number.
- Save and publish each blog post.
Method 1 Code Snippet
<style>
.whatsapp-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
font-family: Arial, sans-serif;
transition: background-color 0.3s;
}
.whatsapp-button:hover {
background-color: #45a049;
}
</style>
<div>
<a class="whatsapp-button" onclick="redirectToWhatsApp()">Buy on WhatsApp</a>
</div>
<script>
function redirectToWhatsApp() {
var phoneNumber = "YOUR_PHONE_NUMBER";
var title = document.querySelector(".post-title").innerText;
var description = document.querySelector(".post-body").innerText;
var firstImage = document.querySelector(".post-body img");
var imageSrc = firstImage ? firstImage.src : "";
var postLink = window.location.href;
var message = "Title: " + title + "\n\n";
message += "Description: " + description + "\n\n";
message += "Image: " + imageSrc + "\n\n";
message += "Post Link: " + postLink;
var encodedMessage = encodeURIComponent(message);
var whatsappUrl = "https://api.whatsapp.com/send?phone=" + phoneNumber + "&text=" + encodedMessage;
window.open(whatsappUrl);
}
</script>
Method 2: Embedding CSS Styles in Theme File
For immediate integration, the second method involves embedding the CSS styles directly in your Blogger theme file,
and adding JavaScript and HTML code within each blog post. Follow the steps below:
- Open your Blogger theme file.
- Embed the WhatsApp Button CSS styles directly in the <body> section of your theme file.
- Save the changes to your theme file.
- Open each individual blog post and add the HTML and JavaScript code at the end of the post's content.
- Replace "YOUR_PHONE_NUMBER" in the JavaScript code with your actual phone number.
- Save and publish each blog post.
Method 2 Code Snippet
<script>
function redirectToWhatsApp() {
var phoneNumber = "YOUR_PHONE_NUMBER";
var title = document.querySelector(".post-title").innerText;
var description = document.querySelector(".post-body").innerText;
var firstImage = document.querySelector(".post-body img");
var imageSrc = firstImage ? firstImage.src : "";
var postLink = window.location.href;
var message = "Title: " + title + "\n\n";
message += "Description: " + description + "\n\n";
message += "Image: " + imageSrc + "\n\n";
message += "Post Link: " + postLink;
var encodedMessage = encodeURIComponent(message);
var whatsappUrl = "https://api.whatsapp.com/send?phone=" + phoneNumber + "&text=" + encodedMessage;
window.open(whatsappUrl);
}
</script>
<style>
/* WhatsApp Button CSS */
.whatsapp-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
font-family: Arial, sans-serif;
transition: background-color 0.3s;
}
.whatsapp-button:hover {
background-color: #45a049;
}
</style>
<div>
<a class="whatsapp-button" onclick="redirectToWhatsApp()">Buy on WhatsApp</a>
</div>
Conclusion
Integrating a WhatsApp Button in your Blogger blog can be a valuable addition to enhance user engagement and facilitate
direct communication with your audience. By following the steps outlined in this blog post, you can easily add a
WhatsApp Button to your blog posts using custom CSS styles and JavaScript code.
Disclaimer
Before implementing any changes to your Blogger theme or modifying your blog's code, it's recommended to create a
backup of your theme files and proceed with caution. Additionally, always test the functionality of the WhatsApp Button
after implementation to ensure it's working as intended.