Modern Social Share Buttons – Shareon.js

Category: Javascript , Recommended , Social Media | January 17, 2021

0 Comment

Demo Download

AUTHOR:	NickKaramoff
VIEWS TOTAL:	123 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	January 17, 2021
LICENSE:	MIT

---

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:

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

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/dist/shareon.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/shareon/dist/shareon.min.js"></script>

3. Initialize the library and we’re ready to go.

shareon();

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

<div class="shareon">
  <a class="facebook">CSSScript</a>
  <a class="linkedin"></a>
  <a class="mastodon"></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="whatsapp">Contact Us</button>
</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">CSSScript</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="@MyNickname@myserver.social"></a>
  <button class="telegram" data-text="Text To Share"></button>
  <button class="twitter" data-via="your twitter username"></button>
</div>

Changelog:

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