Aviso para navegantes:
Esta entrada del blog es antigua. La información que recoge este artículo está obsoleta. Hay una versión más reciente de cómo insertar tuits o cronologías de Twitter en tu web en este mismo rincón para escribir.
Aprovechando los recursos que Twitter pone a nuestra disposición (y un poquito más), vamos a ver cómo insertar un timeline de esta red social en una página web.
Nuestro punto de partida: crear un nuevo widget de Twitter, al que se llega logandose en la web > Icono del engranaje > Configuración > Widgets > Crear nuevo

Aquí veremos las opciones básicas para sacar un código HTML que deberemos insertar en la parte de la web en la que queramos que aparezcan estos tuits. Tuits que pueden ser los de tu timeline, tus favoritos, una lista, una búsqueda… Tampoco es que esta parte tenga mucho misterio (y hay tutoriales al respecto esparcidos por la red como para aburrir).
Ahora bien, ¿qué pasa si queremos una mayor personalización del widget que nos proporciona Twitter? Cuando vas un paso más allá el tema empieza a complicarse, pero esta vez sin sudores fríos, pues bastará con saber que tenemos que acudir a la documentación que la compañía pone a disposición de los desarrolladores Twitter for Websites (en inglés, como de costumbre y actualizado en noviembre de 2017 porque el otro enlace ha desaparecido) y leerla… o seguir leyendo esta entrada en español :P
Personalización
Anoto por aquí algunos de los parámetros que considero más útiles para sumar al código previamente conseguido:
Anchura: width
Medida en pixeles, aunque NO hace falta especificar la unidad pues está implícita en el código de Twitter, por lo tanto, en lugar de escribir, por ejemplo, 300px
como habitualmente haríamos en un código HTML, simplemente especificamos width="300"
Pie y encabezado: data-chrome
- noheader: Su uso elimina el encabezado del widget, donde suele sugerir que se siga al usuario o donde se muestra el logo de Twitter.
- nofooter: Lo mismo para el pie. Esta propiedad se puede aplicar a los widgets de timeline de usuario o de búsqueda para eliminar la caja de texto de la parte inferior que permite tuitear directamente. En los casos de favoritos y listas no tiene sentido ya que éstas carecen de pie.
- noborders: Elimina todos los bordes del widget, los externos y los que separan cada tuit.

- noscrollbar: Oculta la barra de desplazamiento vertical, en caso de que la hubiera, impidiendo que se vean más tuits de los que quepan en la altura especificada para el widget. Por defecto Twitter cargará los 20 últimos tuits del usuario/búsqueda/loquesea y si quitamos el scroll y fijamos la altura en 500px, estaremos cargando más tuits de los que puedan llegarse a leer. Quizá antes de especificar una altura fija y eliminar la barra de desplazamiento nos convenga limitar el número de tuits mostrados (ver información un poco más abajo).
- transparent: Anula el color de fondo del widget, dejándolo transparente, de forma que si lo colocamos sobre una textura u otro color en tu web, será ese el que se muestre en lugar del blanco/negro de los temas por defecto del widget.
Sabido esto, si queremos que, por ejemplo, nuestro recuadro de tuits no tenga cabecera, ni pie, ni bordes, ni fondo, escribiremos: data-chrome="noheader nofooter noborders transparent"
Color del borde: data-border-color
Si en lugar de eliminar los bordes, lo que queremos es que se adecuen a los colores de nuestra web, podremos utilizar esta propiedad como en el ejemplo, sustituyendo la referencia de color por la que deseemos: data-border-color="#cc0000"
Número de tuits mostrados: data-tweet-limit
Como comentaba más arriba, siempre que no se especifique lo contrario, Twitter cargará los últimos 20 tuits del timeline elegido. Para variar esta cantidad, podremos usar el límite de tuits especificando desde un mínimo de 1 a un máximo de 20. Para mostrar sólo 5: data-tweet-limit="5"
Ejemplo práctico
Quiero insertar mis 4 últimos tuits marcados como favoritos en una web y, como los colores predefinidos por Twitter no encajan en el diseño, necesito quitar el fondo al widget así como los bordes. Además tampoco quiero que aparezca el encabezado y necesito que el ancho sea de 333 pixeles.
Tras pasar por la web de Twitter para extraer el código básico de la visualización de mis favoritos, tendremos algo como esto:
<a
class="twitter-timeline" href="https://twitter.com/Usuario/favorites"
data-dnt="true" data-widget-id="00000000000000000000"
>
Tweets Favoritos
</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
En mi caso, esto se traduce visualmente en:
Para lograr nuestro objetivo, a los parámetros básicos proporcionados por Twitter, debemos añadir nuestra personalización:
data-chrome="noheader noborders transparent"
data-tweet-limit="4"
width="333"
Todo esto dentro de <a>
, con lo que el código previo queda de la siguiente manera:
<a
class="twitter-timeline" href="https://twitter.com/Usuario/favorites"
data-dnt="true" data-widget-id="00000000000000000000"
data-chrome="noheader noborders transparent"
data-tweet-limit="4"
width="333"
>
Tweets Favoritos
</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
Tomando el ejemplo anterior, ahora se pueden apreciar los cambios:
Así, partiendo de esta base y con un poquito de picardía, podremos adjuntar tuits a una web con bastante más flexibilidad en el diseño. Espero que os sirva. Hasta la próxima :)
¿Opiniones, dudas? Cuéntame…