Web Share API Tutorial: Cool And Simple Way To Implement Share Buttonby@arryanggaputra_
7,278 reads

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

tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

The Web Share API is a cool feature offered by Google Chrome, but it can not be implemented in other browsers like Safari. The feature provides the ability to share content on a website like we do share action on native applications. 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. Your website must be served over HTTPS with only 1 command in the command line. You can only invoke the API in response to a user action such as a click.

Company Mentioned

Mention Thumbnail
featured image - Web Share API Tutorial: Cool And Simple Way To Implement Share Button
Arryangga Aliev Pratamaputra HackerNoon profile picture

@arryanggaputra_

Arryangga Aliev Pratamaputra
react to story with heart

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:

image

(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
image

(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();
});
image

(Invoke Web Share API on Share Button press)

Web Share API handling

image

(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.

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa