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
Post Name | Social Share Buttons |
Author Name | kytta |
Category | Buttons, Social Media Plugins |
Official Page | Click Here |
Official Website | github.com |
Publish Date | September 18, 2020 |
Last Update | July 17, 2023 |
Download | Link Below |
License | MIT |
All supported social networks:
- Messenger
- Odnoklassniki
- Telegram
- Viber
- VK
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.