Mostrar últimos tweets en el blog y configurar su aspecto | Oloblogger A mediados de 2013 Twitter dejó de dar soporte a la API que sustentaba este tipo de gadgets. Para encontrar un código actualmente operativ...

29 de junio de 2011

Mostrar últimos tweets en el blog y configurar su aspecto

A mediados de 2013 Twitter dejó de dar soporte a la API que sustentaba este tipo de gadgets.

Para encontrar un código actualmente operativo te remitimos a este otro post: Mostrar tweets tras el fin de la API 1 de Twitter.

Hace tiempo vimos los gadgets oficiales de Twitter, entre los que encontrábamos uno para mostrar tweets. Era dinámico, con actualización constante y muy mono, pero quizás en alguna ocasión necesitemos algo más sencilo y que podamos modificar para integrar totalmente con el estilo del blog.

Pues para eso, lo más básico es utilizar un JavaScript también de Twitter y adaptado para Blogger, que nos mostrará los últimos tweets de la cuenta que queramos mediante una lista simple. El estilo lo tomará del que tengamos definido por defecto para este tipo de elementos en nuestro blog.

<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/oloman.json?callback=twitterCallback2&amp;count=5" type="text/javascript"></script>

Este código puesto en la barra lateral o en una entrada, proporcionará los últimos tweets de la cuenta que se indique tras user_timeline. En el ejemplo está puesta la mía por lo que tenéis que sustituir ese usuario por el vuestro. El número tras count= indica el número de tweets a mostrar y también es modificable.


Con eso tenemos lo que pretendíamos, pero si lo que queremos es dar un formato particular a esa lista, lo podemos hacer añadiendo algo de estilo. Para ello podemos meter todo en un div con una clase y luego definir las propiedades correspondientes en nuestro css. Incluso se puede insertar directamente antes del código. Para ir viendo otras posibles modificaciones, también hemos añadido en el siguiente ejemplo una cabecera con nuestro nombre de usuario. Nada impide incluir también una imagen, un enlace, un botón de "seguir", etc.:

<style type="text/css">
.listatwitter {
margin:0px auto;
width:400px;
padding:20px;
background:#cccccc;
color:#000080;
text-align:left;
}
</style>
<div class="listatwitter">
<h2>
@oloman</h2>
<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript">
</script>
<script src="http://twitter.com/statuses/user_timeline/singenio.json?callback=twitterCallback2&amp;count=5" type="text/javascript">
</script>


El script que hace todo esto es visible accediendo a su dirección http://twitter.com/javascripts/blogger.js. Si queremos cambiar algunas cosas más, todavía podemos hacerlo modificando ese código. Por ejemplo, un cambio sencillo y que reduce bastante su extensión, sería suprimir la fecha-enlace de cada tweet. En este caso hasta podremos incluirlo directamente en el gadget para no tener que tirar del de Twitter. Sólo tenemos que quitar previamente la llamada al script original y meterlo entre etiquetas script:

<style type="text/css">
.listatwitter {
margin:0px auto;
width:400px;
padding:20px;
background:#cccccc;
color:#000080;
text-align:left;
}
</style>
<div class="listatwitter"><a href="http://twitter.com/oloman" class="twitter-follow-button" data-lang="es">Follow @oloman</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript">function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
</script>
<script src="http://twitter.com/statuses/user_timeline/oloman.json?callback=twitterCallback2&count=5" type="text/javascript">
</script>



¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

