https://github.com/kytta/shareon
📯 Lightweight, stylish, and ethical share buttons for popular social networks
https://github.com/kytta/shareon
javascript share-buttons sharing
Last synced: 5 months ago
JSON representation
📯 Lightweight, stylish, and ethical share buttons for popular social networks
- Host: GitHub
- URL: https://github.com/kytta/shareon
- Owner: kytta
- License: mit
- Created: 2020-03-25T15:21:04.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-04T20:05:40.000Z (6 months ago)
- Last Synced: 2024-11-04T21:19:16.396Z (6 months ago)
- Topics: javascript, share-buttons, sharing
- Language: JavaScript
- Homepage: https://shareon.js.org/
- Size: 1.46 MB
- Stars: 465
- Watchers: 5
- Forks: 25
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Shareon
> Lightweight, stylish, and ethical share buttons
- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and brotlied.
- **Stylish.** Uses official vector logos and colours with no visual mess.
- **Ethical.** Embeds no tracking code. JS is required only for the setup.
See the live demo at [shareon.js.org](https://shareon.js.org)
## Install
Simply load the needed files from the CDN:
```html
```
- `defer` makes sure Shareon is loaded after HTML is parsed
- `init` will automatically initialize Shareon buttons
### Do not auto-initialize
Remove the `init` attribute and initialize Shareon when you need it:
```html
// do something
Shareon.init();
```
### Use ESM build
There is also a ESM build for the browsers, which doesn't support
auto-initialization:
```html
import { init } from "https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js";
// do something
init();
```
### Bundle with Node
You can also install Shareon using your favourite package manager and include it
in your source files:
```sh
pnpm add shareon # or `npm install`, or `yarn add`
```
```js
import { init } from "shareon";
import "shareon/css"; // most bundlers will transpile this CSS
init();
```
CommonJS imports are also supported:
```js
const Shareon = require("shareon");
require("shareon/css"); // most bundlers will transpile this CSS
Shareon.init();
```
## Usage
Create a container with class `shareon` and populate it with elements, class
names of which match the names of the social networks (or `copy-url`, for the
'Copy URL' button, or `print` for the 'Print' button):
```html
```
Shareon will populate these `` elements with correct `href` attributes.
### Use with ``s
You can use `` (or any other element) instead of ``s. In this case,
Shareon will create an `onclick`-listener for each button. **I do not recommend
doing this**, as this is not so good for semantics.
### Share metadata
By default, the URL and the title of the active page will be shared. You can
customize it with `data-` attributes. These can be applied on a specific button
or on the whole `.shareon` container:
```html
```
Apart from the URL and title, some networks support extra parameters:
- you **MUST** add `data-fb-app-id` to the FB Messenger button to make sharing
even possible
- add `data-s2f-instance` to the Fediverse button to set your Shareâ‚‚Fedi
instance
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize
the pinned picture
- add `data-text` to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
custom message text
- add `data-via` to a Mastodon, Tumblr, or Twitter button to mention a user
- add `data-hashtags` to a Facebook, Tumblr, or Twitter button to include hashtags in the shared post.
- should be a comma-separated string, for example `stuff,tech,buttons`
- Twitter & Tumblr support multiple hashtags
- Facebook only supports a single hashtag; only the first one will be used
Here are all custom parameters:
```html
```
## Other versions
- [**WordPress plugin**](https://wordpress.org/plugins/shareon/) by [Gareth](https://github.com/gareth-gillman)
## Licence
Copyright © 2020–2022 [Nikita Karamov](https://www.kytta.dev/)
Licenced under the [MIT License](https://spdx.org/licenses/MIT.html).
Shareon was heavily inspired by [Likely](https://ilyabirman.net/likely/),
and has a somewhat backwards-compatible API (excluding themes and sizes).
Likely is licenced under the MIT License.
Shareon's logo is the
[Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/svg/emoji_u1f4ef.svg)
from [Noto Emoji](https://github.com/googlefonts/noto-emoji).
Noto Emoji is licenced under the
[Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/LICENSE).
Share icons are being sourced from [Simple Icons](https://github.com/simple-icons/simple-icons/).
Simple Icons is released under [CC0](https://spdx.org/licenses/CC0-1.0.html),
but the icons themselves may be subject to copyright of the respective owners.
---
This project is hosted on GitHub: