@nigelotoole/share-url

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Share URL - Share a URL with Web Share, copy to clipboard or to social media</title> <meta name="description" content="Native Web Share API is used if available, can copy link to clipboard and share directly to social platforms."> <meta property="og:title" content="Share URL"> <meta property="og:description" content="Share a URL with Web Share, copy to clipboard or to social media"> <meta property="og:site_name" content="Share URL"> <meta property="og:url" content="https://nigelotoole.github.io/share-url/"> <meta property="og:image" content="https://nigelotoole.github.io/share-url/images/share-url-social.png"> <meta property="og:image:alt" content="Share URL"> <meta name="twitter:card" content="summary_large_image"> <link rel="icon" href="favicon.ico" sizes="any"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="styles/share-url.css"> </head> <body> <header class="header fullwidth space--sm"> <div class="container"> <h1 class="logo-text">Share URL</h1> <nav class="nav header-nav"> <a href="https://github.com/NigelOToole/share-url/archive/master.zip" class="btn btn--green btn--ghost"><span>Download</span></a> <a href="https://github.com/NigelOToole/share-url" class="btn btn--green btn--ghost"><span>GitHub <svg class="icon" aria-hidden="true" viewbox="0 0 24 24"><path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z"/></svg></span></a> </nav> </div> </header> <main id="main" class="main"> <section class="fullwidth intro"> <div class="container content flow"> <div class="heading page-intro"> <h2 class="page-heading">Share a URL with Web Share, copy to clipboard or to social media</h2> <img src="images/share-url-logo.svg" class="page-intro-img" width="80" height="80" alt="Share URL logo"> </div> <h3>Features</h3> <ul class="columns-sm-2"> <li>Native <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API">Web Share API</a> is used if available</li> <li>Copy to clipboard</li> <li>Share directly to social platforms</li> <li>Updates text on share success</li> </ul> </div> </section> <section class="fullwidth demos"> <div class="container content flow"> <h2>Demos</h2> <p class="unsupported">Your browser does not support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API">Web Share API</a>. Check your browser support at <a href="https://caniuse.com/?search=web-share">Can I Use</a>. The below examples will only show the copy to clipboard button. </p> <h3>Share & Copy</h3> <div class="group"> <button class="share-url">Share link</button> <button class="share-url" data-share-action="clipboard" data-share-text-success="Copied">Copy link</button> </div> <h3>Social media</h3> <div class="group"> <button class="share-url" data-share-action="bluesky">Bluesky</button> <button class="share-url" data-share-action="facebook">Facebook</button> <button class="share-url" data-share-action="linkedin">Linkedin</button> <button class="share-url" data-share-action="mastodon">Mastodon</button> <button class="share-url" data-share-action="reddit">Reddit</button> <button class="share-url" data-share-action="threads">Threads</button> <button class="share-url" data-share-action="twitter">Twitter/X</button> </div> <h3>Custom links</h3> <div class="group"> <button class="share-url" data-share-action="whatsapp://send" data-share-url-parameter="">WhatsApp</button> </div> <h3>Icons</h3> <div class="group"> <button class="share-url" data-share-text-selector="span" data-share-maintain-size="true"> <span>Share</span> <svg aria-hidden="true" viewbox="0 0 24 24"><path d="m3.293 11.293 1.414 1.414L11 6.414V20h2V6.414l6.293 6.293 1.414-1.414L12 2.586l-8.707 8.707z"/></svg> <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg> </button> <button class="share-url" data-share-text-selector="span" data-share-maintain-size="true" data-share-action="clipboard" data-share-text-success="Copied"> <span>Copy</span> <svg aria-hidden="true" viewbox="0 0 24 24"><rect x="8" y="3" width="13" height="13" rx="0" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></rect><path d="M4 7v12c0 .6.4 1 1 1h12" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></path></svg> <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg> </button> </div> <h3>Fallback element</h3> <p>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.</p> <div class="group"> <button class="share-url" data-share-text-selector="span" data-share-maintain-size="true"> <span>Share</span> <fallback><a href="#" target="_blank">Fallback element</a></fallback> </button> <button class="share-url" data-share-text-selector="span" data-share-maintain-size="true" data-share-action="clipboard" data-share-text-success="Copied"> <span>Copy</span> <fallback><a href="#" target="_blank">Fallback element</a></fallback> </button> </div> <h3>Web Component</h3> <div class="group"> <share-url text-selector="span" maintain-size="true"> <button> <span>Share link</span> <svg aria-hidden="true" viewbox="0 0 24 24"><path d="m3.293 11.293 1.414 1.414L11 6.414V20h2V6.414l6.293 6.293 1.414-1.414L12 2.586l-8.707 8.707z"/></svg> <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg> </button> </share-url> <share-url text-selector="span" maintain-size="true" action="clipboard" text-success="Copied"> <button> <span>Copy link</span> <svg aria-hidden="true" viewbox="0 0 24 24"><rect x="8" y="3" width="13" height="13" rx="0" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></rect><path d="M4 7v12c0 .6.4 1 1 1h12" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></path></svg> <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg> </button> </share-url> </div> </div> </section> <section id="docs" class="fullwidth docs"> <div class="container content flow"> <h2 id="docs-installation">Installation</h2> <pre><code class="scroll-shadow-inline" tabindex="0">$ npm install @nigelotoole/share-url --save-dev</code></pre> <h2 id="docs-usage">Usage</h2> <p>Import or add the JS into your project, add the elements to your HTML and initialize the plugin if needed.</p> <h3 id="docs-javascript">JavaScript</h3> <pre><code class="scroll-shadow-inline" tabindex="0">import { ShareUrl, ShareUrlAuto } from 'share-url.js';</code></pre> <p>OR</p> <pre><code class="scroll-shadow-inline" tabindex="0"><script src="share-url.js" type="module"></script></code></pre> <h3 id="docs-web-component">Web Component</h3> <pre><code class="scroll-shadow-inline" tabindex="0">import { ShareUrl } from 'share-url-wc.js';</code></pre> <p>OR</p> <pre><code class="scroll-shadow-inline" tabindex="0"><script src="share-url-wc.js" type="module"></script></code></pre> <h3 id="docs-initialize-js">Initialize JS</h3> <pre><code class="scroll-shadow-inline" tabindex="0">// 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(); </code></pre> <h3 id="docs-markup">Markup</h3> <h4>JS</h4> <pre><code class="scroll-shadow-inline" tabindex="0"><button class="share-url">Share link</button></code></pre> <h4>Web Component</h4> <pre><code class="scroll-shadow-inline" tabindex="0"><share-url><button>Share link</button></share-url></code></pre> <h3 id="docs-options">Options</h3> <p>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". </p> <pre><code class="scroll-shadow-inline" tabindex="0"><button class="share-url" data-share-active-class="is-open"></code></pre> <pre><code class="scroll-shadow-inline" tabindex="0"><share-url active-class="is-open"></code></pre> <div class="table-outer scroll-shadow-inline" tabindex="0"> <table class="table"> <tr> <th>Property</th> <th>Default</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><code>selector</code></td> <td>'.share-url'</td> <td>String || Element</td> <td>Container element selector.</td> </tr> <tr> <td><code>activeClass</code></td> <td>'is-active'</td> <td>String</td> <td>CSS class when share has been successful.</td> </tr> <tr> <td><code>action</code></td> <td>'share'</td> <td>String</td> <td>Action keyword (share, clipboard, bluesky, facebook, linkedin, mastodon, reddit, threads, twitter) or a url e.g. "https://www.social.com/share".</td> </tr> <tr> <td><code>url</code></td> <td>document.location.href</td> <td>String</td> <td>URL to share.</td> </tr> <tr> <td><code>title</code></td> <td>document.title</td> <td>String</td> <td>Title text to share.</td> </tr> <tr> <td><code>urlParameter</code></td> <td>'url'</td> <td>String</td> <td>Parameter for the url e.g. social.com?url=site.com</td> </tr> <tr> <td><code>titleParameter</code></td> <td>'text'</td> <td>String</td> <td>Parameter for the title e.g. social.com?text=Check+out+site.com</td> </tr> <tr> <td><code>textSelector</code></td> <td>null</td> <td>String</td> <td>Element to update the text, the element itself is the default.</td> </tr> <tr> <td><code>textLabel</code></td> <td>''</td> <td>Sting</td> <td>Initial text on the element, existing text is the default.</td> </tr> <tr> <td><code>textSuccess</code></td> <td>'Shared'</td> <td>String</td> <td>Text shown when a share is successful.</td> </tr> <tr> <td><code>maintainSize</code></td> <td>false</td> <td>Boolean</td> <td>Element will maintain its size after text is changed to prevent layout jank.</td> </tr> </table> </div> <h2 id="docs-compatibility">Compatibility</h2> <p>Supports all modern browsers at the time of release.</p> <h2 id="docs-demo-site">Demo site</h2> <p>Clone the repo from Github and run the commands below.</p> <pre><code class="scroll-shadow-inline" tabindex="0">$ npm install $ npm run dev </code></pre> <h3 id="docs-references">References</h3> <p><a href="https://web.dev/patterns/web-apps/share/">How to let the user share the website they are on</a> by Thomas Steiner, <a href="https://www.zachleat.com/web/webcare-webshare/">webcare-webshare Web Component</a> by Zach Leatherman, <a href="https://christianheilmann.com/2023/08/18/adding-a-share-to-mastodon-link-to-any-web-site-and-here/">Adding a “share to mastodon” link to any web site – and here</a> by Christian Heilmann and <a href="https://www.bentasker.co.uk/posts/documentation/general/adding-a-share-on-mastodon-button-to-a-website.html">Adding a Share On Mastodon button to a website</a> by Ben Tasker.</p> <p><a href="https://adactio.com/journal/20618">HTML web components</a> by Jeremy Keith, <a href="https://blog.jim-nielsen.com/2023/html-web-components/">HTML web components</a> by Jim Nielsen, <a href="https://gomakethings.com/the-different-ways-to-instantiate-a-web-component/">The different ways to instantiate a Web Component</a> and <a href="https://gomakethings.com/progressively-enhancing-a-web-component/">Progressively enhancing a Web Component</a> by Chris Ferdinandi.</p> </div> </section> </main> <footer class="fullwidth space--sm footer"> <div class="container content"> <div class="group share"> <h4 class="share-title">Share this</h4> <share-url text-selector="span" maintain-size="true"> <button class="btn btn--icon-multi"> <span>Share link</span> <svg class="icon" aria-hidden="true" viewbox="0 0 24 24"><path d="m3.293 11.293 1.414 1.414L11 6.414V20h2V6.414l6.293 6.293 1.414-1.414L12 2.586l-8.707 8.707z"/></svg> <svg class="icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg> </button> </share-url> <share-url action="clipboard" text-success="Copied" text-selector="span" maintain-size="true"> <button class="btn btn--icon-multi share-url"> <span>Copy link</span> <svg class="icon" viewbox="0 0 24 24"><rect x="8" y="3" width="13" height="13" rx="0" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></rect><path d="M4 7v12c0 .6.4 1 1 1h12" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs" fill="none"></path></svg> <svg class="icon" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" fill="none" /><path d="M22 4 12 14.01l-3-3" fill="none"/></svg> </button> </share-url> </div> <nav class="nav footer-nav"> <a href="http://www.purestructure.com/nigelotoole" rel="author">Made by Nigel O Toole</a> <a href="https://github.com/nigelotoole" rel="external">GitHub</a> <a data-encode="bWFpbHRvOnB1cmVAcHVyZXN0cnVjdHVyZS5jb20" data-encode-attribute="href" class="encode">Email</a> <a href="http://www.purestructure.com" rel="external" class="w-100">PURE STRUCTURE</a> </nav> </div> </footer> <script src="scripts/main.js" type="module"></script>  </body> </html>