How to create a share button for Mobile Sites?

Coding Tips Series 

A share button is an indispensable item on all websites and mobile apps now and something that every web designer and software developer must know.

This is the JavaScript required for creating a share button that activates the Social Media Share API on a browser.

  if(navigator.share) {
navigator.share({
title: 'Varanasi Software Junction: Illustrating the Web Share API'
text: 'Learn how to develop a Web Share Button'
url: 'https://varanasisoftwarejunction.blogspot.com/2020/12/how-to-create-share-button-for-mobile.html'
})
}

You need to provide at least one of the text or the url attributes and the site must be https.

Add this Java Script code to the event handler of a button or an icon.

 

Here is the complete code.

  <script>
function doShareVaranasiSoftwareJunction()
{
if(navigator.share)
{
navigator.share({
title: 'Varanasi Software Junction: Illustrating the Web Share API',
text: 'Learn how to develop a Web Share Button',
url: 'https://varanasisoftwarejunction.blogspot.com/2020/12/how-to-create-share-button-for-mobile.html'
});
}
}
</script>

  <button onclick="doShareVaranasiSoftwareJunction()">Share</button>

End