📯 Lightweight, stylish, and ethical share buttons for popular social networks
Lightweight, stylish, and ethical share buttons
See the live demo at shareon.js.org
Simply load the needed files from the 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>
defer
makes sure Shareon is loaded after HTML is parsedinit
will automatically initialize Shareon buttonsRemove the init
attribute and initialize Shareon when you need it:
<script
src="https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js"
defer
></script>
<script>
// do something
Shareon.init();
</script>
There is also a ESM build for the browsers, which doesn't support auto-initialization:
<script type="module">
import { init } from "https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js";
// do something
init();
</script>
You can also install Shareon using your favourite package manager and include it in your source files:
pnpm add shareon # or `npm install`, or `yarn add`
import { init } from "shareon";
import "shareon/css"; // most bundlers will transpile this CSS
init();
CommonJS imports are also supported:
const Shareon = require("shareon");
require("shareon/css"); // most bundlers will transpile this CSS
Shareon.init();
Create a container with class shareon
and populate it with elements, class
names of which match the names of the social networks (or copy-url
, for the
'Copy URL' button, or print
for the 'Print' button):
<div class="shareon">
<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>
Shareon will populate these <a>
elements with correct href
attributes.
<button>
sYou can use <button>
(or any other element) instead of <a>
s. In this case,
Shareon will create an onclick
-listener for each button. I do not recommend
doing this, as this is not so good for semantics.
By default, the URL and the title of the active page will be shared. You can
customize it with data-
attributes. These can be applied on a specific button
or on the whole .shareon
container:
<div class="shareon" data-url="https://custom.url/for-this-page">
<a class="facebook" data-title="Custom Facebook title"></a>
<a class="twitter" data-title="Custom Twitter title"></a>
</div>
Apart from the URL and title, some networks support extra parameters:
data-fb-app-id
to the FB Messenger button to make sharing
even possibledata-s2f-instance
to the Fediverse button to set your Shareâ‚‚Fedi
instancedata-media
to an Odnoklassniki, Pinterest, or VK button to customize
the pinned picturedata-text
to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
custom message textdata-via
to a Mastodon, Tumblr, or Twitter button to mention a userdata-hashtags
to a Facebook, Tumblr, or Twitter button to include hashtags in the shared post.
stuff,tech,buttons
Here are all custom parameters:
<div class="shareon" data-url="https://custom.url/for-this-page">
<a class="facebook" data-title="Custom Facebook title" data-hashtags="awesome"></a>
<a class="fediverse" data-s2f-instance="s2f.mydomain.example"></a>
<a class="messenger" data-fb-app-id="0123456789012345"></a>
<a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</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>
<a class="twitter" data-via="MyNickname" data-hashtags="shareon,awesome,brilliant"></a>
<a class="mastodon" data-via="@[email protected]"></a>
<a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>
</div>
Copyright © 2020–2022 Nikita Karamov
Licenced under the MIT License.
Shareon was heavily inspired by Likely, and has a somewhat backwards-compatible API (excluding themes and sizes). Likely is licenced under the MIT License.
Shareon's logo is the Postal Horn emoji from Noto Emoji. Noto Emoji is licenced under the Apache License v2.0.
Share icons are being sourced from Simple Icons. Simple Icons is released under CC0, but the icons themselves may be subject to copyright of the respective owners.
This project is hosted on GitHub: https://github.com/kytta/shareon