How to share anything from your website by Web Share API

In this article we are going to look at Web Share API. With the Web Share API, web apps are able to use the same system-provided share capabilities as platform-specific apps. The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as platform-specific apps.

Web share has the following capabilities and limitations:

• It can only be used on a site that is accessed via HTTPS.
• It must be invoked in response to a user action such as a click.
• It can share, URLs, text, or files.

Sharing links and text

To share links and text, use the share() method, which is a promise-based method with a required properties object. To keep the browser from throwing a TypeError, the object must contain at least one of the following properties: title, text, url or files

// check for support of web share API
if (navigator.share) {
  navigator
    .share({
      title: "This is header/title",
      text: "This is the description",
      url: "https://put-here-url.com",
    })
    .then(() => console.log("Successful share"))
    .catch((error) => console.log("Error sharing", error));
} else {
  console.error("Browser doesn't support Web Share API");
}

You can use this in your function or anywhere you want. But before you do that you should remember one thing that it does not support by old version browsers.

So you need to make sure that you handle that case. For example the above code will console the error if it doesn't support the Web Share API but it's my preference that you should only show the share button if browser supports it, otherwise hide the button.

Here is the example code what i was saying

const btn = document.getElementById("btn");

// function for web share api
function webShareAPI(header, description, link) {
  navigator
    .share({
      title: header,
      text: description,
      url: link,
    })
    .then(() => console.log("Successful share"))
    .catch((error) => console.log("Error sharing", error));
}

if (navigator.share) {
  // Show button if it supports webShareAPI
  btn.style.display = "block";
  btn.addEventListener("click", () =>
    webShareAPI("header", "description", "www.url.com")
  );
} else {
  // Hide button if it doesn't supports webShareAPI
  btn.style.display = "none";
  console.error("Your Browser doesn't support Web Share API");
}

Try it on Codepen

Conclusion

Now you can use this API for your personal projects or wherever you want. you can do much more than that you can take the custom input or maybe you want to share you blog then you can use this. If you learned something new then 👍, and consider to follow.

You can now extend your support by buying me a Coffee.😊👇

Also Read

• 10 CSS Resources that you should bookmark
• Some Javascript Methods you should know
• CSS Gradient Loading Animation