| fediverse-share-button | ||
| images | ||
| video | ||
| captain-definition | ||
| Dockerfile | ||
| index.html | ||
| LICENSE.md | ||
| 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, visit my blog.
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
- Download the files in this repo.
- Add the JavaScript code and CSS stylesheet to your page.
<link rel="stylesheet" href="./fediverse-share-button/styles.min.css">
<script src="./fediverse-share-button/script.min.js" defer class="fsb-script"></script>
Note that if you need to change the path at which the fediverse-share-button folder is uploaded
- Add a sharing prompt to your page.
<form class="fsb-prompt">
<label>Share with the fediverse</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="Amount (to the nearest dollar)">
<button class="fsb-button"
type="submit"><img src="./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>
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: 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.
Q: Are there any similar projects?
Yes, see a list here: https://github.com/Uden-AI/fediverse-share#similar-projects-to-compare-to, including this project itself.
Q: Is this really free to use?
Yep. But if you do 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.
To-do
- Add missing icons, see
icons/todo.txt. - Better development workflow.
- Localization.
Development
After making changes to the JS and CSS files, make sure to minify them.
npm install terser -g
npm install minify -g
terser fediverse-share-button/script.js > fediverse-share-button/script.min.js
minify fediverse-share-button/styles.css > fediverse-share-button/styles.min.css