Sep/0920
Nuestro Último Tweet en nuestra web Sin utilizar un Widget – Super Fácil
El objetivo de hoy es simple: insertar nuestro último tweet en nuestra página web Además queremos hacerlo con el mínimo código posible, pero sin usar un widget. Con este ejemplo nos introducimos al uso de la API de twitter.
Autor: Jack Bach
Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.
Para empezar debemos insertar el siguiente código HTML donde queramos añadir las últimas actualizaciones de nuestro twitter:
<div id="twitter_update_list"></div>
El siguiente paso es insertar las siguientes líneas justo después del div del paso anterior:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/usuario.json?callback=twitterCallback2&count=1"></script>
En esta segunda línea es en la que tendremos que definir el usuario, que será el de nuestro twitter, y el número de actualizaciones que queremos mostrar (donde pone 5). El máximo de actualizaciones que podremos mostrar es 20.
Lo que obtenemos con todo esto es una lista dentro del div #twitter_update_list con las diferentes actualizaciones con la siguiente estructura html:
<div id="twitter_update_list"> <li><span>Contenido de la entrada</span><a>Hace x días</a></li> </div>
Con esto ya nos podemos poner a darles estilo con css. Podési ver como ha quedado el mío. Si te gusta el icono, puedes encontrar un pack en este link.
0:38 on Octubre 27th, 2009
genial… voy a ver si logro hacerl funcionar
hace tiempo buscaba una buena aplicacion para mostrar mis ultimos tweets en mi web
saludos
0:56 on Octubre 27th, 2009
mmm… tengo solo un problema
no me funciona el tema del contador…. me aparecen todas mis entradas, no solo la última o las que especifique en el count… sabes que puede ser???
saludos
16:32 on Octubre 27th, 2009
Hace tiempo de este tip y no me acordaba de los detalles, así que lo he probado y me sigue funcionando tal y como explico arriba. Todo el código que hace falta inserar es el que pone arriba. Cambiando el valor de count (count=xxx) varia el número de tweets mostrados.
Asegurate copiando el código tal y como está especificado.
Saludos y suerte!
23:26 on Enero 11th, 2011
como puedo ver en mi web los tweets de mis seguidores, solo aparecen los mios, es decir usarlo casi como si fuera un chat entre usuarios de twitter? muchas gracias
18:45 on Julio 16th, 2010
Muy buen tip, se te agradece =).
Saludos.
julio
7:54 on Julio 31st, 2010
Excelente amigo, muy buen aporte!!!
20:48 on Agosto 3rd, 2010
hola amigo puedes ayudarme para poner mi tweets en mi web te lo agradeceria mucho.
7:40 on Septiembre 16th, 2010
No funciona el codigo mi estimado amigo, ahora twitter utiliza el outh para autenticar a los usuairos…..
14:20 on Octubre 15th, 2010
Muy util para todos los twitteros. Saludos!
0:35 on Noviembre 26th, 2010
Eres un moustro men ese codigo lo esta buscando desde hace rato talvez pones el codigo de facebook
3:37 on Noviembre 26th, 2010
A mi no me sale nada.. copiando ese código…
2:26 on Enero 8th, 2011
hola amigo, primero que nada quiero agradecerte por este tutorial, solo quiero molestarte para que me expliques como hago para que mis tweets aparezcan separados ya que si en count=xxx coloco un numero mayor a 1 me salen todos juntos y cuesta leerlos, quedan todos amontonados. Solo quiero saber como hacer para que queden con un espacio entre tweets. gracias!
15:52 on Enero 14th, 2011
Marcelo, de pronto te sirve lo que yo hice, que fue cambiar esta línea -> a {display: none;} por esta otra -> a {visibility: hidden;} En esta línea muestra hace cuanto tiempo fue hecho el tweet, simplemente la estoy cambiando de no mostrar nada a estar invisible pero manteniendo el espacio.
5:23 on Enero 8th, 2011
funciona…solo que no puedo regular la cantidad de tweets que se muestran, una pregunta, si ves el codigo que pusiste hay un simbolo que es una flecha girada…que significa?
saludos
20:58 on Enero 13th, 2011
Hola, gracias por el dato, ahora necesito poner mis tweets y mis retweets, ¿me podrías ayudar con esto?
16:01 on Enero 14th, 2011
Jack Bach, ya vi bien que es lo que pasa, simplemente el código no muestra los retweets, por eso creo que a algunos no les salió nada, seguramente solo tenían retweets, en cuanto a esto me puedes ayudar, realmente necesito que salgan mis retweets, gracias.
14:48 on Febrero 1st, 2011
oye, pero como hago para mostrar los tweets donde me mencionan o usando determinado hashtag y eso? eso es lo mas importante, lo ke necesito xD
14:43 on Abril 9th, 2011
Gracias, funciona muy bien.
Una cosa, como modifico el estilo con CSS?
14:08 on Mayo 30th, 2011
Para el que lo esta pidiendo para que funcione el count hay que hacer lo siguiente:
Tenemos esto
…=twitterCallback2&;count=1″>
y hay que quitarle el ; que hay entre el & y el count
=twitterCallback2&count=1″>
De esta manera funcionara los contadores.
Saludos, Jose
12:46 on Noviembre 10th, 2011
Hola Jack, mil gracias por el código!
Pero me pasa lo mismo que comenta Freddy: parece que cuenta el número de Tweets que tiene que leer según el número que se le de, pero sólo muestra los que son creados por el usuario de la cuenta que le hemos dado… Si antes de esos Tweets hay publicados comentarios que no son nuestros, los cuenta pero como no son Tweets nuestros no los muestra y queda en blanco :(
Saludos, mon