Cómo crear un feed de Facebook personalizado en WordPress

¿Quieres crear un feed de Facebook personalizado en WordPress?

Un feed personalizado le permite mostrar publicaciones de su página o grupo de Facebook en su sitio web de WordPress. Esto puede hacer que su sitio sea más atractivo y alentar a los visitantes a seguirlo en Facebook.

En este artículo, le mostraremos cómo crear fácilmente un feed de Facebook personalizado en WordPress.

¿Por qué crear un feed de Facebook personalizado en WordPress?

Con casi 3 mil millones de usuarios activos mensuales, Facebook es el sitio de redes sociales más grande del mundo. Como propietario de un sitio web, es posible que ya haya creado una página o un grupo de Facebook donde interactúa con su audiencia.

Sin embargo, las personas que solo visitan su sitio web no verán sus publicaciones de Facebook. Al agregar un feed de Facebook personalizado, puede mostrar a los visitantes lo que sucede en su grupo o página.

Esto puede hacer que su sitio web sea más atractivo e interesante, especialmente si publica contenido multimedia en Facebook, como videos e imágenes.

También es una excelente manera de promocionar su página o grupo de Facebook, lo que lo ayudará a obtener más Me gusta en Facebook y aumentar sus seguidores.

Si está utilizando el píxel de remarketing/retargeting de Facebook en su sitio web, también puede mostrar anuncios dirigidos a sus visitantes.

Habiendo dicho eso, veamos cómo agregar un feed personalizado de Facebook a su sitio de WordPress.

Instalación de un complemento de feed de Facebook personalizado

La mejor manera de agregar un feed personalizado de Facebook a su sitio web de WordPress es mediante el complemento Smash Balloon Custom Facebook Feed.

Este complemento le permite mostrar contenido y comentarios de Facebook directamente en su sitio, e incluso combinar publicaciones de múltiples fuentes de Facebook. También facilita la visualización de pruebas sociales poderosas al incorporar reseñas de Facebook y publicaciones de la comunidad en su sitio web.

Lo primero que debe hacer es instalar y activar el complemento Feed de Facebook personalizado de Smash Balloon. Para obtener más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

En esta publicación, usaremos la versión pro de Smash Balloon, ya que le permite mostrar videos y fotos en su feed de Facebook, elegir diferentes diseños, filtrar su feed según el tipo de publicación y más.

Sin embargo, también hay una versión gratuita que te permite crear un feed de Facebook personalizado para WordPress, sin importar tu presupuesto.

Tras la activación, deberá ir a Facebook Feed » Configuración e ingresar su clave de licencia en el campo 'Clave de licencia'.

Encontrarás esta información debajo de tu cuenta en el sitio web de Smash Balloon.

Después de ingresar la clave, haga clic en el botón 'Activar'.

Conecte su página o grupo de Facebook a WordPress

Smash Balloon Custom Facebook Feed te permite crear múltiples feeds desde tus diferentes páginas y grupos de Facebook. Incluso puede fusionar fuentes para crear una fuente personalizada.

Para crear su primer feed, vaya a Facebook Feed » Todos los feeds y luego haga clic en 'Agregar nuevo'.

Smash Balloon te permite mostrar publicaciones de tu línea de tiempo, fotos, videos, álbumes, eventos y más. Para esta guía, crearemos un feed de Facebook de 'Cronología', pero puede seleccionar cualquier tipo de feed que desee.

Después de elegir un tipo de fuente, haga clic en el botón 'Siguiente'.

Ahora, debe seleccionar la página o el grupo de Facebook de donde obtendrá el contenido.

Para comenzar, haga clic en 'Agregar nuevo'.

En la siguiente pantalla, elija si está creando una fuente desde una página o un grupo de Facebook.

Luego, simplemente haga clic en 'Conectarse a Facebook'.

Esto abre una ventana emergente donde puede iniciar sesión en su cuenta de Facebook y elegir las páginas o grupos que desea usar en su feed.

Después de hacer su selección, haga clic en el botón 'Siguiente'.

Una vez hecho esto, Facebook mostrará toda la información a la que tendrá acceso Smash Balloon y las acciones que puede realizar.

Para restringir el acceso de Smash Balloon a su cuenta de Facebook, simplemente haga clic en cualquiera de los interruptores para cambiarlos de 'Sí' a 'No'. Solo tenga en cuenta que esto puede afectar el contenido que puede mostrar en el feed personalizado de Facebook.

Con eso en mente, recomendamos dejar todos estos interruptores habilitados.

Cuando esté listo, haga clic en 'Listo'.

Después de unos momentos, debería ver un mensaje de que ha vinculado con éxito su sitio web de WordPress a Facebook. Ahora puede hacer clic en 'Aceptar'.

Una vez hecho esto, Smash Balloon lo regresará al panel de control de WordPress automáticamente.

Cómo crear un feed de Facebook personalizado en WordPress

