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

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:

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

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

Web Share API handling

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.