Do not speak Spanish? Read this post in English.

Sábado, 28 d noviembre d 2009.

Insertar twitter en tu web con jquery

Poco a poco, ya que el tiempo no me da para más, estoy haciendo un nuevo diseño para este blog. Una de las cosas que quiero añadir es mi hilo de twitter pero haciéndolo a mi manera...

Por suerte Twitter en su API te da la posibilidad de cargar sus contenidos con jsonp, un formato que nos permite cargar las cosas con ajax cross-domain. Las ventajas de cargar así tus tweets son claras:

- El contenido no está realmente en tu web, con lo que hay menos links en el html hacia páginas externas. Eso nos ahorra algún problemilla en SEO, ya que los plugins de twitter integrados en wordpress (por ejemplo) no suelen añadir el nofollow a todos los links.

- El proceso de petición de tu feed lo hace el navegador de cada usuario que entra a tu web, con lo que aliviamos de carga un poco a nuestro servidor.

El problema es que como no me gustaba ninguno de los plugins de jquery que he visto, he tenido que fabricarme un script con jquery desde cero. Pero bueno, ha sido más rápido de lo que esperaba y ya lo tengo listo. Lo dejo aquí tanto como apunte de cara al futuro como para que cualquiera que trabaje un poco en desarrollo web pueda tomarlo como partida de su propia integración de twitter vía jquery. El código no está muy comentado pero no va a ser difcil para nadie que entienda un poco de jquery como adaptar el código a su gusto.

15/10/2012, Se ha actualizado la url donde se consultan los tweets. Las antiguas han dejado de funcionar y ahora se usa la api REST 1.0 (la 1.1 requería de Oauth: demasiado complejo para un script tan simple)
$(document).ready(function(){
  // de que usuario es el feed?
  var twitterUser = "ikhuerta";
  // cuantos tweets hay que mostrar?
  var tweets = 5;
  // lanzamos la llamada ajax cross-domain...
  $.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+twitterUser+"&count=" + (tweets*2) +"&callback=?",function(json){
    html = "<ul class='myTweets'>";
    var urlregex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
    var userregex = /(\@([-A-Z0-9+&\/%?=~_|!:,.;]*))/gi;
    var hashtagregex = /(\#([-A-Z0-9+&\/%?=~_|!:,.;]*))/gi;
    var count = 0;
    for (i=0;i<json.length;i++)
    {
      if (json[i].in_reply_to_screen_name==null)
      {
        html += "<li><p class='text'>" + json[i].text.replace(urlregex,"<a class='url' href='$1' rel='nofollow'>$1</a>").replace(userregex,"<a class='user' href='http://twitter.com/$2' rel='nofollow'>$1</a>").replace(hashtagregex,"<a class='hashtag' href='http://twitter.com/#search?q=$1' rel='nofollow'>$1</a>") + "</p>";
        html += "<p><a class='rt' href='http://twitter.com/home?status=RT @"+twitterUser+" "+json[i].text+"' rel='nofollow'>[ReTweet]</a> ";
        html += "<a class='reply' href='http://twitter.com/home?status=@"+twitterUser+" &amp;in_reply_to_status_id=" + json[i].id + "&amp;in_reply_to="+twitterUser+"' rel='nofollow'>[Responder]</a></p></li>";
        count++;
      }
      if (count >= tweets) break;
    }
    html += "</ul>";
    // incluimos el html dentro del div myTwitter
    $("#myTwitter").append(html);
  })
});

Esto incluirá una etiqueta "ul" con clase "myTweets" dentro del div con id "myTwitter". Así que simplemente tendremos que incluir...

<div id="myTwitter"></div>

...en alguna parte de nuestra página para ver dentro nuestros Feeds.

De cara al css dispondremos de las siguientes reglas que podemos definir para darle el estilo que queramos a los tweets:

ul.myTweets {/* Estilo del bloque */}
ul.myTweets li {/* Estilo de cada elemento*/}
ul.myTweets li p.text {/* Estilo del text del tweet*/}
ul.myTweets li p.text a.ulr {/* Estilo de los links dentro del tweet*/}
ul.myTweets li p.text a.user {/* Estilo los links hacia usuarios (@) dentro del tweet*/}
ul.myTweets li p.text a.hashtag {/* Estilo los links hacia hashtags (#) dentro del tweet*/}
ul.myTweets li a.rt {/* Estilo del link para retweetear*/}
ul.myTweets li a.reply {/* Estilo del link para responder */}

Espero que en breve podáis verlo en funcionamiento en este mismo blog.

Saludos!

Temas Relacionados: jquery programacion tutoriales

Autor:

