Simple Share Button in JavaScript

A simple share button allows users to share content (like a URL or a message) on social media platforms, email, or other methods. Here's a basic implementation of a share button in JavaScript that lets users share content on Facebook, Twitter, and via email.

Steps to Create a Simple Share Button

1. HTML Structure

First, let's set up a simple HTML layout for the share button. This button will allow users to share the page's URL on different platforms.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Share Button</title>
  <style>
    /* Style for the button container */
    .share-buttons {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 20px;
    }

    /* Style for each button */
    .share-button {
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

    .share-button:hover {
      background-color: #45a049;
    }

    /* Style for icons */
    .share-button img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  </style>
</head>
<body>

  <h1>Share This Page</h1>

  <div class="share-buttons">
    <button class="share-button" id="shareFacebook">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/1200px-Facebook_f_logo_%282019%29.svg.png" alt="Facebook"> Share on Facebook
    </button>
    <button class="share-button" id="shareTwitter">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Twitter_Logo_2021.svg/1200px-Twitter_Logo_2021.svg.png" alt="Twitter"> Share on Twitter
    </button>
    <button class="share-button" id="shareEmail">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Email_icon.svg/1200px-Email_icon.svg.png" alt="Email"> Share via Email
    </button>
  </div>

  <script src="app.js"></script>
</body>
</html>

2. JavaScript to Handle the Share Logic

In your app.js file, you can write the logic to handle sharing. Each button will open the relevant social media sharing link or email sharing functionality.

// Select the share buttons
const shareFacebook = document.getElementById('shareFacebook');
const shareTwitter = document.getElementById('shareTwitter');
const shareEmail = document.getElementById('shareEmail');

// Get the current page URL
const pageURL = window.location.href;
const pageTitle = document.title; // You can customize the title if needed

// Facebook sharing URL
const facebookURL = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageURL)}`;

// Twitter sharing URL
const twitterURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageURL)}&text=${encodeURIComponent(pageTitle)}`;

// Email sharing URL (mailto)
const emailURL = `mailto:?subject=${encodeURIComponent(pageTitle)}&body=${encodeURIComponent(pageURL)}`;

// Add click event listeners to the share buttons
shareFacebook.addEventListener('click', () => {
  window.open(facebookURL, '_blank', 'width=600,height=400');
});

shareTwitter.addEventListener('click', () => {
  window.open(twitterURL, '_blank', 'width=600,height=400');
});

shareEmail.addEventListener('click', () => {
  window.location.href = emailURL; // This opens the user's default email client
});

Explanation of the Code:

HTML:
- There are three buttons, each representing a platform (Facebook, Twitter, and Email), with corresponding icons for a better user interface.
- Each button has an id to identify them in the JavaScript file.
CSS:
- Simple styling is added to make the buttons look good. The buttons have a green background that turns darker when hovered.
- Icons are included before the button text to visually represent the platforms.
JavaScript:
- Get the Page URL: The pageURL variable stores the current URL of the page using window.location.href.
- Facebook Share: The facebookURL is the URL for Facebook's share dialog, with the page URL passed as a query parameter.
- Twitter Share: Similarly, the twitterURL creates a URL that allows users to share the current page on Twitter.
- Email Share: The emailURL is a mailto link, which opens the default email client with a pre-filled subject and body (page title and URL).
- Event Listeners: For each button, an event listener is attached. When a button is clicked, it opens a new window or tab (window.open()) with the relevant share URL or performs the email action (window.location.href).

Enhancements and Customizations

Custom Text: You can modify the pageTitle and pageURL to share a specific text or link, depending on the context (e.g., sharing a specific product or post).
More Platforms: You can add more social media platforms by following the same pattern, like LinkedIn, WhatsApp, or Pinterest.
Mobile-Friendly: Ensure the buttons are styled and responsive for mobile devices by using media queries and adjusting the button sizes and layout accordingly.
Popup Options: Customize the size and appearance of the share window. For instance, you can set the width and height for each social media window to create a more user-friendly share experience.

Conclusion

This is a simple and effective way to create a share button in JavaScript for sharing URLs on popular platforms like Facebook, Twitter, and via Email. You can easily extend this by adding more platforms or customizing the appearance and functionality further to suit your needs.

Souy Soeng

Simple Share Button in JavaScript