Api de Twitter y Javascript - Mostrar los últimos Tweets de Cualquier Ususario

Con solo tres líneas de código Javascript, ahora puedes ver tu(s) último(s) tweet(s) dentro de cualquier página web gracias a la aplicación de twitter -Twitter API- que te permite acceder a la base de datos de twitter de manera muy fácil y eficiente.

Cacho Lagarza
Cacho Lagarza
26 de July · 443 palabras.
x

🕘 Resumen

El artículo ofrece una solución para mostrar los últimos mensajes de Twitter en un sitio web sin tener que instalar ningún plugin en el CMS. Solo se necesita el nombre de usuario y unas líneas de código JavaScript para hacerlo. El primer paso es decidir dónde se quiere mostrar el contenido de Twitter y copiar el código "<div id="twitter_update_list"></div>". Luego, se debe ingresar otro código que consulte la base de datos de Twitter. Asegurándose de cambiar el nombre de usuario y el número de mensajes que se deben mostrar en la página. Además, se puede cambiar el estilo de visualización de los tweets con CSS. Este método es una alternativa para aquellos que no están utilizando un CMS popular como WordPress o Blogger y necesitan mostrar los tweets de un usuario en particular. La simplicidad de la solución permitirá a desarrolladores web y diseñadores agregar los últimos mensajes de Twitter en sus páginas web de manera rápida y efectiva.
Normalmente cuando queremos mostrar nuestro último mensaje enviado a twitter (o varios de ellos) y estamos utilizando una plataforma muy popular como Blogger o Wordpress, podemos instalar un plug-in que viene con dichos CMS para hacer todo el trabajo.

Pero cuando estamos creando un sitio (o modificando un sitio que no está construido bajo ninguna plataforma popular de contenido) nos puede surgir la necesidad de mostrar los últimos tweets (mensajes) nuestros o de un usuario en particular.

No necesitamos nada más que el nombre de usuario que queramos mostrar, y unas simples líneas de código javascript para realizarlo. Obviamente debes tener acceso a editar el código HTML del sitio en el cual deseas colocarlo.
Pasos:
  1. Primero que nada, decide en qué parte de la página deseas mostrar el contenido de twitter, y luego copia esta código:


     
  2. Ahora debes ingresar el código javascript que consulta la base de datos de Twitter. Debes hacerlo debajo del código ingresado en el paso 1.




    Asegurate de cambiar el texto "12345" por tu nombre de usuario de twitter (o el nombre de ususario que deseas mostrar). Además, el número que viene luego de "&count=" determina el número de mensajes de twitter que se mostrarán. En el ejemplo se mostrará el último mensaje únicamente, pero puedes cambiarlo.
Eso es todo. Ahora solamente queda -de forma opcional- cambiar el estilo de visualización de los mensajes que se mostrarán. Para esto se puede usar CSS de forma muy fácil.

Por ejemplo, para cambiar el color del texto a naranja y el color de fondo a negro, solo debería incluir el siguiente código en mi archivo .css

#twitter_update_list span {
color: #FFCC00;
background: #000000;
}

De la misma forma se puede cambiar el color de los links que aparecen dentro de los tweets, y también el color de los mismos cuando se les pasa el mouse por encima. Respectivamente sería:

#twitter_update_list span a {
display: inline;
color: #000000;
}
#twitter_update_list span a:hover {
text-decoration: underline;
color: #666666;
}

Esto no es todo lo que se puede hacer con el API de Twitter, de hecho las posibilidades son muy numerosas. Es recomendado leer la documentación del api de twitter (en inglés) para entender mejor el funcionamiento de este script y de las opciones que tenemos los webmasters al utilizarlo.

Comparte tu conocimiento y tus intereses con el mundo.

Publica un artículo →