| assets | ||
| fediverse-share-button | ||
| captain-definition | ||
| Dockerfile | ||
| index.html | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
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 <a href="https://jointhefediverse.net/">fediverse</a> 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 widget or the fediverse-info server collect any information? Does it comply with data privacy laws? (eg GDPR)
The sharing widget uses localStorage to store two pieces of information:
fsb-domain: used to store the last domain name used in the sharing widget (eg. "mastodon.social", "pixelfed.social", etc)fsb-software: used to store the software used by the selected fediverse server (eg. "mastodon", "pixelfed")
When stored, this information is used to prefill the widget form upon next visit.
To prevent this information from being stored, you can set the value of fsb-consent-given to "false" before loading the main JavaScript file.
<script>
localStorage.setItem("fsb-consent-given", "false");
</script>
Using any other value, or the lack of presence of it, will be interpreted as a consent to store and retrieve the information detailed above. Please consult any applicable laws to determine whether consent is required for this functionality.
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. This information is not tied specifically to your site's visitor.
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:
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
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