How to add a Mastodon share button on GitHub, WordPress and Blogger

In this post we will see the different ways that exist to add a Mastodon share button to each of your blog posts. With that button, your blog readers will be able to post a toot in their Mastodon instance, related to any of your posts.

About Mastodon and the integration between this decentralized network and WordPress, I suggest How to integrate WordPress and Mastodon.

Creating a Mastodon share button: GitHub

Before we see how to create a Mastodon share button within a WordPress blog, let’s see how to do it on GitHub and Jekyll.

To find out how to create a blog on Github, I invite you to read How to have a blog with GitHub and Jekyll (in spanish).

Customizing a GitHub and Jekyll blog requires some technical knowledge, especially HTML and CSS. Add the following code to the /_layouts/post.html file:

<a title=”Share on Mastodon” href=”https://tootpick.org/#text=Check%20out%20https://myblogen.github.io/wordpress-button-mastodon/%20by%20@user@instance.mastodon”<img src=”https://edent.github.io/SuperTinyIcons/images/svg/mastodon.svg” width=”40” alt=”mastodon icon” /</a>

The “trick” to get that HTML code to work is based on the following:

• Using Juerd Waalboer ‘s Toopick software, to display the screen that allows you to customize the toot text and choose the instance. Unlike a share button in a centralized network, you need to know the url of the specific instance to which you want to send the message. Thanks to Terence Eden, I found out about this software in a comment to the Create a «Share To Mastodon» Button for WordPress. Toopick’s software, like Toot Proxy’s Nikita Karamov, can also be self-hosted, but it’s more accessible than with the other because Tootpick is built as a single static HTML file. It’s also more privacy-friendly, as explained in the project’s documentation. It is recommended that the software runs from your own server so as not to depend on external resources, which implies dependency and low final loading speed. Check the Blogpocket archive to learn how to self-host this software (post in preparation).
• The icon image, corresponding to Mastodon, can be uploaded to a folder in your GitHub installation (images). But you can also use edent.github.io/SuperTinyIcons/images/svg/mastodon.svg. Although it is more advisable, to host the file with the icon on your server, for the same reason described for the software.

The text that appears in the box by default, as well as the size of the icon, can be customized within the above code. As shown in the snippet below, you can put your own GitHub domain immediately before /wordpress-button-mastodon/.

myblog.github.io/wordpress-button-mastodon/

And you can also change your Mastodon user to:

%20by%20@user@instance.mastodon

Icon size is changed to:

width=”40”

More Sharing projects on Mastodon

As you can read in the Toopick documentation, this is not the first of its kind. It is inspired by:

• toot
• Advanced Sharer for Mastodon
• Mastodon Share Button

Creating a share button in Mastodon: WordPress without a plugin

From the implementation of the share button in Mastodon came the idea of doing it in WordPress without using any special social sharing plugin.

Let’s see some ideas to carry it out in:

• A classic theme.
• A block theme.

Classic theme

In a classic WordPress theme, we have the widget areas to customize the website.

If the theme developer has prepared an “after entry” widget area, we can use this to add the widget available when we install and activate the Insert PHP Code Snippet plugin. This plugin allows you to create PHP code snippets and associate them with a short code. In addition, it includes a widget to use in the widget areas.

In this case, we will create a new snippet and add the “Custom PHP Code” widget to the After Entry widget area. In the widget configuration, we will choose the name of the snippet from the drop-down.

With that, we have all the gear to prepare a PHP code, based on the HTML code that we saw in the previous GitHub section. The snippet would be:

<?php global $wp; $current_slug = add_query_arg( array(), $wp-request ); echo ‘<a title=”Share on Mastodon” href=”https://tootpick.org/#text=I suggest you:%20https://www.miblog.com/’.$current_slug.’%20by%20@ usert@myinstance.mastodon”<img src=”https://edent.github.io/SuperTinyIcons/images/svg/mastodon.svg” width=”80” alt=”Mastodon Icon” /</a ‘; ?

Notice that before displaying the image, the slug corresponding to the post is obtained:

global $wp; $current_slug = add_query_arg( array(), $wp-request );

And then the echo statement is used to display the same literal (HTML) that we used in the GitHub section.

To learn about the different options when it comes to obtaining the current URL, I recommend the masterwp article: How to Get Current URL in WordPress (PHP Snippet).

