Good Share is a share button library with Web Share API integration.
Using the Web Share API, it allows the user to share content using the native share dialog on supported browsers.
For unsupported browsers, a fallback modal window with sharing buttons can be used by the user.
Feel free to let me know if you use Good Share in one of your websites.
- Web Share API for native share
- Fallback modal for unsupported browsers
- Multiple share buttons
- Uses CSS animations
- Fallback modal closes when the site overlay is selected
- Keyboard support for closing fallback modal (esc key)
- Supports Open Graph Metadata
- Your website must be served over HTTPS
- Sharing can only be triggered by a user action (click or touch)
- Include the CSS and JS files from the
dist/folder.
<link rel="stylesheet" href="css/good-share.min.css"><script src="js/good-share.min.js"></script>- Add the
.good-shareCSS class to your share buttons along with the data attribute options.
<button class="good-share" data-share-title="Hello World" data-share-url="https://chrisyee.ca">
Share This
</button>The title to be shared.
data-share-title="Hello World"
The text to be shared.
data-share-text="Lorem ipsum dolor sit amet"
The URL to be shared.
data-share-url="https://chrisyee.ca"
Good Share CSS and JS are compiled and minified using Gulp. You'll need Node and Gulp installed globally.
From the root directory run:
$ npm install
$ gulp
Now you can edit css/good-share.scss and js/good-share.js, which will be compiled to dist/ automatically.