2.9 KiB

Raw Blame History

shareon

Lightweight, stylish and ethical share buttons.

Small. Dependency-free. CSS+JS bundle is only 3.15 KB minified and gzipped.
Stylish. Uses official vector logos and colors with no visual mess.
Ethical. No tracking code is being embedded. JS is used for quick setup only.

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

require('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="messenger"></a>
    <a class="pinterest"></a>
    <a class="telegram"></a>
    <a class="twitter"></a>
    <a class="vkontakte"></a>
    <a class="whatsapp"></a>
</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:

add data-media to a Pinterest or VK button to customize the pinned picture
add data-text to a WhatsApp or Telegram 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>

2.9 KiB Raw Blame History

shareon

Install

Usage

2.9 KiB

Raw Blame History