📤 Web Share

if (navigator.share) {
  navigator
    .share({
      title: 'web.dev',
      text: 'Check out web.dev.',
      url: 'https://web.dev/',
    })
    .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 Jump to heading

<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 Jump to heading

References Jump to heading

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