Share a URL with Web Share, copy to clipboard or to a social platform
Features
- Native Web Share API is used if available
- Copy to clipboard
- Share directly to social platforms
- Updates text on share success
Examples
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.
Basic
Complex
Web Component
Installation
$ npm install @nigelotoole/share-url --save-devUsage
Import the JS into your project, add the elements to your HTML and initialize the plugin if needed.
- JS:
node_modules/@nigelotoole/share-url/src/scripts/share-url.js - Web Component:
node_modules/@nigelotoole/share-url/src/scripts/share-url-wc.js
JavaScript
Import the JS into your build process or add the script tag to the page.
import { ShareUrl, ShareUrlAuto } from 'share-url.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 by data attributes on the element.
ShareUrlAuto();
Web Component
import { ShareUrl } from 'share-url-wc.js';Options
The options can be set via initialization in the JS or by data attributes on the element with the prefix 'share'. The web component uses attributes without any prefix. Attributes will be given the highest priority.
<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, twitter, facebook, mastodon, linkedin) 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. |
fallback |
false | Boolean | Element is a fallback for the Share API and will not be displayed if Share is available. |
Markup
<button class="share-url">Share link</button>Web Component
<share-url><button>Share link</button></share-url>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 and Adding a “share to mastodon” link to any web site – and here by Christian Heilmann.
HTML web components by Jeremy Keith and HTML web components by Jim Nielsen.