Mastodon
/
shareon-pulsanti-condivisione-social
mirror of https://github.com/NickKaramoff/shareon
1
0
Fork 0
Code Issues Releases Wiki Activity

Update README 

- change README format
- add links to GitLab and Codeberg mirrors
- add and remove other insignificant links
This commit is contained in:
Nikita Karamov 2021-06-30 11:50:25 +02:00
parent 56c83b197c
commit 0a5ae0931c
No known key found for this signature in database
GPG Key ID: EA4E7DECEEA050E4
1 changed files with 76 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
README.md
View File

@ -1,42 +1,58 @@
# shareon
📯 shareon
==========
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/logo.svg" align="right" alt="shareon logo — the Postal Horn emoji" width="96" height="96">
> Lightweight, stylish and ethical share buttons
> Lightweight, stylish and ethical share buttons for popular social networks
- **Small.** Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped.
- **Stylish.** Uses official vector logos and colors with no visual mess.
- **Ethical.** Embeds no tracking code. JS is required only for the setup.
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/demo@2x.png" height="84" width="392" alt="shareon demo screenshot">
Observe the live demo at [shareon.js.org](https://shareon.js.org/)!
----
Observe the live demo here: [shareon.js.org](https://shareon.js.org)
<img src="assets/demo@2x.png" height="84" width="392" alt="demo: shareon buttons for various popular social networks">
## Install
Install
-------
### Browser ###
Include the link to shareon's JS and CSS in your website:
```html
<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>
<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>
```
or install it via NPM use it in a JS file that you will bundle:
### Node.js ###
Install shareon via your package manager:
```sh
npm install shareon
# or
```
```sh
yarn add shareon
```
```js
const shareon = require('shareon');
// or
import shareon from 'shareon';
```sh
pnpm add shareon
```
## Initialization
Then, bundle shareon in your project:
```js
const shareon = require("shareon");
```
```js
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
@ -46,7 +62,7 @@ updated information (for example, if you changed the page title):
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
shareon(); // re-initialize buttons
```
If you want to postpone the initialization, you can import the `noinit`-version
@ -55,8 +71,10 @@ want the buttons to be initialized:
```html
<!-- notice the 'noinit' section of the url for JS -->
<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>
<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>
<script type="text/javascript">
// do something important
@ -64,7 +82,7 @@ want the buttons to be initialized:
</script>
```
or, if you're using Node:
or, if you're using Node.js:
```js
const shareon = require('shareon/dist/noinit/shareon');
@ -75,10 +93,12 @@ import shareon from 'shareon/dist/noinit/shareon';
shareon();
```
## Usage
Usage
-----
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
and has a backwards-compatible API (excluding themes and sizes).
> 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:
@ -88,11 +108,13 @@ classes match the names of social networks:
<a class="facebook"></a>
<a class="linkedin"></a>
<a class="mastodon"></a>
<!-- FB App ID is required for the Messenger button to function -->
<!-- App ID is required for the Messenger button to function -->
<a class="messenger" data-fb-app-id="0123456789012345"></a>
<a class="odnoklassniki"></a>
<a class="pinterest"></a>
<a class="pocket"></a>
<!-- you can also use buttons -->
<button class="reddit"></button>
<button class="telegram"></button>
<button class="twitter"></button>
@ -102,25 +124,29 @@ classes match the names of social networks:
</div>
```
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.
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.
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 buttons:
```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 class="shareon" data-url="https://custom.url.com">
<a class="facebook" data-title="Custom title for Facebook"></a>
<a class="twitter" data-title="Custom title for Twitter"></a>
</div>
```
Apart from the URL and title, some networks support extra parameters:
Apart from the URL and title, some social networks support extra parameters:
- 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
- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text
- you **have to** add `data-fb-app-id` to the FB Messenger button to make
sharing possible
- add `data-media` to an Odnoklassniki, Pinterest, or VK buttons to customize
the pinned picture
- 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
Here are all the custom parameters in their glory:
@ -137,13 +163,26 @@ Here are all the custom parameters in their glory:
</div>
```
## License
Licence
-------
MIT © [Nikita Karamov](https://karamoff.dev)
[MIT](https://spdx.org/licenses/MIT.html) © 2020, Nikita Karamov
shareon logo is the [Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/svg/emoji_u1f4ef.svg) from [Noto Emoji](https://github.com/googlefonts/noto-emoji/tree/v2020-09-16-unicode13_1), which is licensed under the [Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/LICENSE).
shareon logo is the
[Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/svg/emoji_u1f4ef.svg)
from
[Noto Emoji](https://github.com/googlefonts/noto-emoji/tree/v2020-09-16-unicode13_1),
which is licensed under the
[Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/v2020-09-16-unicode13_1/LICENSE).
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.
----
The source code is made available
on [GitHub](https://github.com/NickKaramoff/shareon),
on [GitLab](https://gitlab.com/NickKaramoff/shareon),
and on [Codeberg](https://codeberg.org/NickKaramoff/shareon).