Ahora verá una ventana emergente con el grupo o la página que acaba de vincular a su sitio web de WordPress. Simplemente seleccione el botón de radio junto a su fuente y luego haga clic en el botón 'Agregar'.

Si accidentalmente cerró la ventana emergente, no entre en pánico. Simplemente puede actualizar la pestaña para volver a abrir la ventana emergente.

Una vez que haya hecho eso, volverá a la página Feed de Facebook » All Feeds .

Al igual que antes, haga clic en el botón 'Agregar nuevo' y luego elija el tipo de feed personalizado de Facebook que desea crear, como Línea de tiempo, Fotos o Videos.

Luego, haga clic en 'Siguiente'. Ahora, en 'Seleccione una fuente', verá su grupo o página de Facebook como una opción.

Continúe y seleccione la página o el grupo, y luego haga clic en 'Siguiente'.

Ahora puede elegir la plantilla que desea utilizar como punto de partida para su feed. Todas estas plantillas son totalmente personalizables, por lo que puede ajustarlas para que se ajusten perfectamente a su blog o sitio web de WordPress.

Usaremos la plantilla 'Predeterminada', pero puede usar cualquier plantilla que desee.

Después de elegir un diseño, haga clic en el botón 'Siguiente'.

Smash Balloon ahora seguirá adelante y creará un feed de Facebook basado en su fuente y la plantilla elegida. Este es un gran comienzo, pero es posible que desee ajustar cómo aparece este feed en su sitio web.

Cómo personalizar tu feed de Facebook

El complemento Smash Balloon Custom Facebook Feed te ofrece muchas formas de personalizar tu feed. Con eso en mente, vale la pena ver qué cambios puede hacer.

En la pantalla Feed de Facebook » All Feeds , busca el feed que acabas de crear y haz clic en su botón 'Editar', que parece un lápiz pequeño.

Esto abre el editor de fuentes, que muestra una vista previa de cómo se verá la fuente personalizada de Facebook en su sitio web.

En el lado izquierdo, verá todas las diferentes configuraciones que puede usar para personalizar el feed. La mayoría de estas configuraciones se explican por sí mismas, pero cubriremos rápidamente algunas áreas clave.

Para comenzar, puede cambiar la forma en que se muestran sus publicaciones haciendo clic en 'Diseño de fuente'.

En esta pantalla, puede cambiar entre diferentes diseños, como mampostería y lista, y cambiar la altura de alimentación. A medida que realice cambios, la vista previa se actualizará automáticamente para que pueda probar diferentes configuraciones para ver qué funciona mejor para su sitio web.

De forma predeterminada, el feed mostrará la misma cantidad de publicaciones en computadoras de escritorio y dispositivos móviles, como teléfonos inteligentes.

Sin embargo, los dispositivos móviles suelen tener pantallas más pequeñas y menos capacidad de procesamiento, por lo que es posible que desee mostrar menos publicaciones en tabletas y teléfonos inteligentes. Para hacer esto, simplemente ingrese un número diferente en el campo 'Móvil' debajo de 'Número de publicaciones'.

Puede obtener una vista previa de cómo se verán sus cambios en computadoras de escritorio, tabletas y teléfonos inteligentes usando la fila de botones en la esquina superior derecha.

Al probar diferentes diseños, puede crear un feed personalizado que se vea genial, sin importar qué dispositivo esté usando el visitante.

De forma predeterminada, el feed de Facebook muestra menos columnas en teléfonos inteligentes y tabletas, en comparación con las computadoras de escritorio. Esto ayuda a que todo su contenido se ajuste cómodamente a pantallas más pequeñas.

Sin embargo, después de probar la versión móvil de su sitio web de WordPress, es posible que no esté satisfecho con el aspecto de las columnas en los teléfonos inteligentes y las tabletas. Si este es el caso, puede ajustar las columnas cambiando los números en la sección 'Columnas'.

Cuando esté satisfecho con los cambios que ha realizado, haga clic en el enlace 'Personalizar' en la parte superior del menú.

Esto te llevará de vuelta al editor principal de Smash Balloon.

A continuación, puede hacer clic en 'Esquema de colores' en el menú de la izquierda y echar un vistazo a los diferentes colores que puede agregar al feed de Facebook.

De forma predeterminada, Smash Balloon usa un esquema de color heredado de su tema de WordPress, pero también puede elegir 'Claro' u 'Oscuro', o incluso crear su propio esquema de color personalizado.

De forma predeterminada, Smash Balloon agrega un encabezado a tu feed, que es tu foto de perfil de Facebook y el nombre de tu página o grupo.

Para cambiar su aspecto, haga clic en 'Encabezado' en el menú de la izquierda.

En esta pantalla, puede cambiar el tamaño y el color del encabezado, ocultar o mostrar su foto de perfil de Facebook y más.

Si desea eliminar el encabezado por completo, haga clic en el interruptor para cambiarlo de azul (habilitado) a gris (deshabilitado).

Lo siguiente es la pantalla 'Publicaciones'. Aquí, puede cambiar cómo se muestran las publicaciones individuales dentro del feed personalizado de Facebook.

Por ejemplo, puede alternar entre estilos normales y en caja, cambiar el color de fondo, agregar una sombra en caja y más.

De forma predeterminada, Smash Balloon no incluye el botón "Me gusta" de Facebook en su feed.

Para alentar a más visitantes a seguir su página de Facebook, puede agregar este botón seleccionando 'Me gusta' en el menú de la izquierda del editor.

Después de eso, simplemente haga clic en el botón 'Habilitar' para que se vuelva azul. Ahora, si se desplaza hasta la parte inferior de la vista previa, verá un botón "me gusta".

Puede diseñar esta área usando diferentes configuraciones. Por ejemplo, puede elegir si el botón aparece en la parte superior o inferior del feed y si desea incluir la foto de portada de su página de Facebook.

Cuando esté satisfecho con el aspecto del botón "Me gusta", puede pasar a la pantalla "Cargar más botón".

El botón 'Cargar más' alienta a los visitantes a desplazarse por más de su feed de Facebook.

Por este motivo, es posible que desee que el botón sea más llamativo cambiando el color de fondo, el color del texto y la etiqueta.

Otra opción es eliminar completamente el botón 'Cargar más' haciendo clic en el botón 'Habilitar' para que se atenúe.

Deshabilitar el botón 'Cargar más' es útil si su feed de Facebook es sensible al tiempo. Por eso, los visitantes no necesitan desplazarse por sus publicaciones anteriores que no se aplican a ellos.

Cuando esté satisfecho con la configuración del feed personalizado de Facebook, no olvide hacer clic en "Guardar" para guardar los cambios.

Ahora está listo para agregar el feed de Facebook a su sitio web de WordPress.

Cómo agregar su feed personalizado de Facebook a WordPress

Puede agregar su feed de Facebook personalizado usando un bloque, un widget o un código abreviado.

Si ha creado más de una fuente personalizada, necesitará conocer el código de la fuente si va a utilizar un bloque o un widget.

Simplemente vaya a Facebook Feed » All Feeds y luego mire la parte feed="" del shortcode. Este es el valor que deberá agregar al bloque o widget, así que anótelo.

En la siguiente imagen, necesitaremos usar feed="1" .

Para usar este shortcode en una página o publicación, puede usar el bloque 'Feed personalizado de Facebook' en el editor de contenido.

Simplemente abra la página o publicación donde desea mostrar el feed. Luego, haga clic en el ícono '+' para agregar un nuevo bloque y comience a escribir 'Feed personalizado de Facebook'.

Cuando aparezca el bloque correcto, haz clic para agregarlo a tu página o publicación.

El bloque mostrará uno de sus feeds de forma predeterminada. Si desea utilizar un feed diferente en su lugar, simplemente busque 'Configuración de código corto' en el menú de la derecha.

Ahora puede agregar el código feed="" a este cuadro. Después de eso, haga clic en 'Aplicar cambios'.

El bloque ahora mostrará su feed de Facebook personalizado, y puede publicar o actualizar la página para que esté activa en su sitio web.

Otra opción es agregar el feed a cualquier área lista para widgets, como la barra lateral o una sección similar. Esta es una manera fácil de mostrar el feed de Facebook personalizado en todo tu sitio.

Para comenzar, vaya a Apariencia » Widgets en el panel de control de WordPress. Luego, haga clic en el botón azul '+'.

Ahora puede encontrar el widget 'Feed personalizado de Facebook'.

Luego, simplemente arrástrelo al área donde desea mostrar el feed.

Una vez más, Smash Balloon mostrará uno de sus feeds personalizados de Facebook de forma predeterminada.

Para mostrar un feed diferente, escriba el código del feed en el cuadro 'Configuración de código abreviado' y luego haga clic en 'Aplicar cambios'.

Ahora puede hacer clic en el botón 'Actualizar'.

Para obtener más información, consulte nuestra guía paso a paso sobre cómo agregar y usar widgets en WordPress.

Finalmente, puede agregar el feed personalizado a cualquier página, publicación o listo para widgets usando un código abreviado.

Simplemente vaya a Facebook Feed » All Feeds y copie el código en la columna 'Shortcode'. Ahora puede agregar este código a su sitio.

Para obtener más información sobre cómo colocar el código abreviado, consulte nuestra guía sobre cómo agregar un código abreviado en WordPress.

Esperamos que este artículo te haya ayudado a agregar un feed personalizado de Facebook en WordPress. También puede consultar nuestra guía sobre cómo agregar notificaciones push web a su sitio de WordPress, o consultar nuestra lista de los mejores complementos de prueba social.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.