If there was no after entry widget area, it would have to be created. That is beyond the purpose of this article, so I refer you to the Blogpocket archive (post in preparation).

Block theme

In a block theme there is no widget area, but we have the template in the site edition. Simply, you have to edit the template corresponding to the individual post and add a shortcode block at the end, in which we will incorporate the one corresponding to the same snippet that we saw in the Classic theme subsection.

Creating a Mastodon share button: WordPress with plugin

Terence Eden mentions in his article that the Jetpack plugin (supposed to be the Jetpack Social plugin) allows you to add the Mastodon icon and configure it but I couldn’t get it to work. There are other social sharing plugins. Most do not contemplate Mastodon.

Among those who contemplate decentralized networks like Mastodon, there is the AddToAny Share Buttons but I couldn’t get it to work either.

Logically, this section is left open, although we should pursue a self-hosted solution and avoid plugins.

But, whether you have a classic theme, with an After Entry widget area, or a block theme, using the Insert PHP Code Snippet and Toopick plugin seems like the best option.

Creating a share button in Mastodon: Blogger

If you have a blog on Blogger (.blogspot or custom domain) the best way is to edit the HTML of the template and add the following code:

<!-- Mastodon -->

<div>

<a alt='Comparte en Mastodon' expr:href='&quot;https://tootpick.org/#text=&quot; + data:post.title + &quot;%20&quot; + data:post.url' title='Comparte en Mastodon'><img alt='icono de Mastodon' src='https://edent.github.io/SuperTinyIcons/images/svg/mastodon.svg' width='40'/>

</a>

</div>

<br/><br/>

In Blogger you will not be able to self-host TootPick.

As for the image corresponding to the Mastodon icon, consider using a text “Share on Mastodon”, instead of an image. In that case, you should remove the img tag from the previous code, leaving the following:

<!-- Mastodon -->

<div>

<a alt='Comparte en Mastodon' expr:href='&quot;https://tootpick.org/#text=&quot; + data:post.title + &quot;%20&quot; + data:post.url' title='Comparte en Mastodon'>

Share on Mastodon

</a>

</div>

<br/><br/>

A trick to upload the Mastodon icon is to create an entry and insert an image from a file you have on your computer. After publishing the entry you could access the URL of the image.

To edit the template, go to the “Theme” option that you will find in the left column. There you will see, at the top of the screen, a drop-down that says “Customize”. Click on the little arrow and then on “Edit HTML”.

The location to add the code should be before closing the loop that displays the inputs:

</b:loop>

The mobile version of Blogger templates often differs from the desktop ones. Sometimes it’s hard to easily tell which parts in code are the corresponding parts. But, in any case, mobile templates usually show, at the bottom of the page, the option “View web version”. If you have not been able to add the code for the mobile version, the user can always go to that option.

To self-host TootPick

TootPick is a very simple tooter that can be self-hosted on your server and even on GitHub to avoid calling the external server tootpick.org.

Check the TootPick documentation first, in the GitHub repository (Readme file).

To self-host it in your own GitHub repository, create a folder to host TootPick’s index.html file. Go into this file and copy the code to the clipboard.

To create the folder, go to “Add file > Create new file” and type tootpick/index.html. That will create the empty index.html file inside a new “tootpick” folder. Edit the new index.html file and paste the clipboard content into it.

Next, edit the “_layouts/post.html” file and change the domain tootpick.org to miblogen.github.io/tootpick.

To self-host it in WordPress, go to your hosting control panel and use the file manager, in order to create a new directory (tootpick) inside the root directory (this is usually public_html).

Once the new directory is created, create the index.html file, edit it, and paste the same content from the index.html file from the original Tootpick repository.

If you have a classic theme, edit the snippet corresponding to the pluginInsert PHP Code Snippet and change the URL (see section «Creating a share button in Mastodon: WordPress without plugin»). And if you have a block theme, still edit the snippet and change the URL as well.

Conclusions

The problem with implementing a share button on a decentralized platform, like Mastodon, is that a variable with an unknown value is needed, which is the instance.

We have seen different alternatives but it seems that implementing simple software on your server, in the style of Toopick, is the best solution. Let’s not forget that we strive to maintain the high level of performance optimization and preserve privacy.