This content originally appeared on Go Make Things and was authored by Go Make Things
Earlier this week, I walked through how to build a “copy to clipboard” button using HTML Web Components.
Over on my YouTube channel, I ended up working on a similar project: how to build a “Share This” button.
This one uses the navigator.share()
method: an asynchronous function that triggers the OS-native share card in supporting browsers.
In this video, you’ll see me…
- Add basic functionality
- Check for browser support
- Add accessibility features
- Provides options and settings for customization
You can grab the full source code on GitHub, and watch on YouTube to see me code it in real-time.
Need front-end help but don't need a full-time employee? I now offer subscription front-end engineering. Ship faster and build better systems. Pause or cancel any time.
Cheers,
Chris
This content originally appeared on Go Make Things and was authored by Go Make Things

Go Make Things | Sciencx (2025-05-30T14:30:00+00:00) How to build a Share This button using HTML Web Components and JavaScript. Retrieved from https://www.scien.cx/2025/05/30/how-to-build-a-share-this-button-using-html-web-components-and-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.