08 mayo 2015

Cómo poner la Nueva Caja para Páginas de Facebook

Facebook ha dicho que su cajita de "Me gusta" (like box en inglés) ya está obsoleta y sugiere utilizar en su lugar el nuevo complemento al que ha llamado: "Page Plugin", poniendo como fecha límite el 23 de Junio del presente año para que lo actualices, ya que dejará de dar soporte a la anterior cajita.

La nueva cajita puede mostrar la foto de portada que se tenga colocada en la página de Facebook, lo cual es opcional, y los usuarios en el blog podrán dar me gusta y compartir la página fácilmente. También puede mostrar de forma opcional la foto del perfil de los amigos o fans y las publicaciones de la página de Facebook.

Esta nueva caja tiene un aspecto más moderno y minimalista como puedes apreciar a continuación.

Nuevo complemento de seguidores de facebook

¿Te gusta este nuevo complemento? Pues nos guste o no hay que cambiarlo, porque el otro dejará de funcionar muy pronto.


Cómo obtener el código de la nueva cajita y ponerlo en el blog


Si ya usas la cajita anterior, primero tendrás que quitar el código de esa caja. Una vez que lo hagas sigue estos pasos:

  1. Ve a la página de Facebook, y pon en el campo los datos que te solicitan. Para completar los datos y saber cómo configurarla guíate con las notas que he puesto debajo de la imagen.

    Opciones de configuracion de la nueva caja de me gusta de facebook

    En donde dice:

    • Facebook Page URL. Pones la URL de la página de Facebook.
    • Width. Pones el ancho en píxeles que tendrá la cajita. No necesita poner la unidad del píxel (px), solo pones el valor numérico. El mínimo es 280 y el máximo 500.
    • Height. Ahí pones el alto máximo que tendrá la cajita en píxeles. El mínimo es 130.
    • Hide Cover Photo. Si marcas la casilla de esta opción, vas a ocultar la fotografía de portada que tengas en la página de Facebook.
    • Show Friend Faces. Por defecto aparece marcada la casilla y se mostrarán las fotos de los amigos o fans. Quita la selección si no quieres que se muestren las fotos del perfil de los amigos.
    • Show Page Posts. Marca la casilla si quieres mostrar las publicaciones de la página de Facebook.
  2. Una vez que hayas agregado todos los datos, obtén el código haciendo click en el botón que dice: "Get code" y se abrirá un recuadro donde aparecerán dos códigos. Cópialos y ponlos en una nota de tu computadora en ese orden primero el primer bloque de código (1), y luego el (2)..
    Codigo devuelto que ofrece el complemento

    Tienes que Ajustar el idioma si quieres que se muestren las opciones en español de España. Para ello identifica en el primer código y que he puesto aquí abajo, y cambia en_US por: es_ES.
    <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>
    
    Otras opciones en español son: español de Colombia: es_CO, o español es_LA que puede ser para cualquier otro país y que se puede verificar si vas a esta dirección.
  3. Ya que hayas ajustado el idioma, copia todo el código (los dos) vas a Diseño, y haces click en Agregar Gadget en la sección de la columna lateral o en el pie de la página, y selecciona el gadget con la opción HTML/Javascript. Luego pegas los dos códigos uno arriba del otro en el mismo orden en que los facilitó Facebook. Entonces todo el código quedaría así:
    Configuracion del gadget HTML-javascrit

    Guarda los cambios ¡Y listo! Ya habrás puesto la cajita y aparecerá en la posición que la hayas colocado en el blog. A continuación puedes ver mi propia cajita en acción de la página de Facebook que acabo de crear:



Notas finales:

  • Puedes copiar los dos códigos y ponerlos directamente en el gadget con la opción HTML/JavaScript. Yo te decía que los pusieras primero en una nota de tu computadora, para que edites el idioma, pero hazlo como te resulte más cómodo y fácil ;)
  • Facebook recomienda poner el primer código (1) después de la etiqueta <body>. Al ponerlo en el gadget, estarás colocándolo en el cuerpo de la plantilla después de dicha etiqueta. La ventaja es que ya no necesitarás ingresar al código fuente de la plantilla.
  • Si prefieres poner el código desde "Editar HTML" después de la etiqueta <body>, vas a tener que ponerlo así como muestro a continuación (agregar lo que he resaltado de azul) para que funcione, de otro modo te marcará error el editor:

    <div id="fb-root"></div>
    <script>//<![CDATA[
      (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>

    Y el código del segundo bloque (número 2), lo pondrías en un gadget con la opción HTML/Javascript.

  • Si utilizas una plantilla con un diseño adaptable (responsive en inglés) la cajita se adaptará al ancho del elemento que la contenga siendo el ancho máximo 500 píxeles y el mínimo 280 píxeles.  


Agradezco a +Gladys Cecilia Celestecielo que me dijo que la cajita de me gusta está obsoleta.

Referencias
https://developers.facebook.com/docs/plugins/like-box-for-pages
https://developers.facebook.com/docs/plugins/page-plugin

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.