FanBox para Twitter que muestra los seguidores con efecto deslizante

7 de febrero de 2011 73 comentarios ,
AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.


Aunque hace unos meses vimos cómo agregar un fanbox de Twitter usando un script bastante sencillo y útil, ahora veremos cómo hacer lo mismo, es decir, veremos cómo mostrar los seguidores de Twitter pero usando jQuery, el cual le añade un efecto deslizante a las imágenes de los seguidores de Twitter haciendo que el gadget se vea mucho más atractivo.


Para no complicarnos con el procedimiento vamos a agregar todo dentro de un gadget para así ahorrarnos un poco de tiempo.
Sólo entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, ahí pega este código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#friends').twitterFriends({
debug:1
,username:'usuario'
,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ SEGUIDORES!</h2>'
,friends:0
,user_animate:'width'
,users:40
,users_max:100
,loop:1
,user_image:36
});
});
</script>

<div style="width:100%">
<div id="friends"></div>
</div>

<style>
div.twitter-friends{}
div.tf-header{
border:silver 1px solid;
overflow:hidden;
margin:0 0 1px 0;
background-color:#0B243B; /* Color de fondo del título */
}
div.tf-header img{
margin:1px;
float:left;
width:36px;
height:36px;
border:0;
}
div.tf-header h2{
line-height:32px;
font-weight:bolder;
display:block;
margin:3px;
padding-left:5px;
float:left;
font-size:14px;
letter-spacing:.1em ;
color:#FFF; /* Color del texto */
}
div.tf-users{
height:180px; /* Alto del gadget */
border:silver 1px solid;
overflow:hidden;
background-color:#eaeaea; /* Color de fondo del gadget */
}
div.tf-users a{
display:block;
float:left;
}
div.tf-users img{ }
div.tf-info{
text-align:right;
display:none;
}
</style>

Ahora veamos la cuestión de personalizar el gadget.

usuario es tu nombre de usuario de Twitter sin el @
friends:0 con el valor en 0 muestra a tus seguidores, con el valor en 1 muestra a quienes tú sigues.
user_animate:'width' es el efecto con el que aparecen los avatares; los efectos que se pueden usar son width, height, opacity
users:40 es el número de seguidores a mostrar en cada aparición.
users_max:100 es el máximo total de seguidores a mostrar.
loop:1 indica si se vuelven a mostrar los seguidores, para que sólo se muestren una vez se cambia a 0
user_image:36 es el ancho y alto de los avatares

El gadget ocupará el 100% del contenedor donde se coloque, si se le quiere dar un ancho específico se cambia el 100% que está en negrita por un valor en pixeles, por ejemplo 290px
Ten en cuenta que dependiendo del ancho y alto del gadget es el número de seguidores que debes mostrar, y de igual debes cambiar la medida de los avatares para que se ajuste al ancho de tu gadget.

En color verde he puesto las anotaciones sobre los colores y otras áreas que se pueden personalizar.

Aunque se puede manipular el número de seguidores que se mostrarán, el gadget sólo muestra los últimos 100 que te siguen en Twitter. O sea que puedes cambiar ese dato por un número menor a 100 pero no mayor a él.

Y recuerda que, funciona con jQuery así que si tienes Scriptaculous, Prototype o Mootools no funcionará.
Y también que, si ya tienes la versión 1.4.2 de jQuery entonces no será necesario agregar la primera línea del código.

NOTA: Los avatares tienen el enlace al perfil de Twitter de los seguidores, en mi ejemplo no funciona porque lo he puesto en un iframe.


Vía | More Tech Tips


73 comentarios en:

