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.

�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.
   
   
   
   
   
   
   
   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)..
   
   
   
   
   
   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�:
   
   
   
   
   
   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:
   
   
   
   
   
   

   
   

   
   Compartid�simo

   
   

   
   
   
   
   
   

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