05 octubre 2012

Añadir widgets de Twitter a blogs y sitios web



El servicio de microblogging Twitter ha actualizado los widgets que pone a disposición de sus usuarios y usuarias, de forma gratuita, para ser insertados en blogs y páginas web. Los tipos de artilugios ofrecidos son los mismos que antes (cronología de usuario, favoritos, lista y búsqueda), pero ha cambiado ligeramente el aspecto de los mismos. Ahora, desafortunadamente, las opciones de personalización son menores, pero se ha añadido un plus de interactividad al posibilitar, no sólo realizar retweets, marcar como favorito y responder desde el widget, sino también publicar tweets.

Los nuevos artilugios de Twitter se encuentran en el apartado de Configuración de nuestra cuenta, al cual se accede desde el menú desplegable del icono con forma de rueda dentada situado en la parte superior derecha de la pantalla. Una vez allí, encontraremos una nueva pestaña, de nombre Widgets, que deberemos clicar para empezar a crear nuestros artilugios (Crear nuevo).

twitter-configuracion-widgets

Llegaremos a una página con cuatro pestañas más. Cada una de ellas se corresponde con un tipo diferente de widget. Las opciones de configuración son exactamente las mismas (excepto la primera) para todos los artilugios, e incluyen:

  • Altura: El tamaño de alto del widget en píxeles. Por defecto, 600. Podemos modificarlo haciendo click encima y escribiendo el número deseado. El ancho se ajusta de forma automática al espacio del que dispongamos en el lugar de nuestro blog o página web donde vayamos a incorporar el artilugio.
  • Plantilla: Sólo disponemos de dos diseños para el aspecto de nuestro widget, claro y oscuro. El primero se parece a la interfaz web del propio Twitter y muestra el texto de los tweets en negro sobre un fondo blanco. El segundo es más parecido a la interfaz del cliente oficial de Twitter, TweetDeck, y muestra el texto de los tweets en blanco sobre un fondo negro.
  • Abrir automáticamente las fotos: Si deseamos que, por defecto, se muestren todas las imágenes publicadas en el artilugio, marcaremos esta casilla. Si preferimos que los visitantes tengan que clicar en el enlace Show Photo para verlas, la desmarcaremos. Esto último puede ser útil para evitar que se muestren en nuestro sitio web fotos "sensibles" y para agilizar el tiempo de carga del widget.
  • Color del enlace: El color de todos los links mostrados en el artilugio. Por defecto, azul. Podemos modificarlo clicando encima de esta casilla y escogiendo el color deseado en la paleta que se abrirá a continuación. Para mayor homogeneidad, usaremos el mismo color de los enlaces de nuestro blog o página web.
  • Dominios: Los sitios web donde se incrustará el widget. Deber ser la dirección exacta, sin el http:// delante. Si usas un dominio propio, comprueba si debes poner las www delante de su nombre o no (depende de cómo lo tengas configurado). Asimismo, escribe la terminación adecuada (.com, .net, .org, etc.). En el caso de los blogs de Blogger, debemos incorporar la "coletilla" local que esta plataforma añade a todas las direcciones, es decir, no vale sólo con lo de blogspot.com, sino que tendremos que poner blogspot.com.es (para que el artilugio se vea en España), blogspot.com.mx (para que se vea en México), blogspot.com.ar (para Argentina) y así sucesivamente. También podemos optar por eliminar estas terminaciones agregando a nuestra plantilla el código proporcionado en el blog de Emilio Cobos.
  • Deshabilitar la personalización de Twitter: Si deseas desactivar las sugerencias personalizadas de Twitter, marca esta casilla.

twitter-widget-cronologia-de-usuario

Dependiendo del tipo de widget que estemos creando, la primera opción de configuración variará:

  • En el artilugio de Cronología de usuario, que es el que muestra la actividad (tweets, retweets, menciones...) de un perfil de Twitter determinado, deberemos escribir el nombre del usuario en cuestión sin la arroba delante. Puede ser el tuyo o el de cualquier otra persona, siempre que se trate de una cuenta no protegida.
  • En el widget de Favoritos, que es el que muestra los tweets que ha marcado como favorito (con la estrella) un perfil concreto, escribiremos el nombre del usuario cuyos favoritos deseemos visualizar, sin la arroba delante. Como antes, pueden ser los nuestros o los de otra persona, si la cuenta es pública.
  • En el artilugio de Lista, que es el que muestra los tweets publicados por los miembros de una lista de Twitter, escogeremos la lista a mostrar en el menú desplegable. Puede tratarse de una lista creada por ti o una de las listas a las que estás suscrito. Como siempre, deben ser públicas.
  • Por último, en el widget Buscar, que es el que muestra los resultados de una búsqueda en Twitter, escribiremos la consulta de búsqueda deseada. Es posible utilizar hashtags y cualquier otro operador de búsqueda avanzada de este servicio, así como marcar o desmarcar la casilla Modo seguro, que excluirá los tweets considerados "sensibles" u ofensivos.

