Añade el TL de Mastodon en tu blog de WordPress

Si usas la red social libre Mastodon y tienes un blog, puedes poner tu TL en él con unos simples pasos

 

Vamos a ver una pequeña guía o tutorial que nos permitirá integrar el timeline de nuestra cuenta de Mastodon en nuestro blog o web WordPress utilizando el “widget” de la gente de AzetJP que podemos encontrar en su GitHub.

 

Lo primero de todo es instalar el plugin “jQuery Updater” para que el jQuery de nuestro WordPress esté a la última versión y el widget sea compatible, ya que la versión de jQuery que incluye es demasiado antigua y utilizar dos versiones distintas de jQuery (una para el widget y otra para el sitio) trae problemas (Jess sabe de lo que hablo 😉 ). Simplemente lo instalamos desde el menú de WordPress Plugins → Añadir Nuevo, lo buscamos y lo activamos, no tiene ninguna dificultad.

 

Ahora utilizando git que podéis instalar en Debian y derivados con:

 

1
su -

 

1
apt install git

 

Descargaremos el widget para nuestro TL clonando el repositorio desde el directorio raíz de WordPress (esto es importante) de la siguiente forma:

 

1
git clone https://github.com/AzetJP/mastodon-timeline-widget

 

Ahora tenemos que autorizar al widget para que pueda utilizar nuestra cuenta y mostrar nuestros toots, al igual que con una cuenta de Twitter o incluso de GNU Social (aunque con esta última suele ser menos común). Esto se puede hacer desde la interfaz de Mastodon (no me preguntéis cómo) pero nosotros lo haremos a través de una interfaz de la gente de AjetJP que pone las cosas muy fáciles. Simplemente accedemos a este enlace y seguimos los pasos.

 

 

Se nos abrirá una ventana de nuestro nodo, en este caso mstdn.io, pidiendo nuestras credenciales y después de esto una ventana para confirmar que autorizamos dicha aplicación:

 

 

Al autorizar nos devuelve de nuevo al sitio de AjetJP donde tenemos un código HTML que incluye entre otras la ID de nuestra cuenta y su “token” de acceso. Ahora simplemente creamos un nuevo widget en nuestro WordPress con las características que queramos en Apariencia → Widgets → HTML personalizado y pegamos el siguiente código:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" language="javascript" src="https://your_blog.com/wp-content/plugins/jquery-updater/js/jquery-3.3.1.min.js?ver=3.3.1"></script>
<script type="text/javascript" src="https://your_blog.com/mastodon-timeline-widget/mastodon.widget.js"></script>
<div id="myTimeline" class="mastodon-timeline mastodon-timeline-dark"><script>
$(document).ready(function() {
// jQUERY is required!
  var mapi = new MastodonApi({
    target_selector  : '#myTimeline'
    ,instance_uri    : 'https://my_mastodon_server.tld'
    ,access_token    : 'my_access_token'
    ,account_id      : 'my_account_id'
    // optional parameters
    // ===================
    // - status max
    ,toots_limit     : 5
    // - if you are using font-awesome:
    //,pic_icon        : '<i class="fa fa-picture-o"></i>'
    // or a picture
    //,pic_icon        : '<img src="mypicicon.gif" />'
  });
});
</script></div>

 

Simplemente sustituimos “instance_uri” por la ruta (con protocolo, http o https) a nuestro nodo de Mastodon, también “access_token” y “account_id” por los valores del código HTML del sitio de AjetJP que obtuvimos anteriormente y “your_blog.com” por la ruta a nuestro sitio web.

 

¡Listo! Ya se puede ver el timelime de Mastodon en el blog.

 

timeline mastodon 3

También puede interesarte...

1
Comentarios...

avatar
1 Hilo de comentarios
0 Hilo de respuestas
1 Seguidores/as
 
Comentario más respondido
Hilo más caliente de comentarios
1 Autores/as
Jess Suárez Autores/as de comentarios recientes
  Suscribirme  
+ Nuevo + Antiguo + Votado
Notificarme de
Jess Suárez
Administrador/a

Aclarar que tiene un pequeño bug, cuando retooteo algo se cuelga el widget