Share URL

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

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

Fallback element

Installation

$ npm install @nigelotoole/share-url --save-dev

Usage

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, 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.

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, HTML web components by Jim Nielsen, The different ways to instantiate a Web Component and Progressively enhancing a Web Component by Chris Ferdinandi.