Create a "Share To Mastodon" Button for WordPress


Everyone0 is decamping from Twitter to Mastodon! The great thing about the Federated Internet (hereafter the "Fediverse") is that it is distributed. The bad thing is… it is distributed!

What do I mean by that? Here's an example of the problems with decentralised systems. If I want to create a link on a website which will share text to Twitter, I just create a URl which points to:

twitter.com/intent/tweet?text=https%3A%2F%2Fexample.com

The same is broadly true of any centralised system. Sure, the syntax differs, but you can use a URl like that to post to Facebook, WhatsApp, LinkedIn, etc.

But the Fediverse is different. I use the mastodon.social instance, but you might be on fediverse.rocks or lolcats.chat. So we can't use a single URl to target all of them.

On the mobile web, the answer is simple. Just use the navigator.share() Javascript function (and hope the user has an app installed). But for the desktop web, that just isn't available.

So, we need to use an intermediary. For this, I'm using Nikita Karamov's Toot Proxy.

A URl like: toot.kytta.dev/?text=Check%20out%20https%3A%2F%2Fexample.com

Will open a page like this: Screenshot of a website with the URL text already filled. A prompt asks the user to enter their fediverse destination. The user can then type in their preferred Mastodon address - for example mastodon.social - and get redirected to:mastodon.social/share?text=Check+out+https%3A%2F%2Fexample.com%2F

Magic!

Setting it up in WordPress

The WordPress Jetpack plugin defines a bunch of standard sharing buttons. You can add your own at your-blog.whatever/wp-admin/options-general.php?page=sharing

Clicking on "Add a new service" will bring up a prompt. You can fill it in like this:

A WordPress Popup.
  • Service name Mastodon
  • Sharing URL //toot.kytta.dev/?text=%post_title%%20%post_full_url%
  • Icon URL //edent.github.io/SuperTinyIcons/images/svg/mastodon.svg

You can choose your own icon, and edit the text you share.

Is this a problem?

The Fediverse is a complicated concept and, for better or worse, its structure doesn't lend itself to easily sharing content. Users have to remember which instance of each service they're on. That introduces cognitive overhead which just isn't present when choosing to share to the singular Facebook.

Is there a straightforward solution to this?1


  1. OK - just the nerds ↩︎

  2. No. ↩︎


Share this post on…

6 thoughts on “Create a "Share To Mastodon" Button for WordPress”

  1. said on fosstodon.org:

    @Edent "Copy to clipboard" (title + url) would cover a lot. Might also be faster and higher confidence for things like Masto, though even mail I have three possible apps/browsers/sites at different times.Natively, Web Share API is cool. Can JS call to add title to URL. Allows choice each time, most masto apps implement. But, last I checked PWA can't enlist in share sheet yet. But one day 🙂 Related: https://github.com/adactio/share-button-type/issues/1 @adactio URL scheme: https://github.com/mastodon/mastodon/issues/4892Using the Web Share API? Describe your use case. · Issue #1 · adactio/share-button-type

    Reply | Reply to original comment on fosstodon.org

  2. says:

    Hi,

    Your blog was one of the first pages I found when I searched for mastodon share buttons, and the one that first showed me the toot.kytta.dev solution. It was the best one I could find at the time, but there were still some issues with it that I felt could be solved most easily by reinventing the wheel. One of the issues is that toot.kytta.dev shares more information than necessary (specifically, it uses an external tracker/counter, and the contents of the message is sent to the server as a query parameter in the URL), which could make it harder to trust for some use cases.

    So I've made an alternative, and it can be used in the same way, except with "https://tootpick.org/#text=" in front. Note that it uses "#text=" instead of "?text=" - that's necessary to keep the contents of the message in the user's browser, without sending it to the server. Like the "toot" proxy, it can also be self-hosted, but it's more accessible than with the other one because Tootpick is built as a single static HTML file.

    Note: Tootpick is new and has only been online for a few days now. I'm still looking for more people to test the service to uncover any bugs.

    Reply

Trackbacks and Pingbacks

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">