Before you go, check out these stories!

0
Hackernoon logoWeb Share API Tutorial: Cool And Simple Way To Implement Share Button by@arryanggaputra_

Web Share API Tutorial: Cool And Simple Way To Implement Share Button

Author profile picture

@arryanggaputra_Arryangga Aliev Pratamaputra

One of the coolest features nowadays on Website World is the Web Share API, this feature provides the ability to share content on a website like we do share action on native applications.

If previously we depend on widgets like AddThis or ShareThis to share a web content, now the widget can already be replaced by this feature. In my personal opinion, the features offered by Web Share API is so much better.

Unfortunately, this feature can only be enjoyed on the Google Chrome platform only, I really hope the future of all browsers can implement this feature on their platform. Here are more details:

(Browser compatibility)

How To Use Web Shareย API1

1. Your website must be served overย HTTPS

If you are in the development process and attempt to use https:// to try out the features you have applied, I recommend using the service from http://serveo.net, with only 1 command in the command line, your website can be directly served with https:// without installation or registration, it is easy enough:

ssh -R 80:localhost:3000 serveo.net

(Iโ€™m using ngrok already, need to do installation and registration ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ)

2. You can only invoke the API in response to a userย action

You can only invoke the API in response to a user action, such as a click (e.g., you canโ€™t call navigator.share as part of the page load).

<button onclick="shareThis()" id="share">Share This</button><script>
function shareThis() {
  //call navigation.share();
}
</script>/**
* jQuery
*/
$("#share").click(function() {
  shareThis();
});

(Invoke Web Share API on Share Buttonย press)

Web Share API handling

(Final Result!)

Conclusion

The Web Share API is a cool feature offered by Google Chrome, but it can not be implemented in other browsers like Safari. I suggest you to provide additional features (e.g AddThis, ShareThis, or create manual function) for other browsers, so your website visitors can still share content on your page.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.