Utilizamos cookies y tecnologías similares propias y de terceros, de sesión o persistentes, para hacer funcionar de manera segura nuestra página web y personalizar su contenido. Igualmente, utilizamos cookies para medir y obtener datos de la navegación que realizas. Puedes configurar y aceptar el uso de cookies a continuación. Asimismo, puedes modificar tus opciones de consentimiento en cualquier momento visitando nuestra Política de cookies. y obtener más información haciendo clic aquí.
 
Recuperar contraseña    
Usuarios Online:  172
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

20
NOV.
2014
 
 
 

Cómo implementar el plugin social "Like Box" de Facebook en tu web

Publicado por Elisa Bueno García | jueves, 20 de noviembre de 2014 a las 22:24 h.
3027  
 

El Like Box de Facebook, es la típica caja con fotografías que vemos en muchas web. A través de este plugin, los usuarios de tu web o blog pueden hacerse seguidores de tu página de Facebook e incluso pueden ver las últimas publicaciones (dependiendo de cómo configures el plugin). Éste es el aspecto que suele tener un Like Box estándar:

Antes de continuar debemos saber que este plugin únicamente funciona con los perfiles de empresa o fan page de facebook. No lo intentéis con los perfiles personales porque no funciona.

Para añadir el plugin debemos acceder a la página oficial de Facebook para desarrolladores (Facebook Developers) Aquí vamos a ver que los plugin sociales de Facebook actualmente son diez, pero nosotros vamos a centrar el artículo en el llamado Like Box.

Para acceder directamente a la configuración del plugin nos vamos a https://developers.facebook.com/docs/plugins/like-box-for-pages

Únicamente tenemos que ir completando los campos que nos pide e iremos previsualizando nuestro plugin social. Tenemos:

  1. Facebook Page URL.- Esta es la URL de tu página en Facebook, accede a tu cuenta de Facebook y copia la dirección web aquí
  2. Width.- El ancho, en píxeles, que tendrá la caja, intenta que se ajuste al lugar donde la colocarás
  3. Height.- El alto, en píxeles, de la caja. Cuanto más grande hagas la caja, más fotos contendrá
  4. Color Scheme.- Plantilla de la caja, dispones de dos: light (clara) y dark (oscura)
  5. Show Friend's Faces.- Marca esta opción si deseas que se vean las fotos de tus fans
  6. Show Header.- Si marcas esta opción, se mostrará la cabecera de la caja "Búscanos en Facebook"
  7. Show Posts.- Si la habilitas, se mostrarán las últimas publicaciones de tu página de Facebook
  8. Show Border.- Indica si quieres bordes en la caja

Juega con estos parámetros y configúralo a tu gusto, una vez hayas terminado pulsa sobre el botón "Get Code", obtendrás una pantalla emergente como esta:

 

Por defecto te aparece el código HTML5 pero tienes otras tres opciones disponibles (XFBML, IFRAME, URL). En cada una de ellas te muestra el código que necesitas insertar en tu web y las instrucciones oportunas.

Elije el que te interese e insértalo en tu web. Y ya tendrías tu plugin Like Box como este.

 

Opciones Avanzadas:

Si a la hora de añadir el código en nuestra web hemos elegido la opción HTML5, aún tenemos algunas opciones más para configurar nuestro plugin.

Nos centraremos en la etiqueta DIV, recuerda:

<div class="fb-like-box" data-href="https://www.facebook.com/controldedominios" data-width="500" data-height="320" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

Mediante atributos "data" del elemento DIV, podremos pasarle  parámetros al plugin de Facebook. La herramienta de construcción del Like Box es muy completa, de hecho solo hay un parámetro que no incluye: data-force-wall.

Estos son todos los parámetros disponibles:
 

Data

Descripción

data-colorscheme

Combinación de colores: light (claro)  o dark (oscuro)

data-force-wall

Para páginas de ubicaciones

data-header

Especifica si se muestra el título de cabecera de la caja: true/false

data-height

Altura del plugin en píxeles. Ej: 300

data-href      

Dirección URL de la página Facebook que se desea enlazar

data-show-border     

Especifica si se muestra o no el borde: true/false

data-show-faces

Indica si se desean mostrar las caras de tus fans: true/false

data-stream

Si se desean mostrar las últimas publicaciones de la página: true/false

data-width

El ancho del plugin en píxeles. Ej:350


Haz pruebas hasta que el plugin quede a tu gusto, como ves es muy sencillo.

Y cómo ya sabes este blog no lleva mucho tiempo y tenemos pocas caritas en nuestro plugin. ¿Me ayudas a rellenar huecos? :-) 


¡¡ Gracias !!

 
 
¿Te ha gustado el artículo? ¡Suscríbete YA!
Únicamente recibirás un breve resumen mensual de los últimos post