shareon/README.md

148 lines
4.8 KiB
Markdown
Raw Normal View History

2020-03-25 11:32:25 -04:00
# shareon
2020-03-25 19:38:54 -04:00
<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png" align="right" alt="Postal Horn emoji" width="96" height="96">
2020-03-25 11:32:25 -04:00
2021-01-16 16:15:19 -05:00
> Lightweight, stylish and ethical share buttons
2020-03-25 11:32:25 -04:00
2020-07-04 17:02:35 -04:00
- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped.
2020-03-25 19:47:45 -04:00
- **Stylish.** Uses official vector logos and colors with no visual mess.
2020-06-26 11:32:02 -04:00
- **Ethical.** Embeds no tracking code. JS is required only for the setup.
2020-03-25 11:32:25 -04:00
2021-01-16 17:02:36 -05:00
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/docs/screen01@2x.png" height="156" width="416" alt="shareon example">
2020-03-25 19:38:54 -04:00
----
2020-03-26 17:01:29 -04:00
Observe the live demo here: [shareon.js.org](https://shareon.js.org)
2020-03-25 19:38:54 -04:00
## Install
Include the link to shareon's JS and CSS in your website:
```html
2020-07-30 05:58:57 -04:00
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js" type="text/javascript"></script>
2020-03-25 19:38:54 -04:00
```
or install it via NPM use it in a JS file that you will bundle:
```sh
npm install shareon
# or
yarn add shareon
```
```js
2020-07-26 08:40:37 -04:00
const shareon = require('shareon');
// or
import shareon from 'shareon';
```
## Initialization
By default, shareon will initialize every button after page load. It also
exports the `shareon` function, that will let you repopulate your buttons with
updated information (for example, if you changed the page title):
```js
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
```
If you want to postpone the initialization, you can import the `noinit`-version
of the package. You'll need to manually call the `shareon` function when you
want the buttons to be initialized:
```html
<!-- notice the 'noinit' section of the url for JS -->
2020-07-30 05:58:57 -04:00
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js" type="text/javascript"></script>
2020-07-26 08:40:37 -04:00
<script type="text/javascript">
// do something important
shareon();
</script>
```
or, if you're using Node:
```js
const shareon = require('shareon/dist/noinit/shareon');
// or
import shareon from 'shareon/dist/noinit/shareon';
// do something important
shareon();
2020-03-25 19:38:54 -04:00
```
2020-03-25 19:44:31 -04:00
## Usage
2020-03-25 19:47:45 -04:00
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
and has a backwards-compatible API (excluding themes and sizes).
2020-03-25 19:44:31 -04:00
Create a container with class `shareon` and populate it with elements, whose
classes match the names of social networks:
2020-03-25 11:32:25 -04:00
2020-03-25 19:25:17 -04:00
```html
<div class="shareon">
<a class="facebook"></a>
<a class="linkedin"></a>
<a class="mastodon"></a>
2020-09-28 07:48:10 -04:00
<!-- FB App ID is required for the Messenger button to function -->
<a class="messenger" data-fb-app-id="0123456789012345"></a>
2020-03-26 17:45:42 -04:00
<a class="odnoklassniki"></a>
2020-03-25 19:44:31 -04:00
<a class="pinterest"></a>
<a class="pocket"></a>
<button class="reddit"></button>
2020-06-26 11:27:59 -04:00
<button class="telegram"></button>
<button class="twitter"></button>
<button class="viber"></button>
2020-06-26 11:27:59 -04:00
<button class="vkontakte"></button>
<button class="whatsapp"></button>
2020-03-25 19:44:31 -04:00
</div>
```
2020-03-25 20:43:16 -04:00
If you use `<a>`, the buttons will get a `href`-attribute to them. In other cases
they will get a listener on `click` event, so you can use `<button>`s if you wish.
2020-06-26 11:32:02 -04:00
By default, the URL and the title of the page will be used in sharing dialogs.
2020-03-25 19:44:31 -04:00
To change this, you can use the `data-url` and `data-title` attributes. Use them
2020-03-25 20:43:16 -04:00
on the whole container or on the specific buttons:
2020-03-25 19:44:31 -04:00
```html
<div class="shareon" data-url="https://example.com">
<a class="facebook" data-title="Custom Facebook title"></a>
<a class="twitter" data-title="Custom Twitter title"></a>
</div>
```
Apart from the URL and title, some networks support extra parameters:
2020-09-28 07:48:10 -04:00
- you **have to** add `data-fb-app-id` to the FB Messenger button to make sharing even possible
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
2020-09-28 08:01:13 -04:00
- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text
- add `data-via` to a Twitter or Mastodon button to mention a user
2020-03-25 19:44:31 -04:00
Here are all the custom parameters in their glory:
```html
<div class="shareon" data-url="https://example.com/custom-url">
<a class="facebook" data-title="Custom Facebook title"></a>
2020-09-28 07:48:10 -04:00
<a class="messenger" data-fb-app-id="0123456789012345"></a>
2020-03-25 19:25:17 -04:00
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
<a class="telegram" data-text="Check this out!"></a>
<a class="twitter" data-via="MyNickname"></a>
2020-09-28 08:01:29 -04:00
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
2020-09-28 07:48:10 -04:00
<a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
2020-03-25 11:32:25 -04:00
</div>
```
2021-01-16 16:15:19 -05:00
## License
MIT © [Nikita Karamov](https://karamoff.dev)
Includes a modified version of the
[Mastodon logo](https://commons.wikimedia.org/wiki/File:Mastodon_Logotype_%28Simple%29.svg),
which is licensed under the
[APGLv3 license](https://www.gnu.org/licenses/agpl.html) or later.