Good Share

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.

View Demo | Download

Features

• 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

Requirements

• Your website must be served over HTTPS
• Sharing can only be triggered by a user action (click or touch)

Getting Started

• 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-share CSS 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>

Options

data-share-title

The title to be shared.

data-share-title="Hello World"

data-share-text

The text to be shared.

data-share-text="Lorem ipsum dolor sit amet"

data-share-url

The URL to be shared.

data-share-url="https://chrisyee.ca"

Development

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.