qriconfacebookicon twittericon linkediniconyoutubeicon

Llámanos: +52 (222) 4 54 34 21

Botón "Me gusta" de Facebook en JCMedia box

Con esta entrada iniciamos una nueva categoría del blog llamada "Ayuda Joomla", en Framelova llevamos tiempo trabajando con joomla para la creación de sitios web y constantemente tenemos que hacer pequeñas modificaciones o correcciones a componentes para obtener compotamientos para los que no fueron diseñados pero resultan muy utiles en escenarios especificos. 

Sin más preambulo la entrada del día de hoy se trata como aprovechar el componente de JC Media Box para hacer una galería de imagenes con la capacidad de rastrear una especie de votación apoyandosé en el botón "Me gusta" de Facebook.

JC Media Box es un plugin que se le puede agregar al editor JC Editor y entre otras cosas nos permite abrir una imagen en un pop up tipo light box como la imagen siguiente:

lafoto

Este plugin tiene la capacidad de indicar un titulo y descripción de cada imagen, ahora si lo que estamos armando es una galería de imagenes, algo que tambien permite hacer el plugin, puede ser de utilidad agregar un botón "Me gusta" de Facebook. 

Para ello aprovecharemos el campo de descripción de imagen y la capacidad de cargar un botón como iframe por parte de Facebook. 

Primero configuraremos el botón en Facebook

FacebookLike

En la url pondremos la de la imagen para que se así se lleve un conteo individual para la misma, cuando demos en "get code" Facebook nos mostrara una ventana con varias opciones para este fin solo nos será util la de "iFrame" lo copiamos y pegamos en algún editor de texto que nos permita cambiar todas las comillas dobles por simples.

Ahora nos ponemos algo tecnicos, configuramos la imagen con el JC Media y dejamos que inyecte el código en el editor. Una vez que lo hizo pasamos a vista código y encontraremos algo como esto:

  1.  
  2. <a href="images/blog/2013/dr_Who_box.jpg" target="_blank" class="jcepopup noicon" rel="title[Dr Who]"><img src="images/blog/2013/dr_Who_box.jpg" width="200" height="113" alt="lafoto" style="display: block; margin-left: auto; margin-right: auto;" /></a>
  3.  

En la parte donde esta el titulo agregaremos un caption de la siguiente forma:

  1.  
  2. ...rel="title[Dr Who];caption[]"><img s...
  3.  

Entre los corchetes del caption pegamos el código que acabamos de modificar del iframe de Facebook y con ello tendremos el siguiente resultado:

lafoto

 

Podemos poner el mismo código de botón a lado de cada imagen así los visitantes podrían dar click sin necesidad de abrir el pop up, las aplicaciones ya solo es la imaginación. 

Espero esto sea util para alguien :) 

-J

 

 

  • bannersnosotros1.jpg
  • bannersnosotros2.jpg
  • bannersnosotros3.jpg

Publicidad