FaceBook descontinuará el like box, muchos tenemos el like box activo en nuestra web pero ahora debemos remplazarlo por el nuevo plugin de FaceBook llamado «Page Plugin». El uso del Page Plugin es exactamente el mismo que el like box pero ahora cuenta con un mejor diseño y otras opciones. En este tutorial descubrirás como actualizarte y añadir el Page Plugin en tu web.
¡Registrate GRATIS!
Crea tu propio plugin aquí: FaceBook Page Plugin
Transcripción del video
Buen día y muchas gracias por ver este nuevo video de josel63.sg-host.com, mi nombre es José Lievano y en este video aprenderemos como añadir el nuevo plugin para nuestra fan page de Facebook en nuestra web.
Facebook actualizará el plugin para las fan page y desde el día Junio 23 el like box como lo conocíamos dejará de existir. Y deberemos usar su nueva versión a la cual Facebook ha llamado page plugin. La función del like box de Facebook es que podamos compartir nuestra fan page en nuestro sitio web, con los lectores y usuarios de nuestras web. Y el nuevo page plugin tiene la misma función.
Para ver de lo que estamos hablando vamos a remplazar el like box que tenemos aquí en nuestro WordPress con el page plugin. Tengo abierta en otra pestaña la página de Facebook developers para mostrarte cómo funciona, para ir a este página únicamente debes ir hacia developers.facebook.com/docs/plugins/page-plugin y llegarás aquí. Si te encuentras en nuestro blog dentro de josel63.sg-host.com encontrarás el link hacia esta página debajo de la descripción en este video.
Una vez llegamos aquí vamos hacia abajo y podremos ver como configurar nuestro plugin. En primer lugar debemos colocar la dirección de nuestra página desde este campo. Podemos también desde aquí definir el ancho que nuestro page plugin tendrá, y desde esta otra opción le podemos añadir la altura. Pero también los podemos dejar en blanco y Facebook los adaptará automáticamente.
Luego podemos definir si deseamos que se muestren las caras de los amigos a los que les gusta la página. Si deseamos mostrar la foto de portada, personalmente creo que es mejor si dejamos la foto de portada, mira como se ve si se la quitamos. Como puedes observar es mas llamativo con la foto de portada así que se la vamos a dejar.
Desde esta otra opción podemos indicar si deseamos mostrar los post recientes que hemos publicado en nuestra fanpage, en mi caso no los deseo mostrar. Y una vez hemos colocado las opciones a nuestro gusto, daríamos clic en el botón azul que dice “get code”.
Bien y nos entrega las instrucciones de cómo añadirlo en nuestra web. Hay que hacer simplemente dos pasos y te voy a mostrar detenidamente como se hace para añadirlo en tu web. Primero, debemos añadir el código Javascript de Facebook después de la etiqueta body en nuestra web.
Entiendo lo aterrador que eso puede sonar si no te encuentras familiarizado trabajando con código, pero es muy fácil, es solo cuestión de copiar y pegar, así que no te me espantes y veamos cómo se hace. Primero das clic aquí y copiamos el código, yo uso Ctrl + C para copiar en Windows si estás en Mac debes usar Comando + C.
Ahora vamos a nuestra área de admin en WordPress, desde aquí entrarmos en el editor de nuestra plantilla, así que vamos hacia apariencia y luego en editor. Muy bien, desde aquí podemos ver en primer lugar que estamos trabajando en la plantilla llamada Nictitate, esta es el diseño que yo estoy usando, debes asegurarte que te encuentras trabajando en la plantilla que tienes activa en tu WordPress. Ahora en este lado tenemos todos los archivos de esta plantilla, pero el que nos interesa es el que se llama header.php
Ese archivo lo tienen todas las plantillas, así que solo debes buscarlo aquí, como puedes ver lo hemos encontrado, en mi caso dice cabecera pero justo abajo puedes ver que se trata del archivo header.php, así que le vamos a dar clic. Perfecto ahora te encuentras viendo el código del archivo header.php, muy bien ahora debemos buscar la etiqueta llamada “body”.
Voy a bajar un poco, y podrás ver que la tenemos justo aquí. Si tienes problemas para encontrarla, puedes presionar ctrl + f y se te abre una cajita de búsqueda ahí colocamos
Y entonces justo abajo vamos a pegar el código que hemos copiado de Facebook. Y ahora damos clic en actualizar archivo y listo. Muy bien, ahora vamos al segundo paso. Regresemos a Facebook, ahora vamos a copiar este otro código, este código es como un código embed, como el código que usas para colocar videos de YouTube. Así que primero vamos a ir hacia uno de nuestros artículos. Desde aquí vamos a la vista de código dando clic en la opción texto del editor. Voy a colocar el page plugin entre estos dos párrafos así que simplemente le hago espacio y pego el código.
Ahora damos clic en el botón para ver nuestro artículo. Como puedes observar ahora tenemos nuestro page plugin correctamente colocado en WordPress. Pero qué pasa si lo quieres colocar en un sidebar, bien eso es igualmente muy fácil, para eso vamos a usar un widget de texto. Así que vamos a ir hacia el área de admin y luego en apariencia y widgets. Yo tengo el widget de texto hasta abajo, así que voy a ir hacia abajo y lo tenemos aquí, lo voy a arrastrar hasta el sidebar1.
Y desde aquí le daré un título y voy a pegar el código de Facebook. Lo guardamos y ahora vamos a nuestra web, y puedes ver que ahora tenemos el page plugin en nuestro sidebar. Ves que fácil es añadirlo, si tienes una cuenta de Hosting con nosotros y necesitas ayuda para añadir el page plugin no dudes en comunicarte con nosotros desde tu área de cliente, será un gusto poder ayudarte.
Ahora veamos rápidamente como añadirlo usando el Website pro, Website pro es un programa que te permite crear sitios web fácilmente y se encuentra incluído gratis en todos nuestros planes de Hosting. Tengo aquí un demo abierto del Website pro. Yo voy a borrar este modulo ya que es aquí donde deseo colocar el page plugin. Y ahora voy a añadir un modulo de HTML, simplemente lo arrastramos y lo colocamos aquí.
Muy bien ahora vamos a copiar los dos códigos dentro de este modulo, así que vamos hacia Facebook y voy a copiar primero el código javascript, regreso al Website pro doy doble clic para añadir mi código y lo pegamos. Ahora regresamos hacia Facebook y copiamos el otro código, vamos a websitepro y lo pegamos abajo del primer código, es importante que lo pegues abajo, no arriba. Deben ir en orden.
Muy bien ahora damos clic en aplicar. Desde la vista de edición no podras ver el page plugin así que doy clic en vista previa. Y al cargar la página podrás ver que tenemos aquí nuestro page plugin. Como te decía al inicio del video es muy fácil añadirlo. Recuerda que el like box estará disponible hasta el 23 de Junio, y desde ese momento si no te actualizas Facebook cambiará automáticamente tu like box por el nuevo page plugin.
Muchas gracias por ver este video, espero que te sea de ayuda, por favor no dudes en suscribirte a nuestros tutoriales en josel63.sg-host.com, y recibe todos nuestros tutoriales gratis en tu correo. Mi nombre es José Lievano y nos veremos en un próximo video.