Simplify Web Page Sharing With Share URL

Preview:

Description:

Share URL is a tiny JavaScript library (web component) that allows visitors to share your content on social media or copy URLs to the clipboard.

It currently enables your visitors to share the content in two ways:

• Web Share API: This allows visitors to directly share the current page (or any URL) through their preferred social media platforms or messaging apps.promoting your content and increasing website traffic.
• Copy to Clipboard: Visitor can easily copy the page URL to their clipboard for sharing later through different channels.

How to use it:

1. Install and import the Share URL.

# NPM
$ npm install @nigelotoole/share-url

// JavaScript
import { ShareUrl, ShareUrlAuto } from './src/scripts/share-url.js';
// Web Component
import { ShareUrl } from './src/scripts/share-url.js';

2. Create a share button or insert the <share-url /> component to the page.

<button id="share">Share</button>
<button id="copy">Copy Link</button>
<!-- OR -->
<share-url></share-url>

3. Initialize the Share URL.

// Web Share
const ShareUrlShare = ShareUrl({
  selector: '#share'
});
// Copy Button
const ShareUrlCopy = ShareUrl({
  selector: '#copy',
  action: 'clipboard',
});
// Initialize it on all elements
ShareUrlAuto();

4. Availabl options.

const ShareUrlShare = ShareUrl({
  selector: '.share-url',
  activeClass: 'is-active',
  action: 'share', // or 'clipboard'
  url: document.location.href,
  title: document.title,
  textSelector: null,
  textLabel: '',
  textSuccess: 'Shared',
  maintainSize: falsem // maintain the element's size after text is changed
});

5. You can also pass the options via HTML data-share-OPTION attributes:

<button id="share" data-share-maintain-size="true">
  Share
</button>

Changelog:

07/12/2024

• Refactor code, add fallback for JS disabled, link can be used instead of button