JMiur [E]

Twitter Follow Box es un plugin para jQuery que nos permite agregar un gadget de Twitter que copia el estilo del plugin Lilke Box de Facebook. Es fácil de integrar a cualquier sitio y posee varias opciones que permiten adaptarlo a nuestros gustos personales.

Descargamos el ZIP que ofrecen en al página de los desarrolladores y allí nos encontraremos con cuatro archivos:

followbox.css son las reglas de estilo; podemos copiar su contenido y agregarlo en la plantilla o un elemento elemento HTML colocándolo entre etiquetas <style> y </style>; obviamente, podemos modificarlo aunque así como está, funcionará perfectamente

jquery.followbox.js es el plugin en si mismo, podemos usar ese archivo o su versión minimizada llamada jquery.followbox.min.js; cualquier a de ellos, lo alojamos en un servidor externo o lo agregamos antes de </head>, copiando y pegando el contenido del archivo:
<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo ...
//]]>
</script>
Por último, deberíamos cambiar la URL de un pequeño ícono que se utiliza en el gadget; la imagen llamada icon_twitter.png que alojamos donde nos plazca y luego, buscamos esto en el script:
var d="followbox/icon_twitter.png";
y lo cambiamos por la dirección URL de nuestra imagen.
var d="http://mi_imagen.png";
Con eso, ya estamos listos para mostrarlo donde se nos ocurra. Por ejemplo, si agregamos un elemento HTML en la sidear, allí, escribimos lo siguiente:
<div id="MIfollowbox"></div>
<script>
  $('#MIfollowbox').followbox({
    'user' : 'NOMBRE_USUARIO'
  });
</script>
Y eso es todo. Es un DIV vacío, al que le damos un ID único (en este ejemplo lo llamo MIfollowbox) y la llamada a función donde sólo es necesario colocar nuestro nombre de usuario en Twitter.

Como decía, una serie de opciones extras permiten configurar algunos detalles:

width es el ancho en pixeles
height es el alto en pixeles
border_color el color del borde
bg_color el color del fondo
bg_image una imagen de fondo optativa
title_color el color del texto del título
total_count_color el color indicando la cantidad de seguidores
follower_name_color el color de los enlaces a los seguidores
theme permite seleccionar un estilo global; puede ser light, dark o custom

Todas ellas son optativas y se agregan en el mismo script, separándolas con comas:
$('#MIfollowbox').followbox({
  'user' : 'NOMBRE_USUARIO',
  'theme' : 'dark'
});

11 comentarios:

Richard Osorio  

que wapo yo quiero que sea fondo blanco no cuentro como configurarlo bien ayudame por favor

JMiur  

Por defecto es blanco; se puede cambiar el color a voluntad con CSS:

.follow_box_main {background-color:#FFF !important;}

Responder
Richard Osorio  

No sabes cuanto tiempo quise uno de estos mira http://www.compugamestv.com es ´posible cambiar follow por segui¡?

Responder
Lautarorx  

Muy bueno, estaría bueno que haya uno similar para mostrar los tweets.

Responder
CUENTAGOTAS  

Jorge, yo no uso jquery en mi plantilla, crees que al implementar de problemas con prototype y scripcaculous?

JMiur  

Normalmente si. Puede hacerse pero no tiene sentido.

Responder
Ricardo  

No me funciona y estoy haciendo todo al pie de la letra ayuda :(

JMiur  

Sin saber cuál es tu ejemplo, es imposible responder nada en absoluto.

Responder
NoticierodelHenares  

Hola amigo gracias por por el tutorial , lo he probado en una web joomla y me ha funcionado pero tengo demasiados problemas de conflictos con mootools a pesar de probar combinaciones cambiando el simbolo $ y agregando jQuery.noConflict();
Se podria implementar con mootools ?
Gracias un cordial saludo.

JMiur  

Es probable que haya alguna manera pero desconozco el método.

NoticierodelHenares  

Gracias nuevamente. Al final no iba mal encaminado ya está mootools y jQuery juntos sin conflictos en joomla. La solución era cambiar todas $ x jQuery , incluido en el script el cual justamente me faltaba. Un cordial saludo .

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