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 toot en su instancia de Mastodon, relacionado con cualquiera de tus posts.
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 y Blogger, vamos a ver la manera de hacerlo en GitHub y Jekyll.
Decidí renacer mi blog en Github, dedicá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.
Añade el siguiente código al archivo /_layouts/post.html:
<a title="Share on Mastodon" href="https://tootpick.org/#text=Check%20out%20https://miblogen.github.io{{ page.url }}%20by%20@usuario@instancia.mastodon"><img src="https://edent.github.io/SuperTinyIcons/images/svg/mastodon.svg" 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 Toopick de 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 Create a «Share To Mastodon» Button for WordPress. El software de Toopick, al igual que Toot Proxy de 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 tu propio servidor para no depender de recursos externos, lo que implica dependencia y poca velocidad de carga final. Consulta la sección «Autoalojar TootPick», al final de este artículo, para aprender a autoalojar este software.
- 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 https:////edent.github.io/SuperTinyIcons/images/svg/mastodon.svg. 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 }}.
https://miblog.github.io{{ page.url }}Y también puedes cambiar tu usuario de Mastodon en:
%20by%20@usuario@instancia.mastodonEl 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 hacerlo en WordPress sin utilizar ningún plugin especial de compartir en redes sociales.
Veamos algunas ideas para llevarlo a cabo en:
- Un tema clásico.
- Un tema de bloques.
Tema clásico
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 ésta para añadir el widget disponible cuando instalamos y activamos el plugin Insert PHP Code Snippet. Este plugin permite crear snippets de código PHP y asociarlo a un short code. 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 snippet sería:
<?php global $wp; $current_slug = add_query_arg( array(), $wp->request ); echo '<a title="Compartir en Mastodon" href="https://tootpick.org/#text=Te sugiero:%20https://www.miblog.com/'.$current_slug.'%20por%20@usuariot@miinstancia.mastodon"><img src="https://edent.github.io/SuperTinyIcons/images/svg/mastodon.svg" width="80" alt="Icono de Mastodon" /></a>'; ?>
Observa 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: How to Get Current URL in WordPress (PHP Snippet).
Si no hubiese un área de widgets after entry, habría que crearla. Eso excede del propósito de este artículo, por lo que te remito a este post: Cómo crear un área de widgets «after entry» en un tema clásico de WordPress.
Tema de bloques
En un tema de bloques no hay área de widgets, pero disponemos de las 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 artículo que el plugin Jetpack (se supone que es el plugin Jetpack Social) permite añadir el icono de Mastodon y configurarlo pero yo no he podido 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 plugin AddToAny Share Buttons pero tampoco lo pude hacer funcionar.
Lógicamente, este apartado queda abierto, aunque deberíamos perseguir una solución autoalojada y huir de los plugins.
Pero, tanto si tienes un tema clásico, con un área de widget After Entry, o un tema de bloques, utilizar el plugin Insert PHP Code Snippet y Toopick autoalojado, parece la mejor opción.
Creando un botón de compartir en Mastodon: Blogger
Si tienes un blog en Blogger (.blogspot o dominio personalizado) la mejor manera es editando el HTML de la plantilla y añadiendo el siguiente código:
<!-- Mastodon -->
<div>
<a alt='Comparte en Mastodon' expr:href='"https://tootpick.org/#text=" + data:post.title + "%20" + 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/>En Blogger no vas a poder autolojar TootPick.
En cuanto a la imagen correspondiente al icono de Mastodon, considera, emplear un texto «Comparte en Mastodon», en lugar de una imagen. En ese caso, deberás eliminar la etiqueta img del código anterior, quedando lo siguiente:
<!-- Mastodon -->
<div>
<a alt='Comparte en Mastodon' expr:href='"https://tootpick.org/#text=" + data:post.title + "%20" + data:post.url' title='Comparte en Mastodon'>
Comparte en Mastodon
</a>
</div>
<br/><br/>Un truco para subir el icono de Mastodon es crear una entrada e insertar una imagen a partir de un archivo que tengas en el ordenador. Tras publicar la entrada podrías acceder a la URL de la imagen.
Para editar la plantilla, dirígete a la opción «Tema» que encontrarás en la columna de la izquierda. Ahí verás, en la parte superior de la pantalla, un desplegable que dice «Personalizar». Haz clic en la flechita y después en «Editar HTML».
La ubicación para añadir el código debe ser antes de cerrar el bucle que muestra las entradas:
</b:loop>La versión para móviles de las plantillas de Blogger suele diferir de las de escritorio. A veces, es complicado distinguir fácilmente, en el código, cuáles son las partes correspondientes. Pero, en cualquier caso, las plantillas para móviles suelen mostrar, a pie de página, la opción «Ver versión web». Si no has podido añadir el código para la versión de móviles, el usuario siempre podrá ir a dicha opción.
Autoalojar TootPick
TootPick es un tooter muy simple que se puede autoalojar en tu servidor e, incluso, en GitHub para evitar la llamada al servidor externo tootpick.org.
Consulta primero la documentación sobre TootPick, en el repositorio de GitHub (archivo Readme).
Para autoalojarlo en tu propio repositorio de GitHub, crea una carpeta con el fin de alojar el archivo index.html de TootPick. Entra en este archivo y copia el código en el portapapeles.
Para crear la carpeta, ve a «Add file > Create new file» y escribe tootpick/index.html. Eso creará el archivo index.html vacío dentro de una nueva carpeta «tootpick». Edita el nuevo archivo index.html y pega el contenido del portapapeles dentro de él.
Después, edita el archivo «_layouts/post.html» y cambia el dominio tootpick.org por miblogen.github.io/tootpick.
Para autoalojarlo en WordPress, acude al panel de control de tu hosting y usa el administrador de archivos, con el fin de crear un nuevo directorio (tootpick) dentro del directorio raíz (este suele ser public_html).
Una vez creado el nuevo directorio, crea el archivo index.html, edítalo y pega el mismo contenido del archivo index.html del repositorio original de Tootpick.
Si tienes un tema clásico, edita el snippet correspondiente al plugin Insert PHP Code Snippet y cambia la URL (ver apartado «Creando un botón de compartir en Mastodon: WordPress sin plugin»). Y si tienes un tema de bloques, edita igualmente el snippet y cambia también la URL.
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, utilizando el software de Toopick.
Responder en Mastodon (requiere usuario en esa plataforma)
Puedes usar tu cuenta de Mastodon para responder a este post de
Copia y pega esta URL (https://www.blogpocket.com/?p=73531) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.
Comparte en Mastodon:
Y aún hay más…
Cómo se hace un sitio web
Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.
Recursos
La lista de recursos recomendada en Blogpocket.
Mi lista de plugins
La lista de plugins de WordPress recomendada 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)!.
Deja una respuesta