" FanBox para Twitter que muestra los seguidores con efecto deslizante "

  1. Increíble! esta a todo dar! Muchas gracias por el aporte! :D un saludazoO!

    ResponderEliminar
  2. lizeth-, no, Facebook no acepta scripts en sus páginas :/

    ResponderEliminar
  3. Potro querido! Como andamos? Un toque de JQuery y quedo buenisimo!!!

    De paso me encontre hasta con nuevo diseño a la Ciudad, tambien quedo muy bueno y la barra excelente, ahora es mas claro para buscar... te felicito.

    Un abrazo

    ResponderEliminar
  4. Gracias Francisco, qué gusto que te haya gustado el cambio y que te sientas a gusto con él.
    Otro abrazo para ti ;)

    ResponderEliminar
  5. No se si me podrás ayudar, yo te ofrezco publicidad o lo que quieras en lo que yo te pueda servir. Te cuento; tengo un blog de tele y quiero cambiar la plantilla, pero no se adaptarla bien, porque es de las "complicadas". El blog es www.queridatele.blogspot.com y una de las plantillas que estoy barajando es una llamada "NewZine". Te estaría MUY agradecido. Espero respuesta.

    ResponderEliminar
  6. hola potro como as echo de donar via paypal

    ResponderEliminar
  7. Adicto tv, si la plantilla te da mucho problema lo mejor es buscar otra con la que sí puedas trabajar, total, hay miles de plantillas en la red que se pueden instalar en Blogger.


    Pokelevel, en PayPal hay una sección en la que puedes crear botones.

    ResponderEliminar
  8. No, nada es un cambio radical, creia que era otra persona haciéndose pasar por ti, me había acostumbrado al anterior XD
    Supongo que plantilla nueva, icono nuevo! :D

    ResponderEliminar
  9. no logro conseguir que funcione en mi blog potro, sera por el tipo de platilla ??

    mir ami pagina (=

    http://chistesdetalcual.blogspot.com/

    ResponderEliminar
  10. A no potro ya solucionado, es por lo del prototype :D

    ResponderEliminar
  11. Drawer 4 Everyone, jajaja sí, este mes es un mes de cambios, pero a ver cuánto me dura el gusto, pues ya me conozco y en menos de 3 meses querré cambiar nuevamente de plantilla y de avatar :P


    dministradoresTyB, eso me imaginé ;)

    ResponderEliminar
  12. Hola potro pasando otra vez poraquie me gusta este gran aporte ,tengo una duda sobre los seguidores pero de blogger ,pues puse ese gadget en la sisebar de mi blog,pero ¿Como puedo ponerle las letras y enlaces en blancos? porque si ves no se ven las letras ni enlaces en dichos gadgets ,intendo con las id de los widgets editarlo pero como no surgio efecto descarte ese punto ,pero debe de haber otromodo ..porfavor espero que puedas ayudarme ,mi ejemplo fue asi
    #followers1{color:#fff;}
    .followers1 a:link,a:visited{color:#fff;}
    Saludos y gracias :-)

    ResponderEliminar
  13. El gadget de seguidores no se puede modificar tanto como los demás gadgets. Pero para los colores de los enlaces como deseas es más simple el proceso.
    Sólo dale click en Editar al gadget, desmarca la casilla 'Utilizar estilos predeterminados de plantilla' y aparecerán los colores de los links, textos y demás. Ahí puedes cambiar los colores a tu antojo ;)

    ResponderEliminar
  14. Estaré haciendo esto pronto en mi Blog, pero quiero preguntarte una cosa que vi entre los BLOGS que sigo, y es Wordpress, sí no me equivoco, pero pregunto:

    Este Blog: http://www.corpsekeeper.net tiene esa introducción, como para elegir entre Fotografía, Múisca y Escritos como modo principal.

    Me gustaría saber sí con Blogger se puede hacer algo así pero pongo algo que sea Escritos y me sale como un menú y salen los TAGS: Cuentos, Poesías, Composiciones, etc. O cuando pongo Fotografía, que sea uno solo. O poner un link de mi Delicious, donde puedan ver las últimas actualizaciones, por ejemplo...

    ResponderEliminar
  15. Hola Potro cuanto tiempo, quería preguntarte si sabes por qué el color del texto "X SEGUIDORES" me sale con un color que lo envuelve. He probado el código fuera del blog y funciona perfectamente, no aparece ese color. El caso es que he leído el comentario de más arriba en el que dices que a lo mejor desactivando la opción de utilizar estilos predeterminados de plantilla tal vez salga correctamente, exactamente como lo he configurado que es como quisiera verlo. Si sabes algo al respecto...

    Por cierto, aprovecho para decirte que un acierto el nuevo diseño del blog. Saludos y gracias!

    ResponderEliminar
  16. Hola Onalem!,

    Sí, sí se puede hacer un intro como ese. Te dejo un enlace de Oloblogger que explica cómo hacerlo:
    http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html

    El resto de los elementos que quieres que se muestren cuando estás en determinada sección puedes hacerlo usando condicionales.

    ResponderEliminar
  17. Hola Joker,

    ¿Te refieres al gadget de Seguidores de Blogger?
    Si es así entonces quizá hay algún estilo en tu plantilla que le está dando ese aspecto al texto.
    Necesitaría ver el blog donde lo tienes para echarle un vistazo a la plantilla y ver si puede ser ese el problema.

    Saludos y qué bueno que te ha gustado el diseño :)

    ResponderEliminar
  18. Hola de nuevo Potro, me refería a este gadget en cuestión, te dejo mi blog para que le eches un vistazo cuando puedas: http://fringefilia.blogspot.com/

    En la rsidebar está justo debajo del fan box de facebook. Gracias por tan pronta respuesta!

    ResponderEliminar
  19. Solucionado! añadí la propiedad background-color debajo del color del texto. Ahora ya aparece como quiero. Gracias como siempre Potro!

    ResponderEliminar
  20. Vale, qué bueno que ya lo has resuelto :)

    ResponderEliminar
  21. Hola
    Gracias por todo, El Potro
    Pero, que mi seguidores siguem en la vertical...y no como tuyo, que és en la horizontal.
    Ayudame?
    *En Pérolas Esparsas Blog, un ejemplo que hizo de teste.(no hablo espanhol, soy de Brasil...)

    ResponderEliminar
  22. Hola Vera,

    Busca esta parte del código y agrega lo que está en negrita:

    div.tf-users a{
    display:block;
    float:left;
    width:36px !important;
    height:36px !important;
    padding:0 !important;

    }

    Saludos hasta Brasil.

    ResponderEliminar
  23. Hola Potro,
    Te queria hacer una pregunta... En mi blog todavia no tengo ningun seguidor como en tu blog, donde aparece la palabra: Seguir y luego la foto en pequeñito de un monton de gente..
    Como se hace eso?>.. Puedo incluir a gente aunque no tengan blogs?. Yo solo conozco gente que tiene emails, muy pocos tienen blogs!.
    Un saluod y Muchas gracias..
    PD: De momento no quiero enlaces de seguidores a Twitter, Facebook y esas redes sociales..
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  24. Hola Jose,

    Ese es el gadget de seguidores, para ponerlo sólo entra en Diseño > Elementos de la página > Añadir un gadget y ahí selecciona Seguidores.
    Ya una vez puesto los que tengan una cuenta de Google podrán darle click a ese botón para seguirte, pero es únicamente para quienes tienen cuenta de Google y que deciden seguirte.

    Saludos.

    ResponderEliminar
  25. Hola Potro, que hay que hacer, si se puede, para que los seguidores de twitter queden fijos y no se muevan? y en lo referente a los seguidores de blogger solo me aparecen dos líneas de seguidores y el texto de abajo no aparece, cuanto y donde debo ensancharle 0ara que se vea como le dan ellos o le tienes tú?

    ResponderEliminar
  26. Quizá sea más conveniente que uses el FanBox de Twitter.
    En cuanto a lo de los seguidores de Blogger no me ha quedado muy claro pues necesitaría ver dónde lo has puesto, ya que ningún gadget de seguidores de Blogger muestra el nombre de los lectores debajo de su avatar. Quizá lo estás confundiendo con el FanBox de Facebook.

    ResponderEliminar
  27. El de twitter le he quitado porque se me ha colado una fulana o estúpida. Y en lo refernte al de Blogger le he vuelto a poner para que le veas en el blog. En facebook no tengo seguidores porque no me interesan. bueno por ahí andan 44 pero a decir verdad no son de esa red social.

    Cuando veas el gadget me dices los cambios para que se vean las 4 o cinco filas de seguidores tal como aparecen cuando aññades el referido gadget de Blogger.

    te he cogido la flecha-triángulo de "ir abajo".

    ResponderEliminar
  28. Pues yo no veo dos líneas de seguidores sino 7 columnas y 8 filas de seguidores, lo he visto en Mozilla Firefox, Chrome, Safari, Opera, e IE y en todos se ven esa cantidad de seguidores. Por lo que si sólo ves una cantidad menor a esa entonces seguro se trata de un problema de tu navegador o la carga de tu blog.

    ResponderEliminar
  29. Es lo mas probable porque los seguidores que da blogger en otos ordenadores se ven perfectamente todos.

    ResponderEliminar
  30. Tenias razón, He instalado el explores 8, porque tenia el 7 y ahí hay un monton de seguidores.

    ResponderEliminar
  31. Algo paso por que ya no funciona ¿? ni siquiera yçtu ejemplo fumciona sabes por que ?

    ResponderEliminar
  32. Probablemente está fallando el sitio que provee el gadget, habrá que esperar a que el autor lo reestablezca.

    ResponderEliminar
  33. hoo que mal cuando vi tu pagina y vi que tampoco funcionaba pense en el script, pero bueno muchas gracias.

    ResponderEliminar
  34. Hola Potro, esta opción me gusta mucho más que la de fan box, pero me gustaría que los avatares de mis seguidores se quedasen fijos.
    ¿Conoces la forma de hacerlo?

    ¡Muchas gracias!

    ResponderEliminar
  35. Hola Vindi,

    Hay un método sin efectos que igual muestra tus seguidores de Twitter:
    http://ciudadblogger.com/2010/11/agregar-un-fan-box-de-twitter.html

    ¡Saludos!

    ResponderEliminar
  36. Si, también lo probé gracias a ti, pero no se puede personalizar el color del gadget, por eso me ha gustado más esta opción, que la puedo personalizar al negro del fondo de mi blog.
    De ahí mi duda de si podría haber alguna forma de dejar los avatares fijos.
    Un saludo genio.

    ResponderEliminar
  37. Me temo que no, al menos en la página del desarrollador no da opciones de dejarlo estático, sólo de cambiar los efectos que son los mismos que menciono en la entrada.

    Saludos.

    ResponderEliminar
  38. Bueno, no pasa nada, al menos lo hemos intentado ;)

    Muchísimas gracias por todo Potro.

    Un gran abrazo desde el norte de España.

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

    ResponderEliminar
  40. Un gran favor, uso la plantilla Music Nation Blogger que trae 5 imágenes deslizantes debajo del Home. Acabo de instalar este gadget -mostrar seguidores de twitter- y ya no tengo las 5 imágenes, se me quedó congelada en la primera...!!! que puedo hacer??? HELP SOS...!!!
    http://labohemianoche.blogspot.com

    ResponderEliminar
  41. Si retiro este gadget de seguidores con efecto deslizante y agrego uno fijo, recuperaré el efecto deslizante de mis 5 imágenes que tenía debajo del home...???

    ResponderEliminar
  42. Hola Mae Reyna,

    Lo que sucede es que el slider de fotos que tienes requiere de un script que se llama Mootools. Ese script no es compatible con jQuery, el que se usa para este método.
    Sin embargo, hay un hack que permite usar esos dos scripts al mismo tiempo:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  43. El potro muchisimas gracias por este script, me funciona genial
    Atte
    Roberto Galarza R.
    http://japonesparatodos.blogspot.com

    ResponderEliminar
  44. Hola Potro!

    Tengo un acordeón puesto en mi blog con JQuery.
    Al poner este gadget, si pongo la linea de código de JQuery en el gadget, el acordeon no me funciona. Pero si le quito la linea al gadget, el gadget no funciona pero el acordeon si.

    AYUDAME Porfavor.

    Mi blog es: www.mariavalverdefansclub.com

    Un saludo campeón!

    ResponderEliminar
  45. Hola LorkDesigns,

    Algunos gadgets requieren de versiones específicas de jQuery para poder funcionar. Si ya probaste ambos con la última versión de jQuery y no funcionan al mismo tiempo entonces me temo que tendrás que elegir entre uno de los dos:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    Saludos.

    ResponderEliminar
  46. que tal hermano una pregunta se puede utilizar este fanbox para hacer que muestre una lista y no un usuario de twitter?

    un saludote y gracias

    ResponderEliminar
  47. No que yo sepa, al menos en la página del plugin no hay mención sobre ello.

    ResponderEliminar
  48. Hola potro queria saver si con facebook hay otra forma de ahcerlo como dijiste que facebook no acepta scripts que se puede hacer en ese caso?

    ResponderEliminar
    Respuestas
    1. Pues no, para Facebook todavía no hay un modo, habrá que seguir esperando a que alguien encuentre un modo porque a mí no se me ocurre cómo :/

      Eliminar
  49. Potro no me respodiste a mi pregunta, ya que mi blog sigue presentando fallas realmente desastrozas

    Cuando Blogger actualizo, esa opcion de "responder" a cada comentario paso lo siguiente:

    1-los comentarios no estan espaciados

    2-se perdieron los enlaces de "entadas mas recientes o entradas mas antiguas", SI aparece la barra en el blog, en la hoja Principal, solo se puede ir avanzando con "CARGAR MAS" pero es LENTISIMO, pero al pasar a las entradas no esta y es importante ya que por cada hoja que contiene casi 200 comentarios, ayuda por favor!!!

    3-crees que se podria "PAGINAR" mi blog ya que seria lo mas ideal ya que no suele contener widgets, es practicamente texto.

    AYUDAAA!

    ResponderEliminar
    Respuestas
    1. Hola Mario,
      No sé cuál pregunta dices que no te respondí ya que no veo algún otro comentario tuyo en esta entrada.
      Mira la última entrada publicada, ahí verás un enlace a Oloblogger donde habla sobre los estilos de los comentarios, de hecho él ha estado publicando varias entradas sobre ese tema.
      La paginación de los comentarios no está funcionando por el momento, sin embargo, si ya tienes los nuevos comentarios anidados esos enlaces ya no aparecerán más.

      El gadget de paginación es opcional, eso depende de cada quien, yo no podría decirte si es bueno que lo uses o no, es cuestión de tú veas qué tan necesario te es.

      Saludos.

      Eliminar
    2. Gracias Potro, quiero entender que lo de la "paginacion" de los comentarios es para todos los blogs, aunque he visto otros blogs que estan funcionando bien, de todos modos gracias.

      Eliminar
    3. Pues yo no he visto ni un sólo blog al que le funcione la paginación en los comentarios, a menos que ya esté resuelto para todos. En mi caso esa fue la razón para agregar los comentarios anidados, porque no se podía acceder a los comentarios antiguos.

      Eliminar
  50. Potro disculpa si te hice la pregunta en esta entrada, pero no se bien donde ir posteando con orde, gracias.

    ResponderEliminar
  51. quizas no expuse bien la pregunta, aparece la barra de "entradas mas recientes - pagina principal - antiguas" unicamente funciona para las "entradas" mas no para avanzar los comentarios, no funciona.

    ResponderEliminar
  52. Saludos, al probarlo me altera la plantilla, algún consejo...gracias

    ResponderEliminar
    Respuestas
    1. ¿En qué manera te altera la plantilla? ¿En cuál blog lo has puesto?

      Eliminar
  53. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  54. Hola "El Potro", lo estoy intentando poner en la edición HTML de blogger, pero no se donde colocarlo para que me funcione, ¿alguien me podria dar una solución?

    ResponderEliminar
    Respuestas
    1. Hola Pol Galea, poniéndolo en un gadget te será menos complicado, porque aun cuando pongas una parte en la Edición HTML tendrás que poner de todas maneras una parte en un gadget.

      Eliminar
  55. Hola Potro ya hice tolo lo que indicas pero sigo con el problema. Muchas gracias por tus consejos mi blog es este www.movytech.com

    ResponderEliminar
    Respuestas
    1. Hola movytech Cine, no he comprendido, ¿cuál es el problema que tienes? es que no veo algún otro comentario tuyo en esta entrada.

      Eliminar
  56. Hola Potro, he colocado todas las formas de Fanbox para Twitter y no me funcionan, he cambiado las versiones de jquery en la plantilla y tampoco, será que me podrás ayudar con esto, igual me sucede con la FB, no se que está pasando.
    Iván de emprendernegociosmultinivel.blogspot.com

    ResponderEliminar
    Respuestas
    1. Por ahora parece que ninguna opción funciona Iván :(

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger