# shareon
Lightweight, stylish and ethical share buttons.
- **Small.** Dependency-free. CSS+JS bundle is only 3.15 KB minified and gzipped.
- **Stylish.** Uses official vector logos and colors with no visual mess.
- **Ethical.** No tracking code is being embedded. JS is used for quick setup only.
----
Observe the live demo here: [os.karamoff.dev/shareon](https://os.karamoff.dev/shareon)
## Install
Include the link to shareon's JS and CSS in your website:
```html
```
or install it via NPM use it in a JS file that you will bundle:
```sh
npm install shareon
# or
yarn add shareon
```
```js
require('shareon');
```
## Usage
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
and has a backwards-compatible API (excluding themes and sizes).
Create a container with class `shareon` and populate it with elements, whose
classes match the names of social networks:
```html
```
By default the URL and the title of the page will be used in sharing dialogs.
To change this, you can use the `data-url` and `data-title` attributes. Use them
on the whole container or on the specific links:
```html
```
Apart from the URL and title, some networks support extra parameters:
- add `data-via` to a Twitter button to mention a user
- add `data-text` to a WhatsApp or Telegram button to add custom message text
- add `data-media` to a Pinterest button to customize the pinned picture
Here are all the custom parameters in their glory:
```html
Lightweight, stylish and ethical share buttons.
- **Small.** Dependency-free. CSS+JS bundle is only 3.15 KB minified and gzipped.
- **Stylish.** Uses official vector logos and colors with no visual mess.
- **Ethical.** No tracking code is being embedded. JS is used for quick setup only.
----
Observe the live demo here: [os.karamoff.dev/shareon](https://os.karamoff.dev/shareon)
## Install
Include the link to shareon's JS and CSS in your website:
```html
```
or install it via NPM use it in a JS file that you will bundle:
```sh
npm install shareon
# or
yarn add shareon
```
```js
require('shareon');
```
## Usage
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
and has a backwards-compatible API (excluding themes and sizes).
Create a container with class `shareon` and populate it with elements, whose
classes match the names of social networks:
```html
```
By default the URL and the title of the page will be used in sharing dialogs.
To change this, you can use the `data-url` and `data-title` attributes. Use them
on the whole container or on the specific links:
```html
```
Apart from the URL and title, some networks support extra parameters:
- add `data-via` to a Twitter button to mention a user
- add `data-text` to a WhatsApp or Telegram button to add custom message text
- add `data-media` to a Pinterest button to customize the pinned picture
Here are all the custom parameters in their glory:
```html
```