What’s your excuse for not using the web share API?

codepo8

Christian Heilmann

Posted on November 16, 2024

What’s your excuse for not using the web share API?

The WebShare API is so easy to use, it is a crime people don't use it more. Instead, we have tons of dead "share on $thing" buttons on the web. Many of which spy on your users and lots of them that started as Wordpress plugins but now are security concerns. Instead of guessing how your visitors want to share the current URL or a file you provide, you can call the API and they can pick their favourite:

Animation of the web share API in action. With 10 lines of Code you can turn a button into a share button

This is the code and you can also check it on codepen:

let shareButton = document.querySelector('button');
shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});
Enter fullscreen mode Exit fullscreen mode

An empty url means the current document is shared. You can also add a different title, which makes more sense than "Example page".

💖 💪 🙅 🚩
codepo8
Christian Heilmann

Posted on November 16, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related