Shareon is the share button for popular social networks. This JS is a lightweight, free JavaScript library to create a modern social sharing tool that contains buttons for popular social networks like Facebook, Twitter, Pinterest, Whatsapp, and much more.

Use with <button>s

You can use <button> (or any other element) instead of <a> s. In this case, Shareon will create an onclick listener for each button.

• Small. Dependency-free. CSS+JS bundle is only 6 KB minified and gzipped.
• Stylish. Uses official vector logos and colors with no visual mess.
• Ethical. Embeds no tracking code. JS is required only for the setup.

Popular Social Share Buttons Details

All supported social networks:

• Facebook
• Linkedin
• Messenger
• Odnoklassniki
• Pinterest
• Pocket
• Reddit
• Telegram
• Twitter
• Viber
• VK
• Whatsapp

Must Read: Simple jQuery Plugin For Social Share Buttons

How to make use of it:

1. Install and import Shareon as an ES module.

# Yarn
$ yarn add shareon

# NPM
$ npm i shareon --save

import shareon from 'shareon';

2. Include Shareon’s JavaScript & CSS files from a CDN.

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

3. Initialize the library.

shareon();

4. Create social sharing buttons utilizing a or button the component as follows:

<div class="shareon">
  <a class="facebook"></a>
  <a class="linkedin"></a>
  <a class="messenger"></a>
  <a class="odnoklassniki"></a>
  <a class="pinterest">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="webcodeflow"></button>
  <button class="whatsapp">Contact Us</button>
</div>

5. Customize the data to share on social networks utilizing the next data attributes:

<div class="shareon" data-url="#!">
  <a class="facebook" data-title="Custom Link Title">Facebook</a>
  <a class="linkedin" data-url="#!">Linkedin</a>
  <a class="pinterest" data-media="image-to-share.jpg">Pinterest</a>
  <button class="telegram" data-text="Text To Share"></button>
  <button class="twitter" data-via="your twitter username"></button>
</div>

See Demo And Download

Official Website(NickKaramoff): Click Here

This superior jQuery/javascript plugin is developed by NickKaramoff. For extra advanced usage, please go to the official website.