Twitter Follow Box BETA 1.0 jQuery y mootools en Joomla 2.5

¿Tienes un producto de Código Abierto para Joomla? Este es el sitio para compartirlo con la comunidad

Moderators: carcam, hefesto

Willie Sans
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Sun Jun 24, 2012 6:11 pm

Twitter Follow Box BETA 1.0 jQuery y mootools en Joomla 2.5

Postby Willie Sans » Fri Aug 03, 2012 3:41 pm

Hola , dado que no he visto plugins o módulos en el JED para Fans de Twitter me propuse hace tiempo buscar alguno que cumpla la

expectativa y realice la función medianamente bien en joomla 2.5 y si fuera posible gratis ( ya veis que ando escaso y cambiando

extensiones ) la economía esta fatal y el mundo aún peor. Bueno, vamos al asunto con el mini tutorial en español y gratis valga

redundancia :)

Twitter Follow Box Beta 1.0 es un plugin para jQuery que nos permite agregar un gadget de Twitter que copia el estilo del plugin

Like 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 la página de los desarrolladores y allí

nos encontraremos con cuatro archivos:

followbox.css ( las reglas css del plugin )

jquery.followbox.js o jquery.followbox.min.js ( el plugin )

podemos usar cualquiera de ellos lo agregamos antes del </head> con el siguiente contenido...

Code: Select all

<script type='text/javascript'>
  ... aquí el contenido del archivo ...
</script>


tambien podemos subirlo a nuestro sitio y enlazarlo de esta forma...

Code: Select all

<script src="/templates/nuestro_template/carpeta/jquery.followbox.js" type="text/javascript"></script>


enlazamos tambien el CSS...

Code: Select all

<link href="/templates/nuestro_template/carpeta/followbox.css" rel="stylesheet" type="text/css"/>



Después, podemos subir la librería de jQuery a nuestro sitio o cargarla desde un servidor externo por ejemplo la del repositorio

de Google ( lo que he optado ) por temas de optimización...

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>


O subirla a nuestro sitio y enlazarla...

Code: Select all

<script src="/templates/nuestro_template/carpeta/jquery1.7.2.js" type="text/javascript"></script>



Ahora creamos un módulo personalizado HTML escribimos :

Code: Select all

<div id="followboxbeta"></div>
<script>
  $('#followbox').followbox({
    'user' : 'NOMBRE_USUARIO'
  });
</script>


Es un DIV y la llamada a función donde solo resta indicar nuestro nombre de usuario.
Exiten opciones extras optativas que 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

Se agregaria de la siguiente forma separándolas con comas dentro del propio script:

Code: Select all

$('#followboxbeta').followbox({
  'user' : 'NOMBRE_USUARIO',
  'theme' : 'dark'
});


Para cambiar un pequeño ícono que utiliza el plugin, la imagen llamada icon_twitter.png la subimos a nuestro sitio y buscamos esto

en el script:

Code: Select all

var d="followbox/icon_twitter.png";


lo cambiamos por la dirección de nuestra imagen.

Code: Select all

var d="http://mi_imagen.png";


Hasta aquí ya tendriamos una parte del proceso, para que este plugin sea funcional es necesario realizar algunos ajustes debido a

que por defecto Joomla viene con la librería mootools, al instalar la libreria jQuery entrará en conflicto. Para que puedan

funcionar ambas librerias hay que modificar todas las variables que estan representadas con el simbolo del dollar $ dado

que moootools hace referencia a la misma para llamar a.... por lo tanto cambiamos todas para evitar este conflicto y lo

reemplazamos porjQuery.

En el script jquery.followbox.js donde comienza...

Code: Select all

(function(jQuery) {


Le agregamos encima la función de no conflicto..

Code: Select all

jQuery.noConflict();


ya tenemos jQuery y mootools en nuestro Joomla.

Image


Un cordial saludo.

Return to “Productos de Código Abierto para Joomla!”

Who is online

Users browsing this forum: No registered users and 1 guest