Twitter Follow Box

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'
});