21 comentarios :

  1. No me gusta tanto como queda... Prefiero el arilugio oficial de Twitter, como el que tengo en mi blog. Tiene muchas más opciones para editarlo. Saludos desde Paraguay Oloman ;)

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. oops quise decir:
    @wii4everybody siguiendo a @oloman xD
    Saludos gente!

    ResponderEliminar
  4. Mark lo que puse es un ejemplo muy sencillito. La ventaja de este sistema es que puedes personalizar tanto como quieras el aspecto. Eso incluye posibilidades infinitas, más de las que el gadget oficial tiene.

    ResponderEliminar
  5. Hola Oloman.

    He encontrado tu página y me parece fascinante. Me encanta retocar mi plantilla y este es un sitio estupendo para poder hacerlo de forma segura.

    Quería preguntarte por una cosilla concreta que no tiene que ver con este post, pero no he encontrado la forma de contactar contigo directamente.

    Es algo sencillo de entender, pero puede que sea muy complejo de hacer.

    Estoy modificando los comentarios de mi blog y hay una cosa que no encuentro en ningún sitio. Hay webs (como Público,es) en la que puedes mencionar comentarios anteriores al tuyo escribiendo #(número de comentario) y al poner el ratón sobre ello, aparece una ventanita flotante con el comentario en cuestión. No sé si será posible, pero me parece muy interesante.

    Muchas gracias Oloman.

    ResponderEliminar
  6. Hola Nacho. Creo que he entendido lo que quieres y si no me equivoco, es esto: http://goo.gl/oXA7T.

    Sin embargo, creo que no vas a encontrar (al menos fácilmente) ningún sistema que te los agrupe y siempre se mostrarán por orden cronológico. Es decir, que prácticamente se trata de automatizar las menciones, pero si contestas al primero, tu comentario no se verá el segundo, sino el último.

    ResponderEliminar
  7. ¡Gracias por tu respuesta Oloman!

    No es exactamente lo que te decía (no me expliqué muy bien), pero no está mal tenerlo en cuenta. Lo único que me incomoda de ese "Reply To" es que te abre una nueva ventana emergente para comentar.

    A lo que yo me refería no era en sí al Reply To (que es muy buena idea, por cierto), sino al hecho de poder hacer referencia dentro de tu comentario a uno o más comentarios indicándolo con "#" más el número correspondiente de comentario. Además, una vez haces hover en el "#", el comentario de la persona a la que te refieres aparece en un cuadro en tu pantalla que desaparecerá en el mismo momento en el que vuelvas a mover el ratón hacia fuera del hover.

    Un ejemplo son los comentarios de Público, como éste: http://goo.gl/0d824. Verás que hace mención al comentario 1 y pasando el ratón sobre #1 puedes ver íntegro aquel comentario. Así te evitas ir hasta arriba para verlo. Es muy cómodo para posts con más de 10 comentarios y para no perder el hilo subiendo y bajando para ver qué se responden unos a otros.

    Supongo que es un tema complicado, pero creo que puede ser muy interesante para mucha gente.

    ¡Un saludo y muchas gracias por contestar!

    ResponderEliminar
  8. Bien Nacho, ahora lo entendí mejor. Es el sistema típico de foros, pero sigo sin poder ayudarte. El problema principal sería lo del mensaje emergente mostrando el texto del comentario "citado" y es que Blogger no nos permite insertar casi nada de código en los comentarios, apenas cursiva, negrita, enlaces...

    ResponderEliminar
  9. Gracias Oloman. Me lo temía, porque hay miles de tutoriales en Blogger y no aparece nada de lo que pido por internet. A ver si algún día se permite hacer más cosillas con los comentarios.

    Muchas gracias y un saludo Oloman.

    ResponderEliminar
  10. Hello Oloman
    I read this article.but i am unable to find that where should i put this code in my blog.
    Please tell me step by step that how to implement this code in blog.

    ResponderEliminar
  11. Celebsphotogallery my english is not so good for explaining step by step :(, but you only have to copy both piece of code into a gadget type HTML/Javascript. Nothin more...

    ResponderEliminar
  12. The first two pieces... sorry.

    ResponderEliminar
  13. Anónimo22/6/12 3:30

    Hola Oloman, disculpame, quisiera hacerte una pregunta, fijate que ya lo instale en mi sitio este gadget de twitter, pero lo único que me hace falta es que el gadget muestre mis retweets, pues por ejemplo yo le pongo a que muestre "6" tweets y entre los ultimos 6 tweets mios yo tengo dos retweets y entonces solo me muestra 4 tweets que son los que son hechos por mi, pero no muestra los retweets que yo hice, esos dos retweets, entonces esa es mi unica inquietud, es posible que este gadget muestre los retweets?

    Gracias Oloman, te agradezco y por-supuesto, no hace falta decirte que soy lector de tu blog y que Oloblogger es fantastico!

    Saludos desde Colombia!

    ResponderEliminar
    Respuestas
    1. Seguro al 100% no estoy, pero yo creo que sólo te muestra los tweets emitidos por tí y en ese sentido, no es lo mismo un retweet nativo, es decir, mediante el botón correspondiente de Twitter, que un tweet al que añades un RT. Este sistema sólo te mostrará los segundos.

      Eliminar
  14. Muchas gracias Oloman.
    Yo que soy un lerdo en esto, he seguido tus sencillísimos pasos y en un santiamén ya lo tengo en mi blog: http://www.fuenteprimaria.blogspot.com.es/

    Un sincero abrazo,
    @fuenteprimaria

    ResponderEliminar
  15. Hola, yo soy una "lerda" como el vecino de arriba. Estoy buscando un "algo" que me permita tener en mi blog (blogger) el Twitter tal y como lo leo yo, osea con todos los twitts de todas las personas a las que sigo. No me interesa tanto lo que diga yo sino lo que dicen los demás. Si existe no he sabido encontrarlo. Me puedes ayudar?
    Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Con este widget oficial de Twitter puedes mostrar todos los tweets de una determinada lista. No sé si tendrás alguna que pueda cubrir lo que necesitas, pero esta es la opción más fácil: widget para listas

      Eliminar
  16. Gracias Oloman. Es casi, casi lo que quería. La pega es que no muestra los retwitts de los otros, ni mis twits. De momento lo he puesto en el blog a la espera de que salga o encuentre exactamente lo que quiero.

    ResponderEliminar
    Respuestas
    1. Lo siento pero ese es el único sistema que conozco para hacer más o menos lo que quieres :(

      Eliminar
  17. disculpa por q no se ven los tweets, dejo de verse así nada mas.

    ResponderEliminar
    Respuestas
    1. ¿Disculpar? Al contrario; gracias por avisar.

      He comprobado que varios gadgets de Twitter han dejado de funcionar por lo que se ve que han cambiado algo en su API. A ver si encuentro otro sistema.

      Eliminar