fork of shareon for my own website
 
 
 
Go to file
Nikita Karamov de9b21ed33
Automatically compress SVGs with svgo
2023-07-15 11:36:09 +02:00
.github Always run size checks 2023-03-20 20:36:07 +01:00
assets Update README picture 2023-07-15 00:38:24 +02:00
src Move inline SVGs into separate files 2023-07-15 11:35:46 +02:00
.editorconfig Convert code using Prettier 2022-02-08 18:56:39 +01:00
.eslintignore Remove Airbnb config in favour of the default one 2022-02-10 22:02:17 +01:00
.git-blame-ignore-revs Add .git-blame-ignore-revs 2022-02-08 19:11:12 +01:00
.gitignore Fix CI (hopefully) 2023-01-25 20:25:21 +01:00
.pre-commit-config.yaml Automatically compress SVGs with svgo 2023-07-15 11:36:09 +02:00
.prettierignore Fix Prettier 2023-01-25 20:26:49 +01:00
CHANGELOG.md Update CHANGELOG 2023-07-15 00:33:44 +02:00
LICENSE Update year in LICENSE 2022-02-11 16:14:19 +01:00
README.md Update README picture 2023-07-15 00:38:24 +02:00
index.html Update specimen 2023-07-15 00:11:45 +02:00
package.json Inline URLs in CSS 2023-07-15 11:29:32 +02:00
pnpm-lock.yaml Inline URLs in CSS 2023-07-15 11:29:32 +02:00
svgo.config.js Automatically compress SVGs with svgo 2023-07-15 11:36:09 +02:00
vite.config.js Remove banner 2023-01-25 20:29:15 +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 brotlied.
  • Stylish. Uses official vector logos and colours with no visual mess.
  • Ethical. Embeds no tracking code. JS is required only for the setup.

Shareon demo screenshot

See the live demo at shareon.js.org

Install

Simply load the needed files from the CDN:

<link
  href="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css"
  rel="stylesheet"
/>
<script
  src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
  defer
  init
></script>
  • 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:

<script
  src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
  defer
></script>

<script>
  // do something
  Shareon.init();
</script>

Use ESM build

There is also a ESM build for the browsers, which doesn't support auto-initialization:

<script type="module">
  import { init } from "https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js";
  // do something
  init();
</script>

Bundle with Node

You can also install Shareon using your favourite package manager and include it in your source files:

pnpm add shareon  # or `npm install`, or `yarn add`
import { init } from "shareon";
import "shareon/css"; // most bundlers will transpile this CSS

init();

CommonJS imports are also supported:

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:

<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>
  <a class="reddit"></a>
  <a class="teams"></a>
  <a class="telegram"></a>
  <a class="twitter"></a>
  <a class="viber"></a>
  <a class="vkontakte"></a>
  <a class="whatsapp"></a>
  <a class="copy-url"></a>
</div>

Shareon will populate these <a> elements with correct href attributes.

Use with <button>s

You can use <button> (or any other element) instead of <a>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:

<div class="shareon" data-url="https://custom.url/for-this-page">
  <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 MUST 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
  • add data-hashtags to a Twitter or Facebook button to include hashtags in the shared post.
    • Twitter supports multiple hashtags, and you need to specify them with out # and seperated with ,, it shoule be something like this ai,technologies,aigc.
    • Facebook only supports a single hashtag. If you pass multiple hashtags with , seperated, the library will only use the first one.

Here are all custom parameters:

<div class="shareon" data-url="https://custom.url/for-this-page">
  <a class="facebook" data-title="Custom Facebook title" data-hashtags="awesome"></a>
  <a class="messenger" data-fb-app-id="0123456789012345"></a>
  <a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
  <a class="telegram" data-text="Check this out!"></a>
  <a class="twitter" data-via="MyNickname" data-hashtags="shareon,awesome,brilliant"></a>
  <a class="mastodon" data-via="@MyNickname@myserver.social"></a>
  <a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>
</div>

Other versions

Licence

Copyright © 20202022 Nikita Karamov
Licenced under the MIT License.

Shareon was heavily inspired by 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 from Noto Emoji. Noto Emoji is licenced under the Apache License v2.0.

Share icons are being sourced from Simple Icons. Simple Icons is released under CC0, but the icons themselves may be subject to copyright of the respective owners.


This project is hosted on GitHub: https://github.com/kytta/shareon