So something I have often talked about with designers is the challenge in getting users to share content on mobile. The reason for this is that if the user is in their browser looking at content they are unlikely to be logged into their favorite social network like Facebook or Twitter because they are probably using an app for that. The data supports this too with this article from earlier in the year ‘Does Anyone Use Social Sharing Buttons on Mobile?’.

Luckily Chrome 61 just landed which brings with it the new Web Share JavaScript API which aims to make sharing on the web a much more common occurrence. It achieves this by using the native share functionality built into the users operating system to give access to all the social networks they have installed on their phone for sharing of your content. Now the user doesn’t have to log into their social network in the browser to use share functionality making it much more frictionless.

The first step to use the new API is to add a share button to our HTML.

<button class="js-share">Share This Page</button>

The next step is for us to add an event listener that listens for when the user clicks on the button.

const shareButton = document.querySelector('.js-share');

shareButton.addEventListener('click', shareClick);

Having setup our event listener we now need to write the function that will perform the action of sharing the page in which we will need to start by checking the user’s browser supports the Web Share API by checking if navigator.share exists.

function shareClick() {
    if (navigator.share) {
    }   
}

The next step is to call the new API with some options:

  • title: ‘Bringing a better share experience to the web’
  • text: ‘Learn about how you can share your webpage using the Web Share API’
  • url: ‘https://www.jonathanfielding.com’,

The resulting code looks as follows:

function shareClick() {
    if (navigator.share) {
        navigator.share({
            title: 'Bringing a better share experience to the web',
            text: 'Learn about how you can share your webpage using the Web Share API',
          url: 'https://www.jonathanfielding.com',
        });
    }
}

The Web Share API is promise based so we can now chain this with .then() and .catch() to handle the success or failure state of the share.

function shareClick() {
    if (navigator.share) {
        navigator.share({
            title: 'Bringing a better share experience to the web',
            text: 'Learn about how you can share your webpage using the Web Share API',
            url: 'https://www.jonathanfielding.com',
        }).then(() => {
            // Any successful share logic goes here
        }).catch((error) => {
            // Handle any error that crops up
        });
    }
}

Thats how simple this new API is to use, for a working demo checkout over on Js Bin

For more information about the Web Share API checkout the page over on the MDN

Browser Support

Currently the feature isn’t widely supported so it acts as a progressive enhancement for the browsers that support the feature. Full browser support from Can I Use:

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more