Cómo cargar Twitter en una web: Cronología, listas o tuits (versión 2020)

Después de varios años sin actualizar este tipo de entradas, aquí os traigo la versión septiembre 2020 de cómo nos deja Twitter cargar su contenido en nuestras webs. El proceso se ha simplificado bastante desde 2014, ya no hace falta crear widgets. Ahora basta con copiar y pegar, copiar y pegar y, si luego queremos, personalizar un poco. Veamos los pasos que hay que seguir.

Embebe Twitter en tu web

1. Qué quieres insertar

Ten clara la url del tuit, perfil, favoritos, lista, lo que quieras incrustar en tu web.

2. Herramienta de Twitter

Acede a Twitter Publish.

3. Copiar y pegar

Copia la url de antes y pega el enlace en el cuadro que te presenta Twitter. Presiona intro.

4. Opciones para finalizar

Al darle al intro, se pueden dar varias opciones en función de lo que hayas decidido incrustar.

Si es un perfil, por ejemplo, te dejarán elegir entre la cronología de tuits o botones para compartir. Una vez hayas elegido, saldrá en inglés un aviso de que ya está: «Eso es todo lo que necesitas, salvo que quieras personalizarlo un poco».

Si se trata de una lista o favoritos (likes), directamente aparecerá esa misma leyenda sin pasos previos.

Si ya está y no quieres personalizarlo, ahí tienes tu resultado. Pinchas en el botón azul «Copy code» y se copiará el texto html que te facilita Twitter para que lo puedas pegar en tu web.

Personalización

Si necesitas cambiar algún aspecto (alto, largo, número de tuits que se cargan…), deberás seguir el enlace «set customization options».

Básicamente te dejan elegir el ancho por el largo, tema claro, tema oscuro e idioma en el que se mostrará (no los tuits, si no la información accesoria, los sígueme y eso). Cambias lo que desees, pinchas en el botón de «Update» y se generará el nuevo código modificado.

Si bien, más allá de estas opciones sencillas, hay algunas variaciones más interesantes que puedes explorar en la web para desarrolladores de Twitter y que te van a permitir un poquito más de personalización para estos tuits incrustados.

Ejemplos

Ejemplo #1

Elijo una lista que yo tengo sobre El Ala Oeste de la Casa Blanca. Hago este proceso especificando un alto a 500px y el Publisher de Twitter me devuelve tal cual:

<a class="twitter-timeline" data-lang="es" data-height="500" 
href="https://twitter.com/RoserSantisimo/lists/thewestwing?ref_src=twsrc%5Etfw">A Twitter List by RoserSantisimo</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Visualmente esto es así:

A Twitter List by RoserSantisimo

Ejemplo #2

Pero yo quiero que de esta lista solo se muestren los tres últimos tuits, que tenga bordes negros y que no vaya con la cabecera de Twitter ni con el pie. Introduzco esas variables en el código como se indica en la web de desarrolladores y quedaría así:

<a class="twitter-timeline" data-lang="es"
 data-chrome="noheader nofooter"
 data-border-color="#000000"
 data-tweet-limit="3"
 href="https://twitter.com/RoserSantisimo/lists/thewestwing?ref_src=twsrc%5Etfw">A Twitter List by RoserSantisimo</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Visualmente, con los cambios, saldría así:

A Twitter List by RoserSantisimo

Atentción

Fíjate en el prefijo data-, delante de cada propiedad que añades de la lista de la web para desarrolladores de Twitter, hay que incluirlo. El límite de tuits, referenciado en la web como tweet-limit, pasa a ser data-tweet-limit.

Ojo también, si incluyes más de un tuit o cronología en una misma página web (por ejemplo, en una misma entrada de blog), basta con que añadas una única vez la línea de código que hace referencia al script js.

Y eso es todo. Para dudas, los comentarios. Prometo responder para dar aunque sea apoyo moral, porque esto no es tan complicado, pero a veces hay cosas que no salen.