JMiur [E]

Twitter friends widget es un script para jQuery que muestra los avatares de los seguidores de manera rotativa, con un efecto de animación y eentualmente, sus tweets.

El script, lo podemos descargar desde Google Code o lo enlazamos directamente:
<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
Luego, llamamos a la función, lo más simple es de este modo:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#friends').twitterFriends({
username:'NOMBRE_USUARIO'
});
//]]>
</script>
donde sólo debemos cambiar NOMBRE_USUARIO por el nuestro.

Por último, donde querramos mostrar el widget, simplemente colocamos un DIV así:
<div id="friends"></div>
Y eso es todo.


Por supuesto, hay una serie de opciones que podemos incorporar y la lista completa está disponible acá. Por ejemplo:

friends define si mostraremos a nuestros seguidores (0) o a quienes nosotros seguimos (1)
users indica la cantidad de imágenes (20 por defecto)
user_image indica el tamaño de las imágenes (48 por defecto)
user_animate define el tipo de animación ('width', 'height', 'opacity')
info con un texto vacio permite eliminar el enlace al widget

Todos ellos, los agregamos separándolos por comas:
$('#friends').twitterFriends({ 
info:"",
user_animate:'width',
users:50,
user_image:32,
username:'NOMBRE_USUARIO'
});

Un poco de CSS permite personalizar el widget:

div.tf-users { /* este es el rectángulo donde se mostrará */
overflow: hidden;
/* podemos establecer su ancho y alto */
}
div.tf-users a { /* las imágenes de los avatares */
display: block;
float: left;
}
div.tf-users img { ....... }

/* cada uno de los tweets */
div.tf-tweet { ....... }
div.tf-tweet li { ....... }

/* el autor */
div.tf-tweet span.tf-avatar { ....... }
div.tf-tweet strong a { ....... }

/* el contenido de los tweets */
div.tf-tweet span.tf-body { ....... }
div.tf-tweet span.tf-content { ....... }
div.tf-tweet span.tf-meta { ....... }
div.tf-tweet span.tf-meta a { ....... }
div.tf-tweet span.tf-meta a:hover { ....... }
div.tf-tweet a.tf-date { ....... }
div.tf-tweet a.tf-source { ....... }
div.tf-tweet a.tf-link { ....... }
div.tf-tweet a.tf-at { ....... }
div.tf-tweet a.tf-hashtag { ....... }

/* información exta */
div.tf-info { ....... }
div.tf-info a { ....... }

5 comentarios:

CHiCken  

Superbuenisimo... lastima que no uso mucho el twitter :D

Responder
Variopinto  

Yo publiqué uno similar: http://www.elblogvariopinto.com.ar/2010/03/widget-seguidores-twitter.html

Responder
Graciela  

Mira qué bonito si fuera para poner los blogs de los peques, tendré que hablar con Scriptaculus :)

Responder
JMiur  

CHiCken:
De todas maneras, es divertido :D

Variopinto:
No, ni parecido. Se nota que no has probado lo que has publicado proque ese que mencionas, requiere el uso de PHP cosa que Blogger no dispone ;)

Graciela:
Habrá que hablar con esa gente a ver si se ponen las pilas :D

Responder
Salud Practica  

muy buena idea y muy practico, Lo pondremos!. Si os interesa la salud "Practica", seguidnos!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR