Insertar twitter en tu web con jquery

$(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://twitter.com/status/user_timeline/"+twitterUser+".json?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);
  })
});

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

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 */}

¿Te gustó este post? Puedes seguir sus comentarios mediante RSS, o realizar trackball desde tu blog.

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

1. Guia para Community Managers en Twitter dice:

   28 Julio 2010 a las 7:48

   [...] visibilidad de la cuenta y no solo links. Por otro, demos acceso a nuestra cuenta de twitter y mostremos nuestros últimos tweets, así podremos avanzar al momento en el que el usuario decide si nos sigue o no antes incluso de [...]
2. jorge oliver dice:

   13 Octubre 2010 a las 9:18

   me gusto mucho, es sencillo y facil de adaptar.
3. David Rodriguez dice:

   15 Noviembre 2010 a las 15:21

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

   Muy buen script!!!!
4. Arturo dice:

   31 Enero 2011 a las 9:58

   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 {

   if (json[i].in_reply_to_screen_name==null)
   {
   html += "" + json[i].text.replace(urlregex,"$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);

   })
   });
5. Javier dice:

   28 Febrero 2011 a las 23:58

   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
6. ikhuerta dice:

   1 Marzo 2011 a las 19:48

   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.
7. Grteibo dice:

   7 Marzo 2011 a las 14:46

   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.
8. ikhuerta dice:

   9 Marzo 2011 a las 11:50

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

   9 Marzo 2011 a las 13:32

   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.
10. Diego dice:

    1 Abril 2011 a las 2:53

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

    7 Septiembre 2011 a las 22:55

    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!
12. Ángel dice:

    18 Octubre 2011 a las 10:13

    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.