El rincón de escribir

Imagen de una bota haciendo las veces de macetero

Publicado el

por


De nuevo: Cómo insertar Twitter en tu web y amoldarlo a tu diseño

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

Cómo llegar a la página de creación de widgets en Twitter
Pasos para llegar a la página de creación de widgets en Twitter

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.
Elementos principales del widget de Twitter
Vista aclaratoria de algunos de los elementos del widget de Twitter que pueden ser eliminados
  • 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 :)

Comentarios

20 respuestas a «De nuevo: Cómo insertar Twitter en tu web y amoldarlo a tu diseño»

  1. Hola! Tu explicación es muy clara, gracias, pero no me da resultado. Sigue vigente? gracias

    1. Sí, sigue en funcionamiento. De hecho, los ejemplos que yo expongo en este mismo artículo están construidos de esa misma forma y siguen siendo visibles (depende de la cantidad de tráfico, en ocasiones aparece un enlace plano a los tuits mientras se cargan, pero finalmente se muestran).

      1. Disculpa, pero no me queda. Podrías señalarme con exactitud adónde debo poner data-chrome=»noheader noborders transparent» ?

        Esto es lo que me da Twitter:
        Tweets por @AnaTuron
        !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»);

        Perdona tantas molestias, pero soy del siglo pasado…!
        Gracias, gracias, gracias

  2. No tengas en cuenta mi mensaje anterior. Quedó buenísimo!! Gracias!!!

    1. Me alegra que te haya funcionado :)

  3. antonio

    hola buenas sigue funcionando¿?

    1. En vista de que los ejemplos siguen mostrándose, diría que sí que funciona aún ;)

  4. Hernan

    Hola, muy buen post, pero tengo un problema. Yo quiero que el TL aparezca a todo lo ancho de la pagina, y el tamano maximo que me da es el original. En tu caso lo redujiste a 333 y eso vi que si funciona, pero si lo que quiero es ampliarlo, no lo hace…. me podras ayudar?

    1. Buenas y gracias. Según creo entender de lo que se dice en la Dev de Twitter (enlace aquí) hay un mínimo de 180px de ancho y un máximo de 520px para estos widgets. A lo mejor te sirve el ejemplo de grid que tienen en esa misma página. Si no, te tocará buscar alguna solución de terceros. ¡Suerte!

  5. josue

    Hola Roser, muy explicativo tu Post,
    Tengo un pequeño problema, quisiera limitar el widget a 5 posts como explicaste utilizo el data-tweet-limit=»5″, el problema es que pierdo el scroll que trae cuando no lo limito.
    quisiera poder mostrar los 5 posts pero que se mantengan dentro del recuadro para no perder el scroll.
    sabes como hacerlo?

    Saludos

    1. Muy buenas, Josue. Por lo que he estado leyendo, si limitas el número de tuits, el scroll desaparece y, si quieres un tamaño fijo –como necesitas el scroll– no puedes limitar el número de tuits. Es decir, que una cosa o la otra pero no las dos a la vez. Aducen temas de usabilidad, blablabá… Si buscas en Google data-tweet-limit + scroll verás de lo que te hablo y puede que encuentres alguna solución que a lo mejor te sirve ;)

  6. Hola Roser! A ver si puedes ayudarme a crear ese widget de twitter en mi blog. Yo en configuración en Twitter hago un widget de búsqueda, en la creación del widget en la pagina de Twitter sale fantástico lo que quiero que aparezca en mi web. Me voy a mi blog, wordpress, busco añadir widget con la opcion de widget de texto o html, copio el codigo que se me da en la página de twitter y en Blog me apare el titulo de lo que busco con el enlace a Twitter a esa búsqueda seguido de un montón de letras que no se que quieren decir. ¿Cuál es el error? Porque no me sale la ventana con las diferentes busquedas del widget que he creado en twitter? Necesito tu ayuda por favor… Ya no se que hacer… Ni sé que hago mal. Te dejo el enlace de mi blog, lo que te comento esta en la barra latereal al final. Mi busqueda, es sobre #Gamificación Mooc.

    https://classonliveblog.wordpress.com/

    1. Buenas. He estado mirando el código que se genera en tu web y parece que está incompleto, por eso puede que no se muestre correctamente. Si sigues las instrucciones que ofrece Twitter en esta web, podrás crear el widget con la búsqueda que funcione (lo he probado con la misma búsqueda que tú propones). Básicamente lo que hay que hacer es… copio y pego:

      1. Inicia sesión en tu cuenta de Twitter.
      2. Introduce tu búsqueda en el cuadro de búsqueda.
      3. En la parte superior de tus resultados de búsqueda, haz clic en Más opciones y luego selecciona Insertar esta búsqueda.

      Luego, en los widgets de WP, seleccionas uno de tipo Texto (como bien decías) y pegas el nuevo código. Eso debería bastar. De cualquier forma te diré que, desde que escribí esta entrada, parece que Twitter ha cambiado la forma de insertar tuits (o algunas partes al menos) y, aunque funcione, a veces la manera antigua puede dar errores.

      ¡Suerte!

  7. ileana

    Gracias! buen aporte! ;)

    1. Gracias a ti por pararte un momento y comentar ;)

  8. Saludos, muy buen post, pregunta ¿existe algun plugin para reutilizar post antiguos y re twitearlos de forma automatica?

    1. Buenas. Gracias por el comentario. Depende de la plataforma en la que funcione el blog hay unas opciones u otras. En WordPress hay varios plugins que pueden automatizar esa labor de recuperar entradas antiguas y tuitearlas. Puedes buscar en Internet algo como «tweet old post» y ver si alguno de los resultados te ayuda. ¡Suerte!

  9. Diego Esparza

    Hola, mi problema es que al ingresar el widget no tiene scroll y quiero ingresarlo, así mismo hay añlguna opción para ponerle color de fondo al widget

    1. Buenas, Diego. El scroll aparece solo al desplazarte por el timeline. Así lo tiene implementado Twitter. Sobre el color de fondo, me doy cuenta de que desde que escribí el texto, Tw ha cambiado este servicio y el enlace a la Dev no funciona. He encontrado este otro: Twitter for Websites, por si te sirve. Si no, se me ocurre que puedes poner el fondo transparente y aplicarle un color al contenedor donde lo incluyas, es decir, en lugar de ponerle color al widget, se lo pintas por debajo :P

  10. ¡Muchas gracias! Estaba buscando eso, ya que el límite de 20 tweets me parecía mucho.

¿Opiniones, dudas? Cuéntame…

This site uses Akismet to reduce spam. Learn how your comment data is processed.