| 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.
The last domain used is 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 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