fork of shareon for my own website
 
 
 
Go to file
Nikita Karamov 70aaddb0c3
Add the style definitions directly to the CSS file
Also rename file to `shareon.css`
2022-02-10 21:16:26 +01:00
.github Convert code using Prettier 2022-02-08 18:56:39 +01:00
assets Move assets to 'assets/' 2021-01-17 01:33:46 +03:00
docs Convert code using Prettier 2022-02-08 18:56:39 +01:00
src Add the style definitions directly to the CSS file 2022-02-10 21:16:26 +01:00
.editorconfig Convert code using Prettier 2022-02-08 18:56:39 +01:00
.eslintignore Add 'dev' to .eslintignore 2020-06-26 15:46:41 +02:00
.eslintrc.json Convert code using Prettier 2022-02-08 18:56:39 +01:00
.git-blame-ignore-revs Add .git-blame-ignore-revs 2022-02-08 19:11:12 +01:00
.gitignore Migrate to PNPM 2022-02-02 15:06:04 +01:00
.prettierignore Add Prettier as dependency 2022-02-08 18:52:13 +01:00
CHANGELOG.md Update CHANGELOG 2022-02-10 20:32:58 +01:00
LICENSE Update years in LICENSE 2021-01-17 00:13:38 +03:00
README.md Convert code using Prettier 2022-02-08 18:56:39 +01:00
package.json Remove `np` 2022-02-10 20:58:37 +01:00
rollup.config.js Build the new version 2022-02-10 20:32:52 +01:00

README.md

shareon

shareon logo — the Postal Horn emoji

Lightweight, stylish and ethical share buttons

  • 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.
shareon demo screenshot

Observe the live demo here: shareon.js.org

Install

Include the link to shareon's JS and CSS in your website:

<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:

npm install shareon
# or
yarn add shareon
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):

// 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:

<!-- 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>

<script type="text/javascript">
  // do something important
  shareon();
</script>

or, if you're using Node:

const shareon = require("shareon/dist/noinit/shareon");
// or
import shareon from "shareon/dist/noinit/shareon";

// do something important
shareon();

Usage

shareon was heavily inspired by 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:

<div class="shareon">
  <a class="facebook"></a>
  <a class="linkedin"></a>
  <a class="mastodon"></a>
  <!-- FB 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>
  <button class="reddit"></button>
  <button class="telegram"></button>
  <button class="twitter"></button>
  <button class="viber"></button>
  <button class="vkontakte"></button>
  <button class="whatsapp"></button>
</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.

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:

<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:

  • 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
  • add data-via to a Twitter or Mastodon button to mention a user

Here are all the custom parameters in their glory:

<div class="shareon" data-url="https://example.com/custom-url">
  <a class="facebook" data-title="Custom Facebook title"></a>
  <a class="messenger" data-fb-app-id="0123456789012345"></a>
  <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>
  <a class="mastodon" data-via="@MyNickname@myserver.social"></a>
  <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
</div>

License

MIT © Nikita Karamov

shareon logo is the Postal Horn emoji from Noto Emoji, which is licensed under the Apache License v2.0.

Includes a modified version of the Mastodon logo, which is licensed under the APGLv3 license or later.