shareon

What is it?

shareon are share buttons for popular social networks.

Unlike many other share buttons, shareon are:

• lightweight, clocking in at only 6 KB gzipped code (JS+CSS)
• stylish, by having no visual features other than official colors and logos
• ethical, since they do not insert any pesky tracking code

The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The speed and easy customization make shareon the perfect choice for your blog, news site or project page!

Install

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

<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css"
      rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js"
        type="text/javascript"></script>

or install it via NPM use it in a JS file that you will later bundle:

require('shareon');

import 'shareon';

Usage

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="messenger"></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="whatsapp" data-title="Custom WhatsApp title"></a>
    <a class="twitter" data-title="Custom Twitter title"></a>
</div>

Apart from the URL and title, some networks support extra parameters:

• add data-media to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
• add data-text to a WhatsApp, Telegram, or Viber button to add custom message text
• add data-via to a Twitter 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-url="https://my-cool-website.com"></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="whatsapp">Send</a>
</div>