Photo of Terence Eden. He has a beard and is smiling.

Create a "Share To Mastodon" Button for WordPress

By · · 6 comments · 400 words · read ~1,417 times.

Everyone1 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?2

  1. OK - just the nerds ↩
  2. No. ↩

Share this post on…

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

  1. says:

    @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/4892
    Using the Web Share API? Describe your use case. · Issue #1 · adactio/share-button-type

    Reply | Reply on fosstodon.org

  3. 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

  1. :

    En este post veremos las distintas maneras que existen para añadir, en cada una de las entradas de tu blog, un botón de compartir en Mastodon. Con ese botón, los lectores de tu blog podrán publicar un toque en su instancia de Mastodon, relacionado con cualquiera de tus publicaciones.
    Acerca de Mastodon y la integración entre esta red descentralizada y WordPress, te sugiero Cómo integrar WordPress y Mastodon.
    Creando un botón de compartir en Mastodon: GitHub
    Antes de ver cómo crear un botón de compartir en Mastodon dentro de un blog de WordPress, vamos a ver la manera de hacerlo en GitHub y Jekyll.
    Decidí renacer mi blog en Githubdedicándolo a publicar versiones en inglés de mis posts en Blogpocket.com.
    Para saber cómo crear un blog en Github, te invito a leer Cómo tener un blog con GitHub y Jekyll.
    Personalizar un blog de GitHub y Jekyll requiere algo de conocimientos técnicos, sobre todo de HTML y CSS.
    agregue el siguiente código al archivo /_layouts/post.html:

    <a title="Share on Mastodon" href=" page.url }}%20by%20@usuario@instancia.mastodon"><img src=" width="40" alt="icono de Mastodon" /></a>

    El «truco» para conseguir que ese código HTML funcione se basa en lo siguiente:

    Uso del software de recoger Delaware juerd waalboer, para mostrar la pantalla que permite personalizar el texto del toot y elegir la instancia. A diferencia de un botón de compartir en una red centralizada se necesita conocer la url de la instancia concreta a la que queremos enviar el mensaje. Gracias a Terence Eden, supe de ese software en un comentario al post Crear un botón «Compartir con Mastodon» para WordPress. El software de Toopick, al igual que Proxy de pitido Delaware Nikita Karamov, también puede ser autoalojado, pero es más accesible que con el otro porque Tootpick está construido como un único archivo HTML estático. También es más amigable con la privacidad, según se explica en la documentación del proyecto. Es recomendable que el software se ejecute desde su propio servidor para no depender de recursos externos, lo que implica dependencia y poca velocidad de carga final. Consulte el archivo de Blogpocket para aprender a autoalojar este software (post en preparación).
    La imagen del icono, correspondiente a Mastodon, lo puedes cargar en una carpeta de tu instalación de GitHub (images). Pero también puedes utilizar Aunque es más recomendable, alojar al archivo con el icono en tu servidor, por la misma razón descrita para el software.

    El texto que aparece en la caja por defecto, así como el tamaño del icono, se puede personalizar dentro del código anterior. Como se aprecia en el fragmento siguiente, puedes poner tu propio dominio de GitHub inmediatamente antes de {{ page.url }}.
    page.url }}
    Y también puedes cambiar tu usuario de Mastodon en:
    %20by%20@usuario@instancia.mastodon
    El tamaño del icono se modifica en:
    width="40"
    Más proyectos para compartir en Mastodon
    Tal y como se puede leer en la documentación de Toopick, este no es el primero de su tipo. Se inspira en:
    Creando un botón de compartir en Mastodon: WordPress sin plugin
    De la implementación del botón de compartir en Mastodon surgió la idea de hacer en WordPress sin utilizar ningún plugin especial de compartir en redes sociales.
    Veamos algunas ideas para llevar a cabo en:

    Un tema clásico.
    Un tema de bloques.

    tema clasico
    En un tema clásico de WordPress, disponemos de las áreas de widgets para personalizar el sitio web.
    Si el desarrollador del tema ha preparado un área de widgets «after entry», podremos usar éste para añadir el widget disponible cuando instalamos y activamos el plugin Insertar fragmento de código PHP. Este complemento permite crear fragmentos de código PHP y asociarlo a un código corto. Además, incluye un widget para usar en las áreas de widgets.
    En este caso, crearemos un nuevo snippet y añadiremos el widget «Código PHP personalizado» al área de widgets After Entry. En la configuración del widget, elegiremos en el desplegable el nombre del snippet.
    Con eso, disponemos de todo el engranaje para preparar un código PHP, basado en el código HTML que vimos en el apartado de GitHub anterior. El fragmento sería:

    <?php
    global $wp;
    $current_slug = add_query_arg( array(), $wp->request );
    echo '<a title="Compartir en Mastodon" href=" sugiero:%20 src=" width="80" alt="Icono de Mastodon" /></a>';
    ?>

    Observe que antes de mostrar la imagen, se obtiene el slug correspondiente al post:
    global $wp;
    $current_slug = add_query_arg( array(), $wp->request );
    Y, luego, se emplea la instrucción echo para mostrar el mismo literal (HTML) que empleamos en el apartado de GitHub.
    Para conocer las distintas opciones a la hora de obtener la URL actual, te recomiendo el artículo de masterwp: Cómo obtener la URL actual en WordPress (fragmento de PHP).
    Si no hubiera un área de widgets después de la entrada, habría que crearla. Eso excede el propósito de este artículo, por lo que te remitió al archivo de Blogpocket (post en preparación).
    tema de bloques
    En un tema de bloques no hay área de widgets, pero disponemos de la plantilla en la edición del sitio.
    Simplemente, hay que editar la plantilla correspondiente al post individual y añadir al final un bloque de shortcode, en el que incorporaremos el correspondiente al mismo snippet que vimos en el subapartado de Tema clásico.
    Creando un botón de compartir en Mastodon: WordPress con plugin
    Terence Eden menciona en su articulo que el plugin Jetpack (se supone que es el plugin Jetpack Social) permite añadir el icono de Mastodon y configurarlo pero yo no pudo hacerlo funcionar.
    Hay otros plugins para compartir en redes sociales. La mayoría no contempla Mastodon.
    De entre los que contemplan redes descentralizadas como Mastodon, está el complemento Botones para compartir AddToAny pero tampoco lo pude hacer funcionar.
    Lógicamente, este apartado queda abierto, aunque deberíamos buscar una solución autoalojada y huir de los complementos.
    Pero, tanto si tienes un tema clásico, con un área de widget After Entry, o un tema de bloques, utiliza el plugin Insertar fragmento de código PHP y Toopick autoalojado, parece la mejor opción.
    Conclusiones
    El problema de implementar un botón para compartir en una plataforma descentralizada, del estilo de Mastodon, es que se necesita una variable con valor desconocido que es la instancia.
    Hemos visto distintas alternativas pero parece que implementar un software sencillo en tu servidor, al estilo de Toopick, es la mejor solución. No olvidemos que perseguimos mantener el alto nivel de optimización del rendimiento y preservar la privacidad.
    Tanto en el blog de Blogpocket, como en eCuaderno (José Luis Orihuela) y blogpocket.github.io Puedes ver funcionando el botón para compartir en Mastodon, usando el software de Toopick.

    Comparte en Mastodonte:

    Y aún hay más…

    Recursos
    La lista de recursos recomendados en Blogpocket.

    Suscríbete a la newsletter
    En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.
    Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

    Artículo Original: https://www.blogpocket.com/2022/12/05/como-anadir-en-tu-wordpress-un-boton-de-compartir-en-mastodon/
    Puedes ver el Original publicado en: Artículo Original
    Autor: Antonio Cambronero

    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>

    <em>Related</em>

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> <p> <br> <img src="" alt="" title="" srcset="">