Share your blog posts on Mastodon with Jetpack

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 to interact more with the Fediverse on their sites.

Jetpack includes Sharing buttons that can be handy for your readers to quickly share your posts to their Social Network of choice ; adding a Mastodon button seemed like a no-brainer!

Now, Mastodon isn’t the Fediverse: I don’t use Mastodon myself, and WordPress itself can be used to publish to the Fediverse. Still, Mastodon is the most common implementation used today:

Mastodon also happens to offer a common way to build share URLs on all instances. Simply add /share?text= to any Mastodon instance URL while logged in, and you’ll be able to type in a message and share it on your account.

Some services like Toot Proxy already build on top of that share parameter, and folks have been using this to add custom Jetpack Mastodon buttons to their sites. This works well, but requires a bit of setup. Until today! Jetpack 11.9, which will be released later today, will include a Mastodon sharing button.

Once you’ve activated the Sharing feature under Jetpack > Settings > Sharing in your dashboard, head over to Settings > Sharing and enable the button:

As you can see in the video above, the button does a few things:

1. You can pick between just the icon, icon + text, text only, or a button with the colorful logo and the text.
2. When sharing, your visitors will first have to enter the Mastodon instance where they’d like to share the post.
3. By default, the message will include the post title, the post URL, or tags will be added as hashtags at the end. That message can of course be edited.

As site owner, you also have the option to customize that default sharing message. To do so, you’ll need to add some PHP code to your theme’s functions.php file, or use a functionality plugin to add the code snippet.

In the example below, I’ll add a custom message (“I came across … Here is an excerpt: … Read more at …”), the post title, the post excerpt, the post link, and the post tags:

/**
 * Customize the default Mastodon sharing message.
 *
 * @param string  $message   The default message that gets posted to Mastodon.
 * @param WP_Post $post      The post object.
 *
 * @return string The customized message.
 */
function jeherve_custom_mastodon_message( $message, $post ) {
	/*
	 * Let's build some basic information about the post.
	 * Post title, link, excerpt.
	 */
	$post_title   = get_the_title( $post );
	$post_link    = get_permalink( $post );
	$post_excerpt = get_the_excerpt( $post );

	/*
	 * Let's build an array of tags.
	 * We'll massage the output a bit to add hashtags in front of each tag.
	 * We'll capitalize the first letter of each word, for better accessibility.
	 */
	$post_tags_array = get_the_tags( $post );
	if ( ! $post_tags_array ) {
		$post_tags_array = array();
	} else {
		$post_tags_array = array_map(
			function ( $tag ) {
				// Camel case the tag name and remove spaces as well as apostrophes.
				$tag = preg_replace( '/\s+|\'/', '', ucwords( $tag->name ) );

				// Return with a '#' prepended.
				return '#' . $tag;
			},
			$post_tags_array
		);
	}
	// Build a string of tags.
	$post_tags = implode( ', ', $post_tags_array );

	/*
	 * And now we build our final message.
	 * This is of course just an example, you can build any output you want.
	 *
	 * For example, once Mastodon supports Markdown,
	 * you could use Markdown to build a really fancy-looking message.
	 * @see https://github.com/mastodon/mastodon/issues/18958
	 */
	return sprintf(
		'I just came across %1$s. Here is an excerpt: %2$s -- Read more at %3$s %4$s',
		esc_html( $post_title ),
		esc_html( $post_excerpt ),
		esc_url( $post_link ),
		esc_html( $post_tags )
	);
}
add_filter( 'jetpack_sharing_mastodon_default_message', 'jeherve_custom_mastodon_message', 10, 2 );

Here is the result:

That’s a bit much for a single message, but that gives you an idea of the things you can add in there. You could have added the blog title as well for example!

I’m looking forward to the day when Mastodon will fully support Markdown, so we can use Markdown to create better looking messages right out of the box.

---

I hope you’ll have fun with this new sharing button! If you have any feedback, do not hesitate to let us know, either here in the comments, on GitHub, or by contacting support directly.

---

If you’d rather see auto-sharing of your posts to Mastodon instead of sharing buttons, this is something that may still come to Jetpack in the near future. Keep an eye on this GitHub issue! 😉 Until then, why not install the ActivityPub plugin so your blog can get its own handle on the Fediverse?