share-button

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

Demo | Further reading

Examples

General usage example:

``html



Share

`

Example using a fallback links:

`html



Share
href="https://twitter.com/intent/tweet/?url=https://website.com&text=Example&via=DavidDarnes"
>
Post to Twitter


Post to Facebook

href="https://www.linkedin.com/shareArticle?url=https://website.com&title=Example&source=Title&mini=true"
>
Post to LinkedIn




`

Example using a fallback readonly input:

`html



Share

Share this page
type="url"
readonly
value="https://daviddarnes.github.io/share-button/demo.html"
onclick="this.select()"
/>



`

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
1. Download the source manually from GitHub into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

$3

Make sure you include the
`

`html

type="module"
src="https://www.unpkg.com/@daviddarnes/share-button@1.1.3/share-button.js"
>
`

`html

type="module"
src="https://esm.sh/@daviddarnes/share-button@1.1.3"
>
``

Credit

With thanks to the following people:

- Zach Leatherman for inspiring this Web Component repo template