Fediverse Sharing Button

Let your site's visitors share your work with the fediverse!

You can see a demo at fediverse-share-button.stefanbohacek.dev. For a list of supported platforms, read below.

Features

• minimalist design inspired by Bootstrap
• shows a logo of supported fediverse software
• lets you share selected text
• remembers the last fediverse domain used
• free (as in fediverse) to use!

How to use

Add the following snippet to where you want your sharing button to show up:

<form class="fsb-prompt">
  <label>Share this page from your fediverse server</label>
  <div class="fsb-input-group mb-3">
    <span class="fsb-input-group-text">https://</span>
    <input required
      type="text"
      name="fediverse-domain"
      placeholder="mastodon.social"
      class="fsb-input fsb-domain"
      aria-label="Server domain">
    <button class="fsb-button"
      type="submit"><img src="https://fediverse-share-button.stefanbohacek.dev/fediverse-share-button/icons/mastodon.svg"
        class="fsb-icon"></span>Share</button>
  </div>
  <p class="fsb-support-note fsb-d-none">This server does not support sharing. Please visit <a
      class="fsb-support-note-link"
      target="_blank"
      href=""></a>.</p>
</form>
<link rel="stylesheet" href="https://fediverse-share-button.stefanbohacek.dev/fediverse-share-button/styles.min.css">
<script src="https://fediverse-share-button.stefanbohacek.dev/fediverse-share-button/script.min.js" defer class="fsb-script"></script>

Alternatively, you can download the code from this repo and host all the JS, CSS, and image files yourself.

For alternative uses of this project, see the Tutorials section.

FAQ

Q: How does this work?

Some fediverse platforms let you open a sharing prompt via a URL, much like many corporate social media sites.

My sharing button detects the software running on the platform based on the provided URL, and shows a matching fediverse logo (courtesy of Liaizon Wakest).

Q: Which platforms are supported?

• Diaspora
• Firefish
• Friendica
• Glitch-soc
• Hometown
• Hubzilla
• Lemmy
• Mastodon
• Misskey
• Sharkey

Threads are technically supported, but they don't currently provide software information, so the URL won't be recognized.

Q: Does this button or the fediverse-info server collect any information?

None at all. The fediverse-info server is only needed to cache the software information for each domain as not to overwhelm the original server with too many requests.

The last domain used in the domain input field and the fediverse software it's running are both stored in the site visitor's browser so that when they view another page, or visit the site again later, this information can be reused.

Q: Are there any similar projects?

Yes, see a list here: https://github.com/Uden-AI/fediverse-share#similar-projects-to-compare-to, including the fediverse-share project itself.

Additional projects include:

• ShareOpenly by Ben Werdmuller
• Mastodon Share by Alex Barredo

Q: Is this really free to use?

Yep. Attribution and/or link back to the project would be nice, but are not required. And if you have any extra cash, see stefanbohacek.com/support-my-work.

Q: Any way I can share feedback and suggestions?

Yes, feel free to open an issue on this repo, or find my contact information on my website.

See also the #enhancement tickets for planned features and changes.

Tutorials

• Adding a Fediverse Share Button to my Emacs Nikola Blog by Notroot

Development

After making changes to the JS and CSS files, make sure to minify them.

npm install terser -g
npm install minify -g
npm run build

Attributions

Icons

• fediverse.wake.st
• flowbite.com/icons

JS and CSS code

• https://getbootstrap.com