I have a share button on my webpage. I want tapping the button in mobile Safari to open the iOS native share modal.

How do I achieve this with HTML/Javascript?

I can see that the Wall Street Journal have been able to achieve this with the share buttons on their website. I have not been able to find any answers on Stack Overflow or Google.

I have a share button on my webpage. I want tapping the button in mobile Safari to open the iOS native share modal.

How do I achieve this with HTML/Javascript?

I can see that the Wall Street Journal have been able to achieve this with the share buttons on their website. I have not been able to find any answers on Stack Overflow or Google.

• javascript
• html
• ios
• safari
• mobile-safari

3 Answers 3

You could try

navigator.share({
 title: 'Your title',
 text: 'Your text',
 url: 'Your url to share'
})

on click on your link.

You can use feature

navigator.share

But not all browsers support it. In this case you can check it by using this construction:

if (navigator.share) {
  title: ' ',
  text: ' ',
  url: ' '
} else {
  // Fallback
}

For example use this code

   shareButton.addEventListener('click', event => {
      if (navigator.share) {
        navigator.share({
          title: 'WebShare API Demo',
          url: ' '
        }).then(() => {
          console.log('Thanks for sharing!');
        })
        .catch(console.error);
      } else {
        shareDialog.classList.add('is-open');
      }
    });

Where

shareDialog.classList.add('is-open'); It opens your alternative share panel.

More info about native share API support and features you can read there

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

also check here for more info https://web.dev/web-share/