A Web Component to share web pages using the native OS sharing options.
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&text=Example&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&title=Example&source=Title&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>This Web Component allows you to:
- Use a standard
buttonelement to show the native OS sharing options to share the current web page
You have a few options (choose one of these):
- Install via npm:
npm install @daviddarnes/share-button - Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
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>With thanks to the following people:
- Zach Leatherman for inspiring this Web Component repo template
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent