📤Web Share

const shareData = {
  title: 'My Page',
  text: 'Check out this page.',
  url: 'https://example.com/',
}

// Check if sharing is supported
if (navigator.canShare?.(shareData)) {
  try {
    await navigator.share(shareData)
    console.log('Shared successfully')
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('Error sharing:', err)
    }
  }
}

Legacy check (for older browsers):

if (navigator.share) {
  navigator
    .share(shareData)
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error))
}

If your page has a canonical url:

let url = document.location.href
const canonicalElement = document.querySelector('link[rel=canonical]')
if (canonicalElement !== null) {
  url = canonicalElement.href
}
navigator.share({ url: url })

Code snippets

<h1>This is a demo of the web share button</h1>

<p>
  Here is an image that you can
  <a class="web-share" href="https://placekitten.com/200/287">share the URL</a>:
</p>
<p>
  <img src="http://placekitten.com/200/287" alt="Place holder image" />
</p>

let shareButtons = document.querySelectorAll('a.web-share')
for (button of shareButtons) {
  button.addEventListener('click', function (e) {
    let href = this.getAttribute('href')
    let alt = this.getAttribute('alt')
    if (navigator.share) {
      navigator.share({
        title: alt,
        url: href,
      })
      e.preventDefault()
    }
  })
}

Demo

References

• https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share