Integrating a WhatsApp Button in Blogger

Integrating a WhatsApp Button in Blogger

This repository provides instructions and code snippets for integrating a WhatsApp Button in your Blogger blog. The WhatsApp Button allows your visitors to easily contact you via WhatsApp, enhancing user engagement and facilitating direct communication.

Overview

Integrating a WhatsApp Button in your Blogger blog can be a valuable addition to enhance user engagement and facilitate direct communication with your audience. This repository provides two methods to add a WhatsApp Button to your blog posts, along with code snippets and detailed instructions.

Methods

Method 1: Adding Custom CSS Styles

This method involves adding custom CSS styles to your Blogger theme file and using JavaScript and HTML code within each individual blog post. Follow the detailed instructions below to implement this method.

Step 1: Add Custom CSS Styles

<style>
  /* Custom CSS styles for WhatsApp Button */
  .whatsapp-link {
    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-link:hover {
    background-color: #45a049;
  }
  </style>

Step 2: Add JavaScript Function

<script>
  function redirectToWhatsApp() {
    var phoneNumber = "919664833459";
    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>

Step 3: Add WhatsApp Button in Blog Posts

<div>
  <a class="whatsapp-link" onclick="redirectToWhatsApp()">Buy on WhatsApp</a>
</div>

Method 2: Embedding CSS Styles in Theme File

This method involves embedding the CSS styles directly in your Blogger theme file and adding JavaScript and HTML code within each blog post. Follow the detailed instructions below to implement this method.

Step 1: Add CSS Styles

<style>
  /* Custom CSS styles for WhatsApp Button */
  .whatsapp-link {
    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-link:hover {
    background-color: #45a049;
  }
  </style>

Step 2: Add JavaScript Function

<script>
  function redirectToWhatsApp() {
    var phoneNumber = "919664833459";
    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>

Step 3: Add WhatsApp Button in Blog Posts

<div>
  <a class="whatsapp-link" onclick="redirectToWhatsApp()">Buy on WhatsApp</a>
</div>

Usage

1. Choose the method that suits your needs (Method 1 or Method 2).
2. Follow the instructions provided in the respective section to implement the chosen method.
3. Modify the code snippets as per your requirements, such as changing the WhatsApp phone number or customizing the CSS styles.
4. Incorporate the code snippets into your Blogger theme file and individual blog posts.
5. Test the WhatsApp Button functionality by clicking on it and verifying that it opens WhatsApp with the desired message content.

Contributing

Contributions are welcome! If you encounter any issues or have any suggestions for improvements, please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Disclaimer

Please note that integrating the WhatsApp Button in your Blogger blog may require modifications to your theme files and HTML code. Make sure to backup your files before making any changes. Additionally, consider the privacy and data protection regulations applicable to your region when using WhatsApp as a communication channel.

Resources

• Blogger
• WhatsApp for Business