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:
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:
- 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
@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 to original comment on fosstodon.org
@Edent @gamingonlinux currently working out how to correctly have that script deal with spaces hmm
| Reply to original comment on mastodon.social
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.
How to add a Mastodon share button on GitHub, WordPress and Blogger – Blogpocket Social said on :
This Article was mentioned on social.blogpocket.com
| Reply to original comment on
After dipping my toes into the Fediverse for the past few months, I wanted the Jetpack plugin to be there to help bloggers who wanted…
| Reply to original comment on jeremy.hu
More comments on Mastodon.