Share on Mastodon with shareon.js

With recent events on Twitter, the micro-blogging network Mastodon has gained a lot of interest. Unlike Twitter, Mastodon is free and open-source software. Moreover, Mastodon uses a decentralized approach: the Mastodon network is composed of multiple instances managed by different suppliers, each with its own code of conduct, terms of service, privacy policy, privacy options, and moderation policies. If you want to support the network, here is how you can add ‘Share on Mastodon’ icons on your website.

Install shareon.js

In this blog post, we will use the shareon.js library. This library allows to add buttons for popular social networks. Unlike many other share buttons, Shareon buttons are light and ethical: they do not insert any tracking code.

You can install shareon with npm:

npm install shareon

In your app.js, load and initialize the library:

const Shareon = require("shareon");
Shareon.init();

In your app.scss import the CSS code:

@import "~shareon/dist/shareon.min.css";

Rebuild the CSS and JS files for your site:

npm run prod

Use shareon.js

On pages where you want a “Share” button, add a shareon block:

<div class="shareon">
    <a class="mastodon"></a>
    <a class="facebook"></a>
    <a class="linkedin"></a>
    <a class="twitter"></a>
</div>

And enjoy the result:

If needed, you can find other examples and configuration parameters in the documentation: https://shareon.js.org/

This blog post is licensed under CC BY-SA 4.0