shareon are share buttons for popular social networks.
Unlike many other share buttons, shareon are:
lightweight, clocking in at only 6 KB gzipped code (JS+CSS)
stylish, by having no visual features other than official colors and logos
ethical, since they do not insert any pesky tracking code
The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The
speed
and easy customization make shareon the perfect choice for your blog, news site or project
page!
Install
Include the link to shareon's JS and CSS in your website:
or install it via NPM and use it in a JS file that you will later bundle:
const shareon = require('shareon');
import shareon from 'shareon';
Initialization
By default, shareon will initialize every button after page load.
It also exports the shareon function, that will let
you repopulate your buttons with updated information (for example,
if you changed the page title):
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
If you want to postpone the initialization, you can import the
noinit-version of the package. You'll need to
manually call the shareon function when you want the
buttons to be initialized:
<!-- notice the 'noinit' section of the url for JS -->
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet">
<script type="text/javascript">
// do something important
shareon();
</script>
or, if you're using Node:
const shareon = require('shareon');
// or
import shareon from 'shareon';
// do something important
shareon();
Usage
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="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>
<button class="reddit"></button>
<button class="telegram"></button>
<button class="twitter"></button>
<button class="viber"></button>
<button class="vkontakte"></button>
<button class="whatsapp"></button>
</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:
