Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Domingo, 03 Julio 2011 14:03

Compartir contenidos de Joomla! con Scrolling Share Bar

Escrito por 
CMS:  Joomla! |  Versión:  1.6 |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  15 minutos


Scrolling Share BarEn varias ocasiones hemos comentado en el Blog como compartir los contenidos de un sitio web desarrollado en Joomla! a través de numerosas herramientas (extensiones) y porque no, utilizando código externo en módulos personalizados o aplicado sobre la propia plantilla.

De una u otra forma hemos ido consiguiendo el objetivo de mostrar a los visitantes las herramientas necesarias para que compartan sus contenidos con sus círculos más próximos y de esta forma hacer que estos contenidos lleguen más lejos y permitan que más allá de la teoría de los 150 usuarios (promedio) que conforman nuestro círculo directo de amistades y seguidores, lleguemos a otros grupos de usuarios en otros círculos de amistad y expandamos nuestro radio de acción.

Nos vamos a servir esta vez de un plugin, desarrollado por el italiano Serafino Bilotta, que va a mostrar una barra vertical con diferentes iconos de redes sociales dinámicos que por defecto trae la extensión además de poder implementar nuestros propios iconos de socialización a través de código personalizado sobre el propio plugin, lo que lo hace más interesante frente a la mayoría de extensiones de esta naturaleza.

Scrolling Share BarPermite la gestión directa de las siguientes redes sociales:

  • Digg
  • Twitter
  • Facebook
  • Diggita
  • Delicious
  • Reddit
  • Upnews.it
  • Technotizie.it
  • Tweetmeme
  • Topsy
  • FbShare.me
  • Google Buzz
  • Sphinn
  • Stumbleupon
  • Email (solo urls SEF)
  • DZone
  • Yahoo! Buzz
  • MySpace
  • DesignFloat
  • Linkedin
  • Facebook Like button
  • Además de estas redes podemos incorporar iconos propios personalizados para sindicación de contenidos, sindicación de productos de VirtueMart y todos aquellos que se nos puedan ocurrir dentro de los límites del tamaño de la propia extensión en función de la plantilla que utilicemos.

    Se recomienda trabajar con resoluciones superiores a los 1024px de ancho de visualización para que el plugin no muestre la barra de iconos superpuesta sobre los contenidos.

    Tras descargar la extensión desde el JED o la página del autor, la cual esta disponible para Joomla! 1.5 y Joomla! 1.6, procedemos a instalarlo y configurarlo de la siguiente forma:

    • Instalar el plugin desde Extensiones, Instalar/Desinstalar, posteriormente activar el plugin.
    • Activar el uso de jQuery si tu no lo tenemos en Joomla!.
    • Activar el efecto que queremos emplear para el comportamiento del desplazamiento de la barra de iconos.
    • Localizar con Firebug el contenedor (Container) que servirá de referencia para cargar el plugin.
    • Establecer anclaje de la barra.
    • Establecer el margen de separación con respecto al < div >
    • Establecer el margen positivo o negativo en función de donde vamos a posicionar la barra. (negativo: izquierda, positivo:derecha).
    • Seleccionar si deseamos agregar código personalizado.
    • Activar aquellos botones de redes sociales que queramos utilizar.
    • Establecer si deseamos aplicar una traducción para nuestro idioma (por ejemplo: zh para chino, sv Suecia, ru Rusia, ja para japonés, it para italiano, en Inglés, es para el español, etc.).
    • Personalizar CSS (podemos aplicar un color de fondo diferente, por ejemplo, a la barra de botones).
    • Excluir categorías, artículos, secciones mediante la inserción del ID separados por una coma.

    Si deseamos incorporar algún icono personalizado que enlace por ejemplo a una cuenta de vídeos de Youtube en la que tengamos publicados vídeos a través de una cuenta normal o de un canal de usuario, podemos crear un icono o utilizar alguno existente en Internet y enlazarlo de la siguiente forma:

    <a rel="nofollow" href="https://www.youtube.com/user/tu_usuario_de_youtube" target="_blank"><img src="http://tu_dominio.com/images/stories/iconos/youtube.png" alt="Youtube" title="Síguenos en Youtube"></a>

    Este código lo incorporaremos en el campo del plugin de "código personalizado" y deberá estar contenido dentro del siguiente código:

    <div class="single_share_button">AQUI TU CODIGO</div>

    Quedando de la siguiente forma:

    <div class="single_share_button"><a rel="nofollow" href="https://www.youtube.com/user/tu_usuario_de_youtube" target="_blank"a><img src="http://tu_dominio.com/images/stories/iconos/youtube.png" alt="Youtube" title="Síguenos en Youtube"></a></div>

    Con esto tendríamos un botón en la parte inferior de la barra (que podemos reubicar posteriormente desde los box de posición) que enlazaría con la página de Youtube correspondiente. Este concepto lo podemos hacer extensivo para iconos de RSS, e-mail, etc.

    Si nuestra plantilla no tiene soporte para jQuery podemos añadir el siguiente script en el archivo correspondiente de nuestra plantilla (normalmente index.php) antes de la etiqueta :

    <script src="http://code.jquery.com/jquery-1.6.min.js""a></script>

    En el vídeo podemos ver ilustrado todo este proceso en detalle así como los pormenores de localización de "contenedor" mediante el uso de Firebug y la inserción de iconos personalizados como "código personalizado":



    Nota: Si deseamos eliminar el texto inferior que aparece en el copyright -Eddie84- (si activamos este) o cambiarlo por un nombre propio, localizamos dicho texto en el archivo /plugins/system/scrollingsharebar.php en la línea. 193.

    Una forma divertida y diferente de mostrar los distintos botones de socialización de contenidos en Joomla! utilizando el plugin Scrolling Share Bar que nos sirve tanto para Joomla! 1.5 como 1.6.



¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+


Plugin Optimización de Imágenes Gratuito para WordPress