Troubleshooting & How-Tos 📡 🔍 Web Development

Share to the Fediverse with ShareOpenly

I’ve been experimenting here with ShareOpenly, a web app that acts as an intermediate layer between sites that want a share button and newer social media sites like Mastodon instances or Threads.

Here’s the author’s announcement post.

Basically:

  1. The publisher links to ShareOpenly with the URL and title or description of the page to share. (No Javascript required! No web requests are made until it’s clicked on!)
  2. The reader clicks on it and tells SO what site they want to share on (pre-filled or type in a hostname, with the manually added ones remembered).
  3. ShareOpenly opens that site’s post form with the text pre-filled and ready to go.

It knows where to find the posting forms for several kinds of server software, and you can add a <link rel="share_url".../> template to your site to tell it where to look.

Eleventy

You could generate the link using client-side scripting. But with a static site generator, it’s easy enough to just build it ahead of time and bake it into each page.

In the page footer, I’ve added the following template snippet:

<a href="https://shareopenly.org/share/?url={{ ( siteInfo.domain + (page.url | url) ) | urlEncodePart }}&text={{title | urlEncodePart}}"
target="shareopenly">Share This Post</a>
  • I added the target="shareopenly" attribute as an old-school way to open in a new window or tab without scripting or pop-ups.
  • siteInfo.domain is part of a data structure I have on here. If you have yours stored in another variable, you’ll want to use that, or you can just hard code it.
  • urlEncodePart is a filter I’ve added in .eleventy.js and uses JavaScript’s built-in encoder:
eleventyConfig.addFilter("urlEncodePart", sourceString => {
	return encodeURIComponent(sourceString);
});

On this page, the generated code looks like this:

<a href="https://shareopenly.org/share/?url=https%3A%2F%2Fhyperborea.org%2Ftech-tips%2Fshare-openly%2F&text=Share%20to%20the%20Fediverse%20with%20ShareOpenly"
target="shareopenly">Share This Post</a>

And the link looks like this:

Share This Post

Limitations

I wanted to hook it up to my Postmarks instance using the share_url template so I could use it to post bookmarks, but ShareOpenly sees it as a Mastodon instance and is trying to post to /share with a single text entry instead of /bookmarks/new with the url as defined in the link element. I may write an Nginx redirect for it or a smarter redirect in Postmarks. Or just report the issue to ShareOpenly.

Also: Not everything has a post form that can be pre-filled. Not everything has a front-end to begin with! So I can’t just put that link tag on my GoToSocial instance and point to the post form, because there isn’t one. And it doesn’t look like Elk or Semaphore have a way to pre-fill a post either.

sigh. Sometimes I really wish Web Intents had taken off.

Anyway, you can try it out using the link in the page footer below.