📤 Web Share

👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page
if (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>

Here is an image that you can
<a class="web-share" href="https://placekitten.com/200/287">share the URL</a>:
<img src="http://placekitten.com/200/287" alt="Place holder image" />
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) {
title: alt,
url: href,

Demo Jump to heading

References Jump to heading

← Back home