Implementando un Twitter Follow Box

14/Sep/2012 jQuery , 1 Comentario

Twitter Follow Box es un plugin realizado en JQuery que nos permite agregar al mejor estilo Facebook, nuestros seguidores de Twitter. No requiere grandes conocimientos para incorporarlo a nuestra web y nos llevará muy poco tiempo realizarlo. Para llevar a cabo la implementación de este plugin debemos realizar los siguientes pasos:

  1. Descargar el plugin de la web del autor.
  2. Incorporar en el header los links a la librería de JQuery, al arhivo de CSS y a la librería del plugin.
  3. Escribir el div donde vamos a alojar el contenido del twitter follow box.
  4. Escribir el script de llamada al código del plugin.

Descarga del plugin

Primero debemos descargar el fichero zip desde la página de sus creadores haciendo click aquí. Una vez que lo descargamos debemos acomodar los archivos que encontramos:

  • JS: jquery.followbox.min.js es la versión que podemos usar en producción y jquery.followbox.js es la versión que podemos utilizar para debbuguear. Estos archivos son el core del plugin.
  • CSS: followbox.css. Es el archivo de CSS. En este archivo hay dos themes: el principal y el dark. Lo pueden modificar a su manera.
  • Imagen: icon_twitter.png. Este archivo es un loguito de Twitter que se encuentra al lado del link que apunta a la página del desarrollador. Tengan en cuenta que esta imagen está enlazada a una ruta específica dentro de los archivos JS antes mencionados. Para cambiar la ruta de donde lo alojen tienen que editar el archivo y buscar: var d="followbox/icon_twitter.png"

Código dentro del head

  1. <!— incorporamos el link al css -->
  2. <link href="css/followbox.css" rel="stylesheet" type="text/css"/>
  3.  
  4. <!— incorporamos el script de JQuery -->
  5. <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
  6.  
  7. <!— incorporamos el script del plugin -->
  8. <script src="js/jquery.followbox.min.js" type="text/javascript"></script>

Código del div

Escribimos un div vacio donde queremos que aparezca el box

  1. <div id="twitterBox">
  2. </div>

Código de llamada del script

Escribimos el código para llamar al constructor del plugin

  1. $('# twitterBox).followbox({
  2. 'user' : 'nuestro nombre de usuario en twitter sin @',
  3. 'width' : '1240',
  4. 'theme' : 'dark'});

Dentro de las variables que podemos inicializar opcionalmente para acomodar el box de acuerdo a nuestras necesidades encontramos las siguientes. La variable user es obligatoria.

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

Como síntesis de nuestro artículo podemos concluir que tenemos una implementación realmente sencilla, ultra customizable que nos va a permitir mostrar nuestros seguidores de twitter en nuestro sitio Web.

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Implementando un Twitter Follow Box”

Emmanuel Sio

Prince

Because of this capability, this equipment is
mainly used in drainage cleaning where solids have already mixed in with the fluids.
Reed beds present sludge dewatering by plant consumption, evapotranspiration, and drainage.
While both parents were charged, one of the charges that the
boy’s mother is facing is more serious than what the
boy’s father is facing, according to WUSA-9 on April 3.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*