16 Comentarios para “Insertar twitter en tu web con jquery”

  1. jorge oliver dice:

    me gusto mucho, es sencillo y facil de adaptar.

  2. Donde se concatena la cadena html, hay que cambiar "rt" y "reply" por comillas simples, para que no rompa la cadena.

    Muy buen script!!!!

  3. Arturo dice:

    Muy buen script, solo tiene una pequeña falla con unas comillas dobles al llamar la clase de RT y Reply

    $(document).ready(function(){
    // de que usuario es el feed?
    var twitterUser = "aalee";
    // cuantos tweets hay que mostrar?
    var tweets = 5;
    // lanzamos la llamada ajax cross-domain...

    $.getJSON("http://twitter.com/status/user_timeline/"+twitterUser+".json?count=" + (tweets*2) +"&callback=?",function(json){

    html = "";
    var urlregex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
    var userregex = /(\@([-A-Z0-9+&\/%?=~_|!:,.;]*))/gi;
    var hashtagregex = /(\#([-A-Z0-9+&\/%?=~_|!:,.;]*))/gi;
    var count = 0;

    for (i=0;i$1").replace(userregex,"$1").replace(hashtagregex,"$1") + "";
    html += "[ReTweet] ";
    html += "[Responder]";
    count++;
    }
    if (count >= tweets) break;

    }
    html += "";
    // incluimos el html dentro del div myTwitter
    $("#myTwitter").append(html);

    })
    });

  4. Javier dice:

    Un saludo.

    Se que llego algo tarde pero me gusta mucho la forma en que se puede conseguir que se vea los "tuits"... solo que (obviamente no soy un experto) no soy capaz de averiguar cómo, o dónde, debe insertarse el código en mi WordPress.

    Es un WordPress alojado en servidor, no en WP.com.

    ¿Eres tan amable (o cualquier experto) de indicarme?

    Gracias anticipadas.

    Javier

    • ikhuerta dice:

      Si realmente no tienes nociones ni de HTML ni de javascript lo mejor será que incluyas directamente uno de los widgets de reiteres. Miralo directamente en tu cuenta de twitter. Este post es para hacer una integración un poco mas avanzada.

  5. Grteibo dice:

    Buenas, una consulta como aumentas el tiempo de duración de cada tweet? por ej. si ahora esta en 3 seg cada uno q pase a estar 5 seg cada uno.

  6. ikhuerta dice:

    Esa pregunta no tiene demasiado sentido Grteibo... los tweets aparecen cuando son publicados y ya está...

  7. Grteibo dice:

    Me refiero a que los tweets van pasando muy rapido y no dan tiempo a leerlo, mi pregunta es si se puede retrasar ese tiempo que permanece cada uno antes de cambiar al otro.

  8. Diego dice:

    Muchas gracias! Una excelente técnica, yo la he combinado con jCarousel para darle un mejor efecto y esta de maravilla :-)

  9. Javier dice:

    Hola, muy interesante este script, funciona de maravilla, sólo q en IE no funca (maldito IE), podrías darme una mano para ver a q se debe el problema. Gracias y felicitaciones!

  10. Ángel dice:

    Hola! Gracias por el aporte, pero necesito algo parecido.
    La cuestion es insertar en mi página un pequeño div donde se muestren los tres últimos tweets que contengan cierta palabra.
    ¿Por dónde empiezo?
    Muchas gracias.

  11. ángel dice:

    Hola Ikhuerta.
    Antes de nada agradecerte la claridad de tu exposición. He visto otros códigos por ahí y ya me gustaría que fuesen tan claros como este.
    Soy nuevo en esto del javascript y tengo una duda al respecto del código.
    Me he percatado que al escribir un tweet, en mi página html5 no se actualiza ni pasado 3 minutos. Me gustaría saber si hay alguna manera de poder incluir la opción de refresh el div o la function...
    De esta manera cuando haga público algún tweet se actualice en mi web haciendola algo más dinámica de lo que llega a ser.

    Gracias por tu aporte.
    Saludos cordiales.

    • ikhuerta dice:

      Este código no realiza estas actualizaciones. Para eso habría que añadir un setInterval que fuese haciendo el bucle de peticiones. Además seguramente querras una animación que mueva los tweets y eso es más complejo (más código). Puestos a hacer eso yo miraría otros plugins que hay por la red o directametne el widget de twitter que puedes generarlo para tu web sin problemas y ya se comporta de esa forma.

  12. ángel dice:

    Gracias por responder :)
    Comprendo lo que me dices. He intentado hacerlo desde los widget de twitter, pero por mi gran desconocimiento no consigo colocar bien el script y solo me da un enlace donde me redireccionana a la web de twitter con el widget...

    Otra consulta al respecto del código que has publicado, es si cabe la posibilidad de poder mostrar un hashtags en vez de un usuario, es decir, el visualizar un tema de conversación como por ejemplo #buenasnoches.

    Seguramente el que lea esto pensará que menudo necio, pero como no tengo ni idea de programación porque no es mi campo profesional, pues siempre viene bien una ayudita... :).

    Por lo demás nuevamente agradecer tu tiempo que me prestas.
    Un saludo

  13. Claudio dice:

    Muy buen ejemplo!!!
    Solo una aclaración o comentario, en la parte de hashtagregex el link que genera lo hace con el # y en la busqueda del twitter no funciona ya que te pide %23. Osea el $1 debería eliminar su primer caracter. Me equivoco?.

    Gracias

    • ikhuerta dice:

      Buenas Claudio,

      desde luego puedes cambiarlo para recoger solo la palabra y no solo el hashtag pero te garantizo que si tienes cuidado con la codificación de la página y del javascript (ambos utf-8) la consulta se hace perfectamente (eso si, solo busca hashtags no la búsqueda completa)

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title