fork of shareon for my own website
 
 
 
Go to file
Nikita Karamov 7a695a6567
Fix border on <button> hover
2020-06-26 17:26:43 +02:00
.github Initial commit 2020-03-25 16:32:25 +01:00
docs Update dependencies 2020-06-25 12:57:59 +02:00
src Fix border on <button> hover 2020-06-26 17:26:43 +02:00
.eslintignore Add 'dev' to .eslintignore 2020-06-26 15:46:41 +02:00
.eslintrc.json Reformat files 2020-06-26 15:51:34 +02:00
.gitignore Add size-limit & eslint-ci 2020-03-25 22:09:35 +01:00
.travis.yml Set up build and linting 2020-03-25 17:44:11 +01:00
LICENSE Initial commit 2020-03-25 16:32:25 +01:00
README.md Fix screenshot in README 2020-03-27 13:27:11 +01:00
package.json Add ESM build 2020-06-26 17:17:49 +02:00
rollup.config.js Add ESM build 2020-06-26 17:17:49 +02:00
tsconfig.json Reformat files 2020-06-26 15:51:34 +02:00
yarn.lock Migrate to 'sass' 2020-06-26 16:53:54 +02:00

README.md

shareon

Postal Horn emoji

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.
shareon example

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="odnoklassniki"></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 an Odnoklassniki, 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>