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:
