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 = "";
    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);
  })
});

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

…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!

noviembre 28, 2009

Iñaki Huerta

jquery, programacion

jquery plugins, tutoriales, twitter

16 respuestas a “Insertar twitter en tu web con jquery”

jorge oliver dice:

2010-10-13 a las 09:18

me gusto mucho, es sencillo y facil de adaptar.

Responder
David Rodriguez dice:

2010-11-15 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!!!!

Responder
Arturo dice:

2011-01-31 a las 09: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$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);

})
});

Responder
Javier dice:

2011-02-28 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

Responder
- ikhuerta dice:
  
  2011-03-01 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.
  
  Responder
Grteibo dice:

2011-03-07 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.

Responder
ikhuerta dice:

2011-03-09 a las 11:50

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

Responder
Grteibo dice:

2011-03-09 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.

Responder
Diego dice:

2011-04-01 a las 02:53

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

Responder
Javier dice:

2011-09-07 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!

Responder
Ángel dice:

2011-10-18 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.

Responder
ángel dice:

2012-09-20 a las 20:44

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.

Responder
- ikhuerta dice:
  
  2012-10-05 a las 09:44
  
  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.
  
  Responder
ángel dice:

2012-10-08 a las 17:06

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

Responder
Claudio dice:

2012-10-30 a las 20:31

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

Responder
- ikhuerta dice:
  
  2012-11-02 a las 18:12
  
  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)
  
  Responder

Ikhuerta | El blog de Iñaki Huerta

Insertar twitter en tu web con jquery

16 respuestas a “Insertar twitter en tu web con jquery”

Deja una respuesta Cancelar la respuesta