Website Share Info in Whatsapp, Facebook, Instagram, Email and etc

Published On - November 12, 2024

yawhuat News, Tutorial, Web Design, Web Design Penang

Here’s the straightforward solution: Do you want to share your web content directly to WhatsApp, Telegram, or other social media platforms? Instead of relying on plugins, there’s a more effective method using simple HTML, CSS, and JavaScript. Check out the sample website below. When you press “share,” it activates the browser’s Share API, allowing you to share content or messages seamlessly to WhatsApp, Telegram, X (formerly Twitter), email, and more.

Brower Web Share API

The Web Share API is a browser feature that enables websites to share content—such as text, links, and files—directly with native apps on a user’s device, including messaging apps (WhatsApp, Telegram), social media apps (Twitter, Facebook), email, and more. This API makes it possible to add a native share feature to a website without needing complex third-party plugins.

Key Points About the Web Share API:

  1. Easy Integration: By using JavaScript, developers can invoke the API to open the native share dialog of the browser or device.
  2. Cross-App Sharing: Users can share content directly to other installed apps, making it a smooth experience similar to native mobile apps.
  3. Support for Multiple Content Types: It allows sharing of links, text, and media files (e.g., images or videos), depending on the platform’s support.
  4. Limited Browser Support: As of now, the Web Share API is primarily supported on mobile browsers (Android and iOS Safari) and some desktop browsers.

 Example Share Button

Share Button Javascript

HTML Code

<!–Share Button–>
<div id=”share”><i class=”bi bi-share”> Share</i></div>
<!–Ends Share Button–>

Javascript Code

let share = document.getElementById(“share”);
const sharedata = {
  title: “This is for the message title”,
  text: `All your data and info here`,
  url: “https://www.rainbowseniorcare.com/”,
};
share.addEventListener(“click”, async () => {
  console.log(“Share clicked”);
  try {
    await navigator.share(sharedata);
  } catch (err) {
    console.log(err);
  }
});