share-button

A Web Component to share web pages using the native OS sharing options.

Demo | Further reading

Examples

General usage example:

<script type="module" src="share-button.js"></script>

<share-button>
  <button>Share</button>
</share-button>

Example using a fallback links:

<script type="module" src="share-button.js"></script>

<share-button>
  <button>Share</button>
  <a
    href="https://twitter.com/intent/tweet/?url=https://website.com&amp;text=Example&amp;via=DavidDarnes"
  >
    Post to Twitter
  </a>
  <a href="https://facebook.com/sharer/sharer.php?u=https://website.com">
    Post to Facebook
  </a>
  <a
    href="https://www.linkedin.com/shareArticle?url=https://website.com&amp;title=Example&amp;source=Title&amp;mini=true"
  >
    Post to LinkedIn
  </a>
  <!-- Find more sharing links here https://codepen.io/daviddarnes/pen/GRJgoxy -->
</share-button>
<style>
  share-button:not(:defined) button,
  share-button:defined a {
    display: none;
  }
  share-button:not(:defined) a + a {
    margin-inline-start: 1ch;
  }
</style>

Example using a fallback readonly input:

<script type="module" src="share-button.js"></script>

<share-button>
  <button>Share</button>
  <label>
    Share this page
    <input
      type="url"
      readonly
      value="https://daviddarnes.github.io/share-button/demo.html"
      onclick="this.select()"
    />
  </label>
</share-button>
<style>
  share-button:not(:defined) button,
  share-button:defined label {
    display: none;
  }
</style>

Features

This Web Component allows you to:

• Use a standard button element to show the native OS sharing options to share the current web page

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @daviddarnes/share-button
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="share-button.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@daviddarnes/[email protected]/share-button.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@daviddarnes/[email protected]"
></script>

Credit

With thanks to the following people:

• Zach Leatherman for inspiring this Web Component repo template