profile image linking to the home page
PostsTrigger the native share dialog on a website

Trigger the native share dialog on a website

This is an old post from 2020. I'm keeping it here for archival purposes.

Learn how to easily create a share button on a webpage, that triggers the native share dialog!

I thought about how I might integrate a share functionality into my blog. Now I could set up a share button for all sorts of social media websites. However this often means sharing user information with third parties and limiting the website to share to.

Now this where I saw the opportunity to integrate a native share dialog into this website. Now this only works under certain circumstances:

  • It needs a SSL secured connection (https)
  • It only works on modern mobile browsers like Chrome (> 61) and Safari (> 12.2) *
  • It needs to be triggered by an action, like a click of a button

The actual implementation is pretty easy:

navigator.share({ text: 'Hi!' });

It returns a Promise and needs a object that has at least one of the following properties: test, title, url or files.

So my code looks something like this. I added a check for supporting browsers and used the canonical URL if available:

if (navigator.share) {
	const button = document.getElementById('share-button');
	button.style.display = 'block';
	button.addEventListener('click', function () {
		let url = document.location.href;
		const canonicalElement = document.querySelector('link[rel=canonical]');
		if (canonicalElement !== null) {
			url = canonicalElement.href;
		}
		navigator.share({
			title: 'My awesome title',
			text: 'An awesome text',
			url: url,
		});
	});
}

More information about this API: