Using the Web Share API and meta tags for native sharing
Adding share links for all the various places users can share content from Twitter, to LinkedIn or Reddit and many more, can be a real pain. The Web Share API is growing in support, making sharing content on the web easier than ever. For browsers that don’t support the API you can fall back to self generated share targets.
Supporting all of various places that content can be shared on a web site is tricky, all sites have their own mechanisms for doing it, and you can never support all of the places that a user may want to share content.
Thats where the Web Share API comes in, with it, sharing content on the Web is much more straight forward, using this API also gives your users the freedom to share content wherever they like, from chat apps and social media to a notes app.
At the end of the article I go into the all important html meta tags, to make sure that sites/apps can pick up nice previews for your content.
And your user will end up with a “share sheet”, where they can decide where they want to share.
Browser support
At this point you’re probably thinking yeah, this is great and all but the browser support is terrible, but I think you might be surprised, the browser support is good in the place it matters most: mobile.
Yeah that is a lot of red, but if you analyze the data, the support is decent in key places:
- Safari 14 on IOS AND Safari on Mac OS.
- Chrome for Android
- Firefox for Android
- Edge (Windows only)
- Samsung Internet
We’re at around 55% of global users, however if you filter to just mobile you’re looking at 91.96% according to caniuse.com. Sure, the obvious missing pieces are cross platform support for Chrome and Firefox, as well as key OSs to capture non Western demographics, but you can always fallback to the older methods of sharing on browsers that don’t support the API, and thats what i’ll go into next.
Web Share API as progressive enhancement
The rest of this article describes the approach that I took for implementing the Web Share API as a progressive enhancement to my blog. For browsers where the API is supported the option is offered, otherwise I added share buttons for common places where I might expect people to share e.g. Twitter.
For my blog i’m using 11ty, a really flexible static site generator which encourages you to build lightweight and fast websites. I wrote about my journey with 11ty over here:
Doing things the old way
Supporting lots of different websites for share targets is quite time consuming, each does it in different ways.
I started out with a bit of html templating:
I’m making use of a few things here in 11ty, Nunjucks templating and global data. If you want to learn more about 11ty, I wrote about my journey into getting started with 11ty over here
Global data files are either JSON or javascript, you can see from the code snippet that i have a sharing array of objects and each object has the following:
- text
- icon
- url function: passing in the page title, tags for my blog post and the current 11ty page object.
Let’s take a look at how this is implemented; I have the following file src/_data/external.js, this is where the code earlier gets external from as its variable name.
The file looks like this.
Hopefully, you can see how the html maps over to the javascript. Each of the websites share the content in slightly different ways. You might be noticing genericShare.data is missing, you'd be right.
Let’s take a look at that function:
In this function i’m getting the full url for my website siteMeta.url from a metadata.json and appending that to the current page.url. Also in my metadata.json I have some more data about myself e.g. my twitter handle, when people share my posts I can get automatically tagged.
Finally, I added all of the tags from my front matter, that are on the blog post, over to the text for the share content too, I filter out tags that I don’t want, for example tags for my 11ty collection names.
If you aren’t sure what i mean by front matter it’s the metadata at the top of my markdown files:
For a full implementation reference, checkout my Github repo for my blog:
Adding in the Web Share API
Now we’ve implemented the basic behaviour for everyone, we can progressively enhance the website for browsers that support the Web Share API.
Updating the HTML template:
The key thing that has changed from the original example is the addition of:
You’ll see that similar to the example above i’m passing title, url and text using data-* attributes, and executing a function my global data object external.genericShare.data(title, tags, page).
By default this content is hidden with display:none, we're going to enable the content with a little bit of JavaScript.
First, i’m checking that we have access to navigator.share. If its available, the button is made visible, a click handler is added and on click the data-* attributes are read, finally navigator.share is called.
If you wanted to, you could hide your fallback links when navigator.share is available, I chose not to just yet, but might do down the road, when more desktop site get support for the Web Share API.
If you’re wondering how to go about adding JavaScript into an 11ty project, there are many ways to go about it, I recently wrote about how to approach this for Web Components.
Meta tags
To round all of this work out you will want to make sure that you have all of the appropriate meta tags set on your website so that sites can put the correct images/description in share link previews.
For example:
You can see my full metadata over on Github.
Summary
Support for the Web Share API is growing and with it progressive enhancement is a really great approach to building modern websites, I wrote about using this approach for fast sites, with interactivity sprinkled in:
