Aunque la fiebre de Facebook ya pasó, todavía hay muchas personas y empresas que siguen usando esa red social. Si eres una de ellas y quieres mostrar un feed de Facebook en WordPress, esta entrada es para ti 😉
En el anterior post expliqué cómo mostrar el feed de Instagram en WordPress y personalizarlo, y hoy es el turno de ver cómo hacerlo con Facebook.
Lo que se busca es mostrar en tu web tus últimas publicaciones en la red social de Mark Zuckerberg y que tus usuarios conozcan tu página y el contenido que ahí publicas.
Y, por supuesto, si tu contenido les gusta, pues que se puedan convertir en seguidores, ya que están 😉
Aunque, al contrario que con Instagram, Facebook no se trata de una red en la que únicamente se muestran imágenes, veremos que hay opciones muy interesantes para mostrar también galerías de las imágenes que tienes en tu cuenta, y así conseguir un bonito diseño en la web.
Sin más rodeos, vamos a ver cómo puedes hacerlo de la mejor y más sencilla manera.
Cómo mostrar en WordPress el feed de Facebook
Aunque haya varios plugins que permitan mostrar en WordPress el feed de Facebook, voy a volver a hablar de un plugin de Smash Balloon, que son los mismos desarrolladores que el plugin de Instagram que vimos en el anterior post.
Vamos, que los chicos de Smash Balloon se han especializado en las redes sociales, y eso se nota a la hora de probar sus productos 🙂
El plugin del que hablo es Custom Facebook Feed Pro, un plugin muy completo que te va a permitir personalizar varios aspectos del feed.
Tiene una versión gratuita llamada Smash Balloon Social Post Feed, y que puedes instalar para probarlo desde el repositorio de WordPress.
Pero hoy te voy a hablar de la versión de pago, que puedes ver aquí, y que tiene estas características:
- Te permite mostrar fotos y vídeos en tus publicaciones, ya que en la versión gratuita solo admite texto, y abrirlas en forma de popup directamente en tu web, sin enviar al usuario a Facebook.
- Tiene varios formatos de diseño para mostrar las publicaciones.
- Permite mostrar el número de comentarios, “me gustas”, veces compartidas, reacciones de los usuarios, y mostrar los últimos comentarios en las publicaciones.
- Puedes mostrar los eventos que tengas creados en tu página de Facebook.
- Es posible crear una galería con tus imágenes y/o álbumes de manera similar que con Instagram.
- Puedes elegir el contenido que quieres mostrar (fotos, vídeos, eventos…) y filtrarlo por hashtags, palabras o frases.
Estas son algunas de las características más importantes y relevantes, pero puedes verlas todas en esta página.
Sinceramente, el plugin es la caña, al mismo nivel que los otros plugins de Smash Balloon, por lo que si buscas la mejor solución para mostrar tu Facebook en WordPress, no busques más y hazte con él.
Cómo configurar Custom Facebook Feed Pro
A continuación, voy a explicar todo lo que necesitas saber para configurar Custom Facebook Feed Pro, desde la conexión con tu cuenta de Facebook, hasta la personalización del feed en tu web.
Conectar con tu cuenta de Facebook
Lo primero que hay que hacer es conectar el plugin con tu cuenta de Facebook, cosa que puedes hacer desde la pestaña “Facebook Feed – Settings”, haciendo clic en el botón “Connect a Facebook account”.
Para conectar tu cuenta, tienes que tener iniciada tu sesión en Facebook en el mismo navegador que tienes abierta tu web.
Al hacer clic en el botón de conectar, te pedirá si lo que quieres conectar es una página o un grupo de Facebook. Elige la opción que sea, y haz clic en continuar (este ejemplo lo haré lo una página). Te pedirá confirmación para continuar con la cuenta que está abierta en ese momento.
Después, aparecerá un listado de las páginas que tienes creadas con esa cuenta y deberás elegir cuál es la página que quieres conectar con tu web, y darle permiso posteriormente para administrar tu página.
Una vez terminado el proceso, en tu web aparecerá un último paso para conectar tu cuenta. Selecciona la página que has seleccionado y haz clic en “Connect this page”.
Todo estará bien si tu página aparece en “Connected accounts”
Configurar el feed de Facebook
Cuando la cuenta esté conectada, puedes empezar a configurar el feed desde la misma pestaña “Facebook Feed – Settings”.
Primero, tienes que indicar si se trata de una página o de un grupo. También está la opción de perfil, pero solo sirve para avisarte de que no se pueden mostrar perfiles personales en el feed.
También puedes seleccionar si quieres que se muestren las publicaciones hechas únicamente por el propietario de la página, las que están hechas por terceros, o ambas, así como el número de publicaciones que quieres que se muestren, teniendo la posibilidad de mostrar un botón para cargar más.
La opción de la API puedes dejarla en automático, y la comprobación para ver si hay nuevas publicaciones dependerá del número de publicaciones que haces normalmente. Si realizas una al día, puedes elegir que se comprueba una vez al día, por ejemplo.
Por último, selecciona el país en el que te encuentras y la zona horaria.
Personalizar el feed de Facebook
Ahora, vamos a ver qué opciones tienes para personalizar el feed de Facebook en WordPress.
Ajustes generales
Puedes configurar el ancho y alto que quieres que ocupe el feed, añadir un espaciado, asignar un color de fondo, ponerle una clase CSS, y elegir el número de columnas que quieres que tenga.
Puedes elegir los tipos de publicaciones que quieres que aparezcan en el feed, pudiendo elegir entre estados, eventos, fotos, vídeos, enlaces y álbumes.
Hay también una serie de elementos que puedes elegir si mostrarlos o no, que son los siguientes:
Cabecera: muestra un texto y un icono encima del feed. Puedes personalizar el texto y poner el que quieras, elegir entre varios iconos, y personalizar colores, tamaños y espaciados.
Like box: muestra una caja encima o debajo del feed que permite a los usuarios dar me gusta a tu página directamente desde tu web. La caja coge la foto de portada y la foto de perfil de la página de Facebook, con un resultado bastante bueno.
Cargar más: muestra un botón al final del feed para que el usuario pueda cargar más publicaciones, aparte de las que se ven por defecto (que será el número que hayas elegido en la configuración).
Lightbox: por defecto, las imágenes y vídeos se abren en la misma web a modo de popup, pero puedes desactivarlo con esta opción.
Filter Content by String: puedes filtrar publicaciones de dos maneras: o bien, que solo se muestren las publicaciones que incluyan los hashtags, palabras o frases que indiques, o bien, indicar hashtags, palabras o frases que no se deberían mostrar.
En esta pestaña, puedes elegir entre tres formatos diferentes de diseño para mostrar el feed, que varían el tamaño de las publicaciones que se muestran.
Si seleccionas los formatos “Miniatura” o “Half-width”, es recomendable que actives la opción “Always use the Full-width layout when posts are narrow”, que convierte el feed en “Full-width” cuando se muestra en columnas estrechas o el móviles.
También puedes elegir mostrar únicamente una imagen por publicación, en el caso de que algunas publicaciones tengan varias.
Por último, desde esta pestaña también puedes seleccionar qué elementos se mostrarán en el feed. Si quieres que alguno de ellos no se muestre, solo tienes que desactivar su casilla.
Ajustes Style Post
Aquí puedes elegir entre dos formatos más de diseño a la hora de mostrar el feed:
- Regular: muestra todas las publicaciones dentro de un contenedor. Las publicaciones pueden estar separadas por una línea del color y del grosor que quieras.
- Boxed: cada una de las publicaciones están en una “caja”, por lo que la separación entre ellas es más pronunciada. Puedes elegir el color de fondo de las publicaciones, el radio del borde, o añadirles una sombra.
Durante las siguientes opciones de esta pestaña, puedes personalizar los diferentes elementos de cada publicación que se muestran en el feed:
Autor, texto, descripción, fecha, enlaces, títulos, “me gustas”, compartidos, comentarios, etc.
En la siguiente pestaña “Misc” hay opciones avanzadas, en las cuales no me voy a adentrar porque para la mayoría de los usuarios no es necesario tocarlas.
Mostrar el feed de Facebook en tu web
Bien, pues una vez configurado el feed, vamos a ver cómo puedes mostrarlo en el lugar que quieras de tu web.
Para ello, lo único que tienes que hacer es copiar y pegar el siguiente shortcode:
[custom-facebook-feed]
Puedes ponerlo en cualquier lugar de una de tus páginas o entradas de WordPress, o puedes insertarlo en alguna zona de widget utilizando el widget “HTML” y pegando el shortcode ahí.
A diferencia del plugin de Instagram, Custom Facebook Feed Pro no incluye un widget propio para mostrar tu feed de Facebook, pero simplemente utilizando el shortcode es suficiente 🙂
Conclusión sobre Custom Facebook Feed Pro
Una vez más después de haber probado este plugin de Smash Balloon, he de decir que cumple de sobras con todo lo que se espera. Se nota que trabajan bien sus plugins porque el resultado utilizando cada uno de ellos es completamente satisfactorio.
Por cierto, si quieres ver ejemplos de cómo queda el feed según el tipo de publicaciones que quieras mostrar, puedes ver unas cuantas demos aquí.
Como verás, tanto el diseño como sus funcionalidades son realmente buenos, por lo que te recomiendo hacerte con él si quieres mostrar tu feed de Facebook de la mejor manera posible.
Si te ha convencido su funcionamiento, puedes comprarlo directamente en su web, y por supuesto, te espero en los comentarios para comentar tus impresiones sobre él 🙂
Y si te interesa saber cómo mostrar el feed de Twitter, aquí te dejo con el artículo.
