Distributopia = distributed utopia. The name's inspired by Framasoft's "Contributopia". Mainly, small Fediverse projects / research.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3.6 KiB

🐧 share / connect / support buttons

You are probably tired of seeing this everywhere

preview screen

*How about this instead?

preview screen

*inspired by FSFE buttons

Make your visitors wonder what those icons represent.

Help promoting federated, privacy-friendly networks.

DEMO page

What are these?

These are social buttons for your personal blog, profile. They can be added to any page, including static websites.


The collection of buttons is basically a set of SVGs and some styles.

1. Install

Copy styles.min.css and share.min.js into your project directory. You will also find unminified versions in public folder.

Note: Only sharing buttons require the script. If you intend to use connect or support buttons, add just the styles file.

2. Include

Include styles.min.css with a <link> tag in the <head> of your page, and share.min.js with a <script> tag.

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="styles.min.css">
    <!-- buttons go here -->
    <script src="share.min.js"></script>

Include icons that you plan to use as <symbol> in <head>. You'll find all available SVGs in example page code. This way of using SVGs provides easy manipulation.

<!-- ... -->
    <link rel="stylesheet" href="styles.min.css">
    <svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
      <symbol id="icon-friendica" viewBox="0 0 24 24">
        <path d="M7.525 23.347c-.847-.005-2.535-.86-2.908-3.15-.035-.216 0-15.89 0-15.89S5.2 1.086 8.01.65h11.433v6.37h-7.267v5.087h7.267v4.796h-7.267v6.445s-4.65-.002-4.65 0z"/>
<!-- ... -->

3. Use

Now add buttons referencing SVGs in <use> tag, like so:

<a href="https://yourfriendicalink.wow" class="dex-btn wo-text circle friendica" title="Connect on Friendica" target="_blank" rel="external noopener">
  <svg role="img" class="dex-icon" width="16" height="16">
    <use xlink:href="#icon-friendica"></use>

Note: Don't forget to replace demo href URL with your link.

Sharing buttons are a bit more complex. They require a script mentioned above and an overlay input.

<input name="popup" id="overlay" class="overlay" type="radio">

<div class="share">
  <label class="dex-btn rounded  wo-text mastodon" title="Share this page on Mastodon" for="mastodon-share">
    <svg role="img" class="dex-icon" width="16" height="16">
      <use xlink:href="#icon-mastodon"></use>
  <input name="popup" id="mastodon-share" class="hidden" type="radio">
  <span class="popup">
    <label for="overlay"></label>
    <input name="podurl" value="" placeholder="Mastodon URL (witches.town)" type="text"><button class="share-btn" type="submit"  value="mastodon">OK</button>


Following utility classes are provided to change button styling.

  1. .rounded - rounded corners

  2. .oval - more rounded corners

  3. .circle - circle icon

  4. .wo-text - fixed width (34px by default) for buttons without text

For more examples see demo page.


Some websites using these buttons: To include yours, please, add a link below and open a merge request