Una vez finalizada nuestra configuración, sólo nos quedará hacer click sobre Crear widget para obtener el código HTML que deberemos copiar y pegar en nuestro blog o página web. En Blogger, por ejemplo, nos dirigiremos al apartado Diseño de nuestra bitácora, clicaremos sobre Añadir un gadget, y pegaremos el código dentro del gadget HTML/Javascript. Es importante que nuestra plataforma de blogging o gestor de contenidos acepte Javascript, ya que éste es el lenguaje utilizado por los artilugios.

twitter-widgets-codigo

De vuelta en la pestaña Widgets del apartado de Configuración de nuestra cuenta de Twitter, podremos ver todos los artilugios que hemos creado, así como modificar su configuración mediante el botón Editar o suprimirlos con el botón Eliminar.

twitter-widgets-editar-eliminar

29 comentarios:

  1. Hola Habrá alguna manera de quitar la barra de desplazamiento y darle scroll automatico a los nuevos tweets como antes? Saludos!

    ResponderEliminar
  2. Puede que haya alguna manera, pero me temo que la desconozco. Te recomiendo que visites el blog Vagabundia, que suele ofrecer trucos para manipular código. En el siguiente artículo, por ejemplo, se explica cómo crear un widget de Twitter totalmente personalizado, aunque es bastante antiguo y no sé si seguirá funcionando: http://vagabundia.blogspot.com/2008/09/twitter-en-blogger-personalizar-el.html. Siento no poder ayudarte. ¡Gracias por la visita!

    ResponderEliminar
  3. A mi no me funciona correctamente. En Blogger solo aparece un enlace a la cuenta de usuario de twitter que he configurado, en lugar del timeline. ¿Te suena de algo? Gracias por tu ayuda y un saludo

    ResponderEliminar
  4. Hola Tat,

    Sí, me suena. Cuando probé los nuevos widgets de Twitter por primera vez también me pasó. Yo lo solucioné modificando la URL del sitio web donde va a insertarse el artilugio.

    Ten en cuenta que, con los nuevos dominios locales de Blogger, debemos añadir al final de nuestra URL (después de blogspot.com) la terminación apropiada para cada país (.es, .fr, .it, etc.) desde dónde puedan visitar nuestro blog, si queremos que el widget se muestre en todo el mundo.

    Por lo tanto, tu problema debería solucionarse si modificas este parámetro en la configuración de tu artilugio. Espero que así sea.

    ¡Gracias por visitarme!

    ResponderEliminar
  5. Efectivamente Patricia, era eso. Te agradezco mucho la ayuda, has sido muy amable y rápida :-)

    ResponderEliminar
  6. Hola a todos:

    A mí me ha pasado lo mismo que a tat, pero ni aun habiendo corregido el parámetro de poner .es al final de mi blog lo he podido solucionar...

    ¿Alguna alternativa?

    ResponderEliminar
  7. Hola Ismael,

    Pues si la URL está escrita correctamente, se me ocurre que quizá estás intentando mostrar los tweets de una cuenta protegida. O puede que tu plataforma de blogging no acepte Javascript (aunque si usas Blogger, no deberías tener problemas).

    ¡Gracias por la visita!

    ResponderEliminar
  8. Hola a todos;,

    Tengo el mismo problema que Ismael y Tat. Encontrasteis alguna solución al final.

    ResponderEliminar
  9. Hola Javi,

    He visto que, finalmente, pudiste agregar el widget de Twitter a alguno de tus blogs. Si te apetece comentar cómo lo solucionaste, seguro que otros usuarios con el mismo problema te lo agradecerán.

    ¡Gracias por visitarme!

    ResponderEliminar
  10. Me aparecen muchos menos tweets en el Widget cuando lo incrusto en mi web, que cuando hago click e el titulo del widget para verlos en la web de Twitter.

    El widget es de busqueda de un hashtag. no está activado el Modo Seguro y deshabilitada la personalizacion.

    Aque puede ser debido?

    Gracias.

    ResponderEliminar
  11. Hola Toni,

    Supongo que se debe a que la frecuencia de actualización del widget es menor que la de la web. En búsquedas con las que se obtiene un elevado número de tweets por segundo como resultado, esta diferencia se hace aún más notable.

    ¡Gracias por la visita!

    ResponderEliminar
  12. Buenos dias, hace muchisimo tiempo que no desempolvaba mi Blog ya hasta telarañas tiene me di en la tarea de reabrirlo y aprender como en viejos tiempo de diferentes temas y llegue a este tema para agregar el widget de twitter que siguiendo los pasos pude agregar. Gracias por el aporte y seguire pasado por aqui que blog mas interesante el que tienes !! saludos desde Colombia!!

    ResponderEliminar
  13. Me alegro de que te resultara útil y mi blog interesante. ¡Felicidades por el tuyo! Un saludo desde España ;-)

    ResponderEliminar
  14. Hola Patricia.

    Tengo la solución para este problema.

    Para que se despliegue el Timeline en la pagina hay que agregar http: en el codigo que entrega Twitter:

    Asi se entrega:

    src="//platform.twitter.com/widgets.js"

    Y as ihay que completarlo:

    src="http://platform.twitter.com/widgets.js"

    Y se soluciona el problema.

    Espero haberlos ayudado.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Oliver Rodriguez! muchas gracias por tu ayuda! estuve buscando y buscando la falla de porque? no me mostraba el widget de twitter! en mi web! sol faltaba ingresar el HTTP: al codigo que te da twitter cuando creas el widget!! muchas gracias por tu ayuda

      Eliminar
  15. ¡Gracias por el aporte, Oliver! La verdad es que yo he probado tu solución y a mí no me ha funcionado, pero quizá a otras personas les valga. También he vuelto a insertar el widget con el código que proporciona Twitter, y no he tenido ningún problema para visualizar el timeline.

    ResponderEliminar
  16. Muchas gracias Oliver solucionaste el problema ;)

    ResponderEliminar
  17. Anónimo5/2/13 04:56

    Hola, yo probé lo que hizo oliver, lo que hizo patricia y no me anda, cuando hago enter en añadir gadget en blogger me dice que: La URL contiene caracteres no permitidos.
    ¿QUE PASA?

    ResponderEliminar
  18. A mi no me funciona absolutamente ninguna de las soluciones expuestas en los comentarios. Me tiene algo aburrido no poder tenerlo en mi blog

    ResponderEliminar
  19. En el Foro para Desarrolladores de Twitter (en inglés), hay un tema dedicado a este problema, que parece bastante frecuente. Podéis consultarlo aquí: https://dev.twitter.com/discussions/10633. Aunque la solución que aporta Twitter suele ser la de comprobar que hayamos escrito nuestro domino (o dominios) correctamente.

    ResponderEliminar
  20. Tengo el mismo problema que Tat, solo veo el link a mi cuenta y no el mi TL.
    El problema es que no se donde debo corregir la url agregando .ar en mi caso
    mi blog es http://enperfectodesorden.blogspot.com.ar/ por si pueden chequearlo.
    Generé el widget desde mi cuenta en twitter pero no se donde pegarlo como HTML
    Gracias desde ya

    ResponderEliminar
  21. Hola Fede,

    La URL de tu blog tienes que escribirla en el campo "Dominios" en el momento de crear tu widget desde tu cuenta de Twitter. El código resultante lo tienes que copiar y pegar en un gadget HTML/Javascript añadido desde el apartado "Diseño" de tu cuenta de Blogger.

    ¡Gracias por la visita!

    ResponderEliminar
  22. jola a todos, no soy experto y tengo el editor de CuteHTML cuando abro la página en
    que parte incerto el codigo para incertar el widgets? despues de que y antes de que?

    Gracias si me pudieras ayudar

    ResponderEliminar
    Respuestas
    1. Hola Ramiro,

      La forma de inserción depende del gestor de contenidos que utilices. Si se trata de Blogger, lo que tienes que hacer es acceder al escritorio de tu blog, ir al apartado "Diseño", clicar sobre "Añadir un gadget" y luego seleccionar "HTML/Javascript". Aquí es dónde tienes que pegar el código de Twitter. Guardas los cambios, arrastras el gadget a la posición de tu plantilla dónde quieras que se muestre, y guardas la disposición (botón naranja superior). Si, en cambio, usas WordPress, el proceso sería éste: http://en.support.wordpress.com/widgets/twitter-timeline-widget/.

      ¡Gracias por visitarme!

      Eliminar
  23. hola , no me sale y no me aparece dominio las demás opciones del dibujo si, ayuda por favor.

    es para agregar a Blogger en un gadget" "HTML/Javascript"
    pego el codigo pero no sale nada, sale solo el link de twitter y nada mas.

    ResponderEliminar
    Respuestas
    1. Hola Marconi,

      Parece que Twitter ha eliminado el apartado referente al dominio, ya que era el causante de la mayoría de problemas a la hora de visualizar sus widgets. Yo acabo de crear uno y de insertarlo en un blog de Blogger, y me funciona correctamente. Asegúrate de haber copiado el código de forma íntegra y de pegarlo sin modificaciones. Comprueba también que tu navegador web esté actualizado.

      ¡Gracias por la visita!

      Eliminar
  24. Hola!
    Estoy buscando la manera de crear un widget para insertar en mi Ning con dos tipos de búsqueda.. una con solo un nombre (para recoger los tweets de un usuario y las menciones sobre éste) y otra con un hashtag. Podríais ayudarme? Yo sólo he conseguido insertar un tipo de búsqueda, pero no dos.
    Muuuuchas gracias!

    ResponderEliminar
    Respuestas
    1. Lo encontré.. añadiendo en el widget de búsqueda una palabra.... OR .... la otra.
      ;)

      Eliminar
    2. Hola Montse,

      Veo que tú misma encontraste la solución al problema :-) Los operadores de búsqueda avanzada de Twitter (como el OR que mencionas) son muy útiles. Se pueden consultar desde este página: https://twitter.com/search-home.

      ¡Gracias por visitarme!

      Eliminar