The Share API

As an in­tro­vert, I don’t re­ally want peo­ple to see my web­site, so I put in a share but­ton.

sar­casm

For real though, we have be­come ac­cli­mated to those col­or­ful so­cial me­dia share but­tons on web­sites. I con­sid­ered adding a few to at least sig­nal to peo­ple that I’m okay with them shar­ing my es­says. You can share them—help me be­come fa­mous. Yet, I don’t like the but­tons. They’re a lit­tle ugly and some­thing else I have to main­tain. Plus, if the land­scape of so­cial me­dia shifts, then I would have to change the but­tons. And this hap­pens. Real peo­ple had to re­move Google Plus ref­er­ences from their web­site.

The Share API

Luckily, the Internet gods have tried to help us from slap­ping gaudy but­tons into the DOM. We now have the Share API. Introduced in 2017, the Share API al­lows the browser to tap into your de­vice’s na­tive share be­hav­ior.

Since this API is rel­a­tively new, sup­port is a lit­tle shaky. It will at least work on Safari, Microsoft Edge, and mo­bile ver­sions of Chrome. And I’m sure we’ll see bet­ter adop­tance in the fu­ture. In the mean­time, we can im­ple­ment a sim­ple check for browser sup­port. On my site, if it’s not sup­ported, I just don’t show any­thing to the user; how­ever, you could just as eas­ily cre­ate a fall­back.

Another ran­dom thing to note, you must ei­ther be us­ing HTTPS or lo­cal­host. I’m not ex­actly sure why—it’s prob­a­bly due to peo­ple shar­ing po­ten­tially sen­si­tive in­for­ma­tion. For ex­am­ple, you can share things like pic­tures, videos, au­dio, and text files, and these things could def­i­nitely be sen­si­tive.

Ok, Share Something

Let’s do a quick im­ple­men­ta­tion. I’ll show off some HTML and JavaScript. But thank­fully, there’s not much to this.

We only need a sin­gle DOM el­e­ment for our users to in­ter­act with. As men­tioned, there’s no need to hard­code an ar­ray of but­tons, links, etc. For this ex­am­ple, I’m go­ing to cre­ate a but­ton, but you can use any­thing that makes sense for peo­ple to click, such as a link or a card.

When the but­ton is clicked, two dif­fer­ent out­comes can oc­cur. For one, the user’s browser can sup­port the Share API. Upon click­ing, they will get their de­vice’s na­tive share di­a­log. This share di­a­log–typ­i­cally–will only show rela­vant shar­ing op­tions. Does he or she have Facebook? Then, they’ll get that op­tion. Thus, you don’t have po­lice what op­tions to pro­vide–this takes a lot of pres­sure off me. The user can share the con­tent to their fa­vorite plat­forms, and I don’t have to put sketchy third party code on my web­site.

On the other hand, many browsers still don’t sup­port the API. We’ll im­ple­ment a silly fall­back here. For a real site, you’ll want to cre­ate some­thing–well–bet­ter. But im­por­tantly, we can fall in line with pro­gres­sive web de­sign. The user is still able to browse the site even with an old browser or with JavaScript dis­abled.

For this ex­am­ple, we’ll lit­er­ally only need a sin­gle func­tion: nav­i­ga­tor.share.

(function () {
    function ready() {
        const button = document.querySelector('.js-tutorial-share');
        const title = document.querySelector('title').textContent;
        const text = document.querySelector('meta[name="description"]').getAttribute('content');
        const url = document.querySelector('link[rel="canonical"]').getAttribute('href');
        let timer = null;

        function doShare() {
            if (navigator.share) {
                navigator.share({ title, text, url });
            } else {
                button.innerHTML = 'No Share API available ☹️';

                if (timer) {
                    clearTimeout(timer);
                }

                timer = setTimeout(() => button.innerHTML = 'Share!!!', 2000);
            }
        }

        button.addEventListener('click', doShare);
    }

    if (document.readyState === 'complete') {
        ready();
    } else {
        document.addEventListener('DOMContentLoaded', ready);
    }
})();

I do a quick check to see if the func­tion ex­ists. Browsers that don’t sup­port the share API won’t have it, and our fall­back can kick in. And I’m just pass­ing the API some generic in­for­ma­tion about this web­page. You can read more about how to for­mat the pa­ra­me­ter here–but it’s not much more com­pli­cated then what I show above.

Behold! A share but­ton:

Share!!!

Sharing Is Caring

Hopefully, you have a browser that sup­ports the API so that you can see it in ac­tion. All of my ram­bling will make more sense if you use it your­self. Of course, you’ve prob­a­bly been us­ing some rep­re­sen­ta­tion of the share di­a­log on your smart­phone–na­tive apps have been privy to it for a long time. Now, we can lever­age the same ca­pa­bil­i­ties for the web. I hope my es­say was help­ful, and this goes with­out say­ing–feel free to share the post.