Como añadir el nuevo Page Plugin de FaceBook

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.

11 Comentarios

    • upempresa

      Gracias por ver nuestros tutoriales 😀

      Responder
  1. MARCO

    Estimado:

    Gracias por publicar de manera clara tus viedos, pero tengo un problema realizo todos los pasos que explicas pero solo me aparece el link de mi pagina. No me aparece el cuadro completo, ¡ que deno hacer para solucionarlo¡

    Responder
    • upempresa

      Gracias por ver nuestros video tutoriales. Le recomiendo verificar dos veces que el script de la librería Javascript de FaceBook se encuentre añadida correctamente, y que dentro de la web de Facebook se encuentra utilizando los códigos correctos, ya que desde la página que indicamos puede generar otras cosas como botones de me gusta por ejemplo, de modo que debe asegurarse de estar utilizando los códigos para el Page Plugin.
      Saludos.

      Responder
  2. Juan

    Hola, excelentes videos, siempre ayudan. Ahora bien. Hago paso a paso el tutorial y en la plantilla solo me muestra un enlace a la fan page. NO SE MUESTRA EL TIME LINE DE FACEBOOK como lo veo en el simulador en developers. ???¡¡¡¡ lo he probado en varios sitios y nada, me tiene loco…. Si me pueden ayudar sería genial….

    Nuevamente agradecido…

    Responder
  3. Juan

    Hola, veo ahora un comentario anterior a mi duda y me pasa lo mismo. Verifique y coloque justodespues de la aprtura de la etiqueta <body erl scrip que me genera facebook. me omagino que es el corecto porque el simulador lo que me muestra es el time line de facebook y no un botón….

    El segundo scrip, el de la ubicación, lo he porbado en distintos pluguin, de texto arbitraio, barra letral y hasta en puiblicaciones y nada, siempre lo que arroja es un enlace a mi fan page…. !AYUDA¡

    Responder
  4. Edwin

    Buenas noches amigo, el proceso funciono excelente, pero sucede que solo funciona cuando tengo mi cuenta de facebook abierta y cierro la cuenta en la pagina web desaparece el banner de facebook. ¿Como puedo hacer para programar que siempre este visible?

    Responder
    • upempresa

      Buen día, siempre debería aparecer el page plugin, independientemente de si se encuentra en su cuenta, te recomiendo no ver la web con la versión de incognito, si es ese el caso, entonces si, en la versión de incognito de los navegadores no aparece el page plugin, deberías intentar ver la web normalmente desde el navegador.

      Responder
  5. Edwin

    Buena noche Lievanosan, ya verifique y no esta en modo incognito, y como le digo sigue sin aparecer que otra prueba puedo hacer o que codigo debo agregar. Gracias

    Responder
  6. Andrés

    Hola!
    Seguí todos los pasos que indican, pero no se ve nada en mi web. Qué puede estar sucediendo?

    Responder
    • upempresa

      Buen día, sin acceso a su área de administración no podemos ayudarle en su consulta, si tiene una cuenta de hosting con nosotros, por favor ingrese en su área de cliente y envíenos un ticket de soporte, con gusto un agente de soporte podrá solucionar cualquier inconveniente.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *