Shareon – Lightweight, stylish, and ethical share buttons

What is it?

Shareon are share buttons for popular social networks.

Unlike many other share buttons, Shareon are:

lightweight, clocking in at only 7.5 kB brotlied code (JS+CSS),
stylish, using official vector logos and colours with no visual mess, and
ethical, since they do not insert any pesky tracking code.

The whole JavaScript code is quick and simple: it only populates the buttons with share links. This makes Shareon the perfect choice for your blog, news site, or project page!

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>

or install it via NPM and bundle it in a JS file:

import * as Shareon from "shareon";
import "shareon/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:

<div class="shareon">
    <a class="bluesky"></a>
    <a class="facebook"></a>
    <a class="fediverse"></a>
    <a class="hackernews"></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="tumblr"></a>
    <a class="twitter"></a>
    <a class="viber"></a>
    <a class="vkontakte"></a>
    <a class="whatsapp"></a>
    <a class="copy-url"></a>
    <a class="email"></a>
    <a class="print"></a>
    <!-- Does not work in every browser -->
    <a class="web-share"></a>
</div>

You can customize the shared URL and page title with data- attributes:

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