shareon

shareon are share buttons for popular social networks.

Share Toot Pin
Отправить

Unlike many other share buttons, shareon are:

lightweight, clocking in at around 7 KB gzipped
stylish, by having no visual features other than official colours and logos
ethical, since they do not insert any pesky tracking code

Upon initialization, shareon just populates the buttons with generated URLS. The speed and easy customization make shareon the perfect choice for your blog, news site, or project page!

Get started

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

<link href="https://cdn.jsdelivr.net/npm/shareon@2/shareon.css"
      rel="stylesheet">
<script type="module"
        src="https://cdn.jsdelivr.net/npm/shareon@2"></script>

Create a container with class shareon and populate it with elements, whose classes match the names of the 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>
  <a class="reddit"></a>
  <a class="telegram"></a>
  <a class="twitter"></a>
  <a class="viber"></a>
  <a class="vkontakte"></a>
  <a class="whatsapp"></a>
</div>

Refine your buttons with extra parameters:
- add data-url to any button to change the shared URL
- add data-title to any button to change the shared title
- 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
Use extra parameters on the whole container or on the specific buttons:
```
<div class="shareon" data-url="https://example.com">
  <a class="whatsapp" data-title="Custom WhatsApp title"></a>
  <a class="twitter" data-title="Custom Twitter title"></a>
</div>
```
Go to the GitHub repo for more detailed documentation!