Share a URL with Web Share, copy to clipboard or to social media
Features
- Native Web Share API is used if available
- Copy to clipboard
- Share directly to social platforms
- Updates text on share success
Demos
Your browser does not support the Web Share API. Check your browser support at Can I Use. The below examples will only show the copy to clipboard button.
Share & Copy
Social media
Custom links
Icons
Fallback element
The fallback element displays if JS or the share action is unavailable. You must wrap your text in an element for the styling to work properly.
Web Component
Installation
$ npm install @nigelotoole/share-url --save-devUsage
Import or add the JS into your project, add the elements to your HTML and initialize the plugin if needed.
JavaScript
import { ShareUrl, ShareUrlAuto } from 'share-url.js';OR
<script src="share-url.js" type="module"></script>Web Component
import { ShareUrl } from 'share-url-wc.js';OR
<script src="share-url-wc.js" type="module"></script>Initialize JS
// Initialize a single element
const ShareUrlDefault = ShareUrl({
selector: '#share-url--default'
});
// Initialize all elements with default options
// These can be overridden by reinitializing or from data attributes on the element.
ShareUrlAuto();
Markup
JS
<button class="share-url">Share link</button>Web Component
<share-url><button>Share link</button></share-url>Options
The options can be set via initialization in the JS or by attributes on the element, which will be given the highest priority. The property is changed from camel case to dash case with with the prefix 'share' added for the JS version e.g. "activeClass" to "share-active-class".
<button class="share-url" data-share-active-class="is-open"><share-url active-class="is-open">| Property | Default | Type | Description |
|---|---|---|---|
selector |
'.share-url' | String || Element | Container element selector. |
activeClass |
'is-active' | String | CSS class when share has been successful. |
action |
'share' | String | Action keyword (share, clipboard, bluesky, facebook, linkedin, mastodon, reddit, threads, twitter) or a url e.g. "https://www.social.com/share". |
url |
document.location.href | String | URL to share. |
title |
document.title | String | Title text to share. |
urlParameter |
'url' | String | Parameter for the url e.g. social.com?url=site.com |
titleParameter |
'text' | String | Parameter for the title e.g. social.com?text=Check+out+site.com |
textSelector |
null | String | Element to update the text, the element itself is the default. |
textLabel |
'' | Sting | Initial text on the element, existing text is the default. |
textSuccess |
'Shared' | String | Text shown when a share is successful. |
maintainSize |
false | Boolean | Element will maintain its size after text is changed to prevent layout jank. |
Compatibility
Supports all modern browsers at the time of release.
Demo site
Clone the repo from Github and run the commands below.
$ npm install
$ npm run dev
References
How to let the user share the website they are on by Thomas Steiner, webcare-webshare Web Component by Zach Leatherman, Adding a “share to mastodon” link to any web site – and here by Christian Heilmann and Adding a Share On Mastodon button to a website by Ben Tasker.
HTML web components by Jeremy Keith, HTML web components by Jim Nielsen, The different ways to instantiate a Web Component and Progressively enhancing a Web Component by Chris Ferdinandi.