Modern Social Share Buttons – Shareon.js

Preview:

Description:

Shareon.js is a lightweight and dependency-free JavaScript library to create a modern social sharing widget containing popular social network buttons like Facebook, Twitter, Pinterest, and much more.

All supported social networks:

• Blue Sky
• Email
• Facebook
• Fediverse
• Hacker News
• Linkedin
• Mastodon
• Messenger
• Microsoft Teams
• Odnoklassniki
• Pinterest
• Pocket
• Print
• Reddit
• Telegram
• Viber
• VK
• Whatsapp
• X (Twitter)
• And Web Share API

How to use it:

1. Install and import the Shareon as an ES module.

# Yarn
$ yarn add shareon
# NPM
$ npm i shareon --save

import shareon from 'shareon';

2. Or include the Shareon’s JavaScript & CSS files from a CDN.

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

3. Initialize the library if you include the JS without the init property.

Shareon.init();

4. Create social sharing buttons using a or button element as follows:

<div class="shareon">
  <a class="bluesky"></a>
  <a class="facebook"></a>
  <a class="fediverse"></a>
  <a class="linkedin"></a>
  <a class="mastodon"></a>
  <!-- FB App ID is required for the Messenger button to function -->
  <a class="messenger" data-fb-app-id="0123456789012345"></a>
  <a class="odnoklassniki"></a>
  <a class="pinterest"></a>
  <a class="pocket"></a>
  <a class="reddit"></a>
  <a class="teams"></a>
  <a class="telegram"></a>
  <a class="tumblr"></a>
  <a class="twitter"></a>
  <a class="viber"></a>
  <a class="vkontakte"></a>
  <a class="whatsapp"></a>
  <a class="copy-url"></a>
  <a class="email"></a>
  <a class="print"></a>
</div>

5. Customize the information to share on social networks using the following data attributes:

<div class="shareon" data-url="https://www.cssscrip.com/">
  <a class="facebook" data-title="Custom Link Title" data-hashtags="JavaScript"></a>
  <a class="fediverse" data-s2f-instance="s2f.mydomain.example"></a>
  <a class="messenger" data-fb-app-id="APP ID"></a>
  <a class="linkedin" data-url="https://www.cssscrip.com/another-page/"></a>
  <a class="pinterest" data-media="image-to-share.jpg">Pinterest</a>
  <a class="mastodon" data-text="Check this out!" data-via="@[email protected]"></a>
  <a class="telegram" data-text="Check this out!"></a>
  <a class="tumblr" data-hashtags="nice,buttons" data-text="These are some nice buttons" data-via="myblog"></a>
  <button class="twitter" data-via="your twitter username"></button>
  <a class="whatsapp" data-url="url">Send</a>
</div>

Changelog:

v2.6.0 (11/24/2024)

• Added Hacker News and Bsky buttons

v2.5.0 (02/04/2024)

• Added Fediverse button

v2.4.0 (12/07/2023)

• Added Email button
• Added Print button

v2.3.3 (Aug/02/2023)

• Added Tumblr button

v2.2.3 (07/19/2023)

• Bugfix

v2.2.1 (07/15/2023)

• Icon minification and inlining happens automatically now.

v2.2.0 (07/14/2023)

• Added: data-hashtags for Facebook and Twitter
• Added: Microsoft Teams button
• Added: Web Share API button

v2.1.0 (03/20/2023)

• Added “Copy URL” button

v2.0.1 (01/23/2023)

• Update

v2.0.0 (02/13/2022)

• BREAKING: default version of the package doesn’t auto-initialize buttons
• BREAKING: instead of default export, named exports are now used. If IIFE
  is used, the global object’s name is now Shareon, and it has one init() method
• updated logos and colours for some social networks
• removed mixins, defining the code/styles directly in the files

v1.6.3 (02/02/2021)

• updated build dependencies

v1.6.2 (06/30/2021)

• updated build dependencies

v1.6.1 (01/17/2021)

• Fix LinkedIn URL

v1.6.0 (09/28/2020)

• Fix Messenger button by adding the “App ID” parameter. Now you have to include data-fb-app-id to your Messenger buttons.

v1.5.0 (09/25/2020)

• Add Mastodon sharing

v1.4.5 (09/22/2020)

• Fix PostCSS not applying any plugins

v1.4.4 (09/19/2020)

• bring back transpilation so that shareon can work on older browsers
• fix <button>s not behaving correctly if there are <a>s further on the page

v1.4.2 (09/18/2020)

• fixed WhatsApp button to work on PCs w/o app