Cómo poner la nueva caja de Facebook

Hola de nuevo amig@s! Hoy os traemos un post muy práctico en el que aprenderás a poner la nueva caja de Facebook en tu web o blog tras la actualización. Mark y sus colegas de Facebook han creado esta nueva caja con el objetivo de facilitar aun más si cabe la interacción social en nuestra página. Esta caja ha recibido el nombre de «Page Plugin» y más que opcional es obligatorio que nos actualicemos a la nueva versión ya que la antigua dejará de funcionar a partir del día 23 de Junio de este año.

La apariencia del nuevo “like box” supone un gran cambio respecto a las anteriores versiones, en la nueva caja aparecerá la foto de portada de nuestra página de Facebook además de mostrar las fotos de perfil de nuestros seguidores. Ambas opciones las podemos desactivar si queremos, junto con los típicos botones para darle me gusta a la página, compartirla y un feed de las últimas publicaciones que se han hecho en la página.

El aspecto de la nueva caja de Facebook es el siguiente:

Like Box Facebook

Si te gusta bien, si no… también! Porque como ya sabes tenemos que actualizarla obligatoriamente 😉

Pasemos a la acción y veamos los pasos necesarios para saber cómo poner la nueva caja de Facebook:

1. Eliminar la antigua caja

Antes de nada tienes que eliminar la antigua caja de Facebook. Para ello tienes que ir donde pustiste el antiguo código y  eliminarlo por completo. Asegúrate de que es el código correcto y haz una copia de seguridad del archivo que vas a editar para poder restaurarlo en caso de que algo saliese mal.

Una vez hayas eliminado el código antiguo por completo y compruebes que ya no está la antigua caja solo te quedará incrustar el nuevo código.

2. Generar nueva caja

Para generar el código que más adelante integraremos en nuestra página tienes que ir a la siguiente página de Facebook: Page Plugin. Una vez en la página verás unos campos que hay que rellenar para que  genere el código adecuado para nuestra página:

Campos necesarios para obtener caja de Facebook

Para que puedas rellenarlos correctamente te decimos para qué sirve cada uno:

  • Facebook Page URL: En este campo es donde indicaremos la URL de nuestra página de Facebook con el siguiente formato: https://www.facebook.com/nombre_de_la_pagina.
  • Width: Aquí indicaremos el ancho en píxeles que tendrá nuestra caja. El valor deberá ser de entre 280 y 500 píxeles ya que la caja no podrá ser menor o mayor de esas medidas.
  • Height: Este campo es igual que el anterior solo que en este indicaremos la altura en píxeles de la caja. En este caso deberá ser un mínimo de 130 píxeles pero a diferencia del anterior no hay un límite máximo.
  • Hide Cover Photo: Esta opción controla el que se muestre o no la foto de perfil de nuestra página de Facebook. Si no queremos que se muestre en la caja deberemos marcar esta opción.
  • Show Page Posts: Si marcamos esta opción se mostrará en la caja un Feed con las últimas publicaciones que se han hecho en la página.
  • Show Friend’s Faces: Por último nos encontramos con esta opción que lo que hace en caso de marcarla es mostrar la foto de perfil de los seguidores de nuestra página de Facebook.

Una vez rellenados los campos hay que darle al botón Get Code que aparece más abajo para que nos genere el código que necesitamos. Cuando lo hagas te aparecerá un recuadro con dos códigos los cuales son necesarios para avanzar al último paso.

Código Fuente Caja Facebook

3. Integrar la nueva caja de Facebook en nuestra web

Para poder integrar la nueva caja en nuestra web te recomendamos que abras el bloc de notas y pegues los 2 códigos en el orden en el que te los muestra Facebook. Una vez los tengas uno a continuación del otro, y en caso de ser necesario, tendrás que cambiar una parte del código para hacer que la caja aparezca en Castellano ya que de lo contrario aparecería en Inglés.

Para ello tendrás que buscar en la primera parte del código las letras que hemos marcado en negrita:

<div id=»fb-root»></div><script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = «//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3″;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

Y cambiarlas por es_ES de tal forma que el código nos quede así:

<div id=»fb-root»></div><script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = «//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3″;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

De esta forma ya tendremos nuestro código listo para pegarlo en nuestra web.

Para ello simplemente tienes que editar el archivo de tu web, dependiendo de donde quieras ubicar la nueva caja de Facebook, y pegar el código del bloc de notas para que quede de la siguiente forma:

Codigo Integrado Caja Facebook

Por último guardaremos los cambios y voilà! Ya tenemos la última versión de la caja de Facebook en nuestra web totalmente funcional. Además si nuestra web posee un diseño responsive la nueva caja se adaptará perfectamente independientemente de la resolución.

Si has llegado hasta aquí ya sabes cómo poner la nueva caja de Facebook pero si todavía tienes alguna duda los comentarios están abiertos 😉

 

2 comentarios de “Cómo poner la nueva caja de Facebook

  1. Pablo Pinedo dice:

    Hola sigo los pasos y en donde deberia aparecer la nueva caja solo me aparece el nombre de mi facebook como hipervinculo, cuentame que puedo hacer. por favor.

    • Ángel Amat dice:

      Hola Pablo!

      Pues puede ser problema de que no te está cargando correctamente el script.
      Prueba a copiar la primera parte del código que te da Facebook (Paso 2, primera imagen) y pégalo justo después de la etiqueta < body > en el código de tu web. Si tu web está hecha en WordPress podrás encontrar el código en el archivo header.php que se encuentra en la carpeta de tu theme.

      Cuéntanos si te sirvió y gracias por tu feedback!

Los comentarios están cerrados.