DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to share anything from your website by Web Share API
Jatin Sharma
Jatin Sharma

Posted on • Updated on

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");
}
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

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.๐Ÿ˜Š๐Ÿ‘‡

Buy Me A Coffee

Also Read

Top comments (8)

Collapse
 
sapinder_dev profile image
Sapinder Singh

In the browsers that donโ€™t support it, you can handle this case by manually copying the link via clipboard api when the user clicks on it.

Collapse
 
j471n profile image
Jatin Sharma Author

Yeh that's a nice suggestion, thanks for your opinion :)

Collapse
 
marvinbrouwer profile image
Marvin Brouwer

I personally like the scenario where you show a link with an onClick event that prevents browsing so a user can hold(or right click) to get the native share dialog if they desire. And then put a share button next to that with a fallback to the clipboard API.
I whipped up a quick example:
codesandbox.io/s/suspicious-rosali...
It's full of flaws and not really visually pleasing but this is kind of what I meant.

Thread Thread
 
sapinder_dev profile image
Sapinder Singh

Check out how I implemented the share thing in my blog- blog.sapinder.dev

Collapse
 
iacons profile image
Iacovos Constantinou

Nice post @j471n !

As you have mentioned, Web Share API is not supported in old browser versions. In general, there is a good support for mobile devices. However, there is partial support for desktop devices. For instance, Chrome has support only for Windows and Chrome OS. Firefox has no support at all.

Further details can be found here caniuse.com/web-share

Collapse
 
j471n profile image
Jatin Sharma Author

Yeh that's totally right, that's for sharing your views :)

Collapse
 
palalet profile image
RadekHavelka

one quick note - on windows / chrome it only offers the apps you have downloaded via Store, so you cannot share to facebook and others because the system doesn't "know them". This is very nice solution, thanks for sharing, but be aware of this gotchas.

Collapse
 
j471n profile image
Jatin Sharma Author

Yeh I will make a seperate post for that, in which you can share the article or anything on famous social media platforms and integrated with web share API as well.

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!