Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo crear un feed de Facebook personalizado en WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres crear un feed de Facebook personalizado en WordPress?

Un feed personalizado te permite mostrar entradas de tu página o grupo de Facebook en tu sitio web de WordPress. Esto puede hacer que tu sitio sea más participativo y animar a los visitantes a seguirte en Facebook.

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

How to create a custom Facebook feed in WordPress

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

Según nuestro informe de estadísticas de marketing, Facebook tiene más de 2.900 millones de usuarios activos mensuales. Esto lo convierte en el mayor sitio de medios sociales del mundo. Como propietario de un sitio web, es posible que ya hayas creado una página o un grupo en Facebook en el que participas con tu público.

Sin embargo, las personas que solo visiten tu sitio web no verán tus entradas de Facebook. Si añades un feed de Facebook personalizado, podrás mostrar a los visitantes lo que ocurre en tu grupo o página.

Esto puede hacer que tu sitio web sea más atractivo e interesante, especialmente si publicas contenido multimedia en Facebook, como vídeos e imágenes.

A custom Facebook feed in WordPress, created with Smash Balloon

También es una forma estupenda de promocionar tu página o grupo de Facebook, lo que te ayudará a conseguir más “me gusta” en Facebook y a aumentar el número de seguidores.

Dicho esto, veamos cómo añadir un feed de Facebook personalizado a tu sitio de WordPress:

Paso 1: Instala el plugin Smash Balloon Custom Facebook Feed.

La mejor manera de añadir un feed personalizado de Facebook a tu sitio web WordPress es utilizando el plugin Smash Balloon Custom Facebook Feed.

Este plugin te permite mostrar contenido y comentarios de Facebook directamente en tu sitio e incluso combinar entradas de varios feeds de Facebook. También facilita la visualización de potentes pruebas sociales incrustando reseñas / valoraciones de Facebook y entradas de la comunidad en tu sitio web.

Lo primero que tienes que hacer es instalar y activar el plugin Smash Balloon Custom Facebook Feed. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

En esta entrada, vamos a utilizar la versión pro de Smash Balloon, ya que te permite mostrar vídeos y fotos en tu feed de Facebook, elegir diferentes disposiciones, filtrar tu feed en función del tipo de entradas y mucho más.

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

Tras la activación, tendrás que ir a Facebook Feed ” Ajustes e introducir tu clave de licencia en el campo “Clave de licencia”.

Adding a license key to Smash Balloon

Encontrará esta información en su cuenta del sitio web de Smash Balloon.

Tras introducir la clave, basta con hacer clic en el botón “Activar”.

Paso 2: Conecta tu 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 puedes combinar feeds para crear un feed personalizado.

Para crear tu primera feed, ve a Facebook Feed ” Todas las feeds y, a continuación, haz clic en “Añadir nuevo”.

Adding a Facebook social media feed to WordPress

Smash Balloon te permite mostrar álbumes de Facebook, entradas de tu línea de tiempo, vídeos, eventos y mucho más. En esta guía, crearemos un feed de Facebook “Timeline”, pero puedes seleccionar el tipo de feed que desees.

Después de elegir un tipo de feed, haga clic en el botón “Siguiente”.

How to add a Facebook timeline to your website

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

Para empezar, haz clic en “Añadir nuevo”.

Adding your Facebook group or page as a source

En la siguiente pantalla, elige si quieres incrustar un feed de grupo de Facebook en WordPress o crear un feed a partir de una página de Facebook.

A continuación, basta con hacer clic en “Conectar con Facebook”.

Connecting Smash Balloon to your Facebook group or page

Se abre una ventana emergente en la que puedes acceder a tu cuenta de Facebook y elegir las páginas o grupos que quieres utilizar en tu feed.

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

Connecting Facebook and WordPress with Smash Balloon

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

Para restringir el acceso de Smash Balloon a tu cuenta de Facebook, simplemente haz clic en cualquiera de los interruptores para cambiarlos de “Sí” a “No”. Ten en cuenta que esto puede afectar al contenido que puedes mostrar en el feed de medios sociales.

Teniendo esto en cuenta, recomendamos dejar activados todos estos interruptores.

Giving WordPress access to your Facebook group or page

Cuando esté listo, haga clic en “Listo”.

Al cabo de unos instantes, aparecerá un mensaje que te indicará que has enlazado correctamente tu sitio web de WordPress con Facebook. Ahora puedes hacer clic en “Aceptar”.

How to create a custom Facebook feed in WordPress

Una vez hecho esto, Smash Balloon le devolverá automáticamente al escritorio de WordPress.

Paso 3: Crear un feed de Facebook personalizado en WordPress

Ahora verás un mensaje / ventana emergente con el grupo o página que acabas de enlazar a tu sitio web WordPress. Simplemente seleccione el botón de opción siguiente a su fuente y luego haga clic en el botón “Añadir”.

Using Facebook as a source for your custom feed

Si has cerrado accidentalmente el mensaje / ventana emergente, que no cunda el pánico. Sólo tienes que actualizar la pestaña para volver a abrir el mensaje / ventana emergente.

Una vez hecho esto, volverás a la página “Todos los feeds” de Facebook.

Al igual que antes, haz clic en el botón “Añadir nuevo” y, a continuación, elige el tipo de feed de Facebook personalizado que deseas crear, como Timeline, Fotos o Vídeos.

A continuación, haz clic en “Siguiente”. Ahora, en “Seleccionar una fuente”, verás tu grupo o página de Facebook como opción.

Creating a new custom Facebook feed in WordPress

Seleccione la página o el grupo y, a continuación, 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 puedes ajustarlas para que se adapten perfectamente a tu blog o sitio web de WordPress.

Utilizaremos la plantilla ‘Por defecto’, pero puede utilizar cualquier plantilla que desee.

Choosing a Smash Balloon template

Tras elegir un diseño, haga clic en el botón “Siguiente”.

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

Paso 4: Personaliza tu feed de Facebook

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

En la pantalla “Todos los feeds” de Facebook, busca el feed que acabas de crear y haz clic en su botón “Editar”, que parece un pequeño lápiz.

Editing your social media feed

Se abre el editor de feeds, que muestra una vista previa del aspecto que tendrá el feed personalizado de Facebook en tu sitio web. Aquí puedes ver todos los vídeos de Facebook incrustados, las actualizaciones de estado y otros contenidos que aparecerán en tu sitio web de WordPress.

En la parte izquierda verás todos los ajustes que puedes utilizar para personalizar el feed. La mayoría de estos ajustes se explican por sí mismos, pero cubriremos rápidamente algunas áreas clave.

The Smash Balloon editor

Para empezar, puedes cambiar cómo se muestran tus entradas al hacer clic en “Disposición del feed”.

En esta pantalla, puede cambiar entre distintas disposiciones y modificar la altura del feed. Incluso puede crear un carrusel / control deslizante adaptable seleccionando la disposición “Carrusel”.

A medida que realice cambios, la vista previa se actualizará automáticamente, de modo que podrá probar diferentes ajustes para ver qué funciona mejor para su sitio web.

Choosing a layout for your custom Facebook feed

Por defecto, el feed mostrará el mismo número de entradas en ordenadores de sobremesa y en dispositivos móviles como smartphones.

Sin embargo, los dispositivos móviles suelen tener pantallas más pequeñas y menos capacidad de procesamiento, por lo que es posible que quieras mostrar menos entradas en tablets y smartphones. Para ello, solo tienes que introducir un número diferente en el campo “Móvil”, debajo de “Número de entradas”.

Creating a mobile-friendly layout for your website

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

Al probar diferentes disposiciones, puede crear un feed personalizado que tenga un aspecto excelente, independientemente del dispositivo que utilice el visitante.

Previewing your website's mobile layout with Smash Balloon

Por defecto, el feed de Facebook muestra menos columnas en smartphones y tabletas que en ordenadores de sobremesa. Esto ayuda a que todo tu contenido quepa cómodamente en pantallas más pequeñas.

Sin embargo, después de probar la versión móvil de tu sitio web en WordPress, es posible que no estés satisfecho con el aspecto de las columnas en smartphones y tabletas. Si es así, puedes ajustar las columnas cambiando los números de la sección “Columnas”.

Changing the number of columns in your social media feed

Cuando esté satisfecho con los cambios realizados, haga clic en el enlace “Personalizar” situado en la parte superior del menú.

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

Returning to the Smash Balloon customize screen

A continuación, puedes hacer clic en“Combinación de colores” en el menú de la izquierda y echar un vistazo a los diferentes colores que puedes añadir al feed de Facebook.

Por defecto, Smash Balloon utiliza 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.

Changing the color scheme of the social media feed

Por ejemplo, puede cambiar el color del texto para que destaque sobre el fondo del tema.

Por defecto, Smash Balloon añade una cabecera a tu feed, que es tu foto de perfil de Facebook y el nombre de tu página o grupo. Esto puede añadir algo de contexto adicional, en lugar de simplemente mostrar tu cronología de Facebook en WordPress.

Para cambiar el aspecto, haga clic en “Cabecera” en el menú de la izquierda.

Customizing the header layout with Smash Balloon

En esta pantalla, puedes cambiar el tamaño y el color de la cabecera, ocultar o mostrar tu foto de perfil de Facebook, etc.

Si desea quitar la cabecera por completo, haga clic en el conmutador para pasar de azul (activado) a gris (desactivado).

Removing the header from your custom Facebook feed

La siguiente pantalla es la de “Entradas”. Aquí puedes cambiar el aspecto de las entradas individuales dentro del feed personalizado de Facebook.

Por ejemplo, puede alternar entre los estilos normal y recuadrado, cambiar el color de fondo, añadir una sombra de recuadro, etc.

How to style your custom social media feed in WordPress

Por defecto, Smash Balloon no incluye el botón “Me gusta” de Facebook en tu feed.

Para animar a más visitantes a seguir tu página de Facebook, puedes añadir este botón seleccionando “Me gusta” en el menú de la izquierda del editor.

Después, sólo tienes que hacer clic en el botón “Activar” para que se vuelva azul. Ahora, si te desplazas hasta la parte inferior de la vista previa, verás un botón de “Me gusta”.

Adding a 'like' button to your Facebook feed

Puedes configurar esta zona con distintos ajustes. Por ejemplo, puedes elegir si el botón aparece en la parte superior o inferior del feed y si quieres incluir la foto de portada de tu página de Facebook.

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

Customizing the Load More Button

El botón “Cargar más” anima a los visitantes a desplazarse por más partes de tu feed de Facebook.

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

Changing the color scheme of your social media feed

Otra opción es quitar completamente el botón “Cargar más” haciendo clic en el conmutador “Activar” para que se vuelva gris.

Desactivar el botón “Cargar más” es útil si tu feed de Facebook es sensible al tiempo. Por ejemplo, si publicas principalmente sobre tu calendario de eventos de Facebook, puede que los visitantes no necesiten desplazarse por tus entradas anteriores porque ya no son relevantes.

Cuando estés satisfecho con cómo se ha establecido el feed personalizado de Facebook, no olvides hacer clic en “Guardar” para guardar los cambios.

Ya puedes añadir el feed de Facebook a tu sitio web WordPress.

Saving your changes in Smash Balloon

Paso 5: Añade tu feed personalizado de Facebook a WordPress

Para añadir tu feed personalizado de Facebook a WordPress, haz clic en el botón “Incrustar” situado al lado de “Guardar.

Clicking the Embed button in the Smash Balloon Facebook Feed plugin

Ahora verás dos opciones para añadir tu feed de Facebook: shortcode o bloque.

Según nuestra experiencia, es más fácil insertar tu feed de Facebook utilizando un bloque. Para ello, puedes hacer clic en “Añadir a una página” o en “Añadir a un widget” si tu tema tiene un área preparada para widgets.

Nuestra guía utilizará el botón Añadir a una página a modo de ejemplo.

Seeing the Embed Feed popup when creating a Facebook Feed using Smash Balloon

Ahora, tendrás que elegir una página en la que insertar el feed de Facebook.

Sólo tienes que seleccionar uno y hacer clic en “Añadir”.

Choosing a page to embed the Facebook Feed to with Smash Balloon

Se te redirigirá al editor de bloques. A continuación, haz clic en el botón “+ Añadir bloque” y busca el bloque Facebook Feed.

En este punto, puedes arrastrar y soltarlo donde mejor te parezca.

Adding the Facebook Feed in the block editor

Una vez hecho esto, sigue adelante y selecciona una fuente de feed de Facebook.

Así:

Choosing a Facebook feed source using the Smash Balloon block

Ahora debería aparecer tu feed de Facebook.

Basta con hacer clic en “Actualizar” para hacer oficiales los cambios.

Updating the block editor after adding a Facebook feed using Smash Balloon

Si desea utilizar el método shortcode, puede copiar el shortcode de la ventana emergente “Incrustar feed”.

A continuación, sólo tienes que pegar el shortcode en un bloque de shortcode en el editor de contenido al editar una página, entradas o widget. Una vez hecho esto, haz clic en “Actualizar”.

Para obtener más información sobre cómo colocar el shortcode, consulte nuestra guía sobre cómo añadir un shortcode en WordPress.

Adding a Smash Balloon Facebook Feed shortcode in the block editor

Sugerencia adicional: Cómo añadir más feeds de medios sociales a WordPress

Si quieres incrustar entradas de estado de Facebook en WordPress, mostrar tu cronología, mostrar álbumes de Facebook y mucho más, el plugin Custom Facebook Feed es una gran elección.

Sin embargo, muchos sitios web tienen varias cuentas en medios sociales, como un canal de YouTube, un perfil de Twitter y una cuenta de Instagram. Si creas contenido único para cada plataforma, entonces tiene sentido mostrar este contenido en tu sitio web WordPress.

Puedes mostrar los últimos vídeos de tu canal de YouTube en WordPress utilizando el plugin gratuito Smash Balloon Feeds for YouTube.

How to embed YouTube videos in WordPress

Con más de mil millones de usuarios activos al mes, Instagram es un lugar ideal para promocionar tus productos, servicios y entradas de blog.

Si tienes una cuenta de Instagram, puedes crear un feed de fotos de Instagram personalizado y añadirlo a cualquier página, entrada o área preparada para widgets. Incluso puedes añadir imágenes de Instagram shoppable en WordPress.

An example of a shoppable Instagram image in WordPress

Esperamos que este artículo te haya ayudado a añadir un feed de Facebook personalizado en WordPress. También puedes consultar nuestra guía sobre cómo añadir avisos instantáneos a tu sitio de WordPress o comprobar nuestra lista de los mejores plugins de prueba social.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

10 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Darknote says

    Hi,
    Putting the page ID does not work, you will get on debug, it is indicated in error

    developers.facebook.com/tools/debug/

    You absolutely have to create a Facebook apps, the only good method!

  3. RickH says

    Any plugin that will grab a FB ‘status’ from a personal (publicly visible) FB account into a separate post? So that each new status will create a new post?

    Thanks…

  4. Anthony says

    Thanks for this article. Have tried and success but i use this tool to find facebook ID, it can find group id and page id too

  5. Shubha das says

    Thanks for sharing this post. Please let me know if free plugin are available for creating custom facebook feed.

    • melanie martins says

      Facebook feed by arrow is free, though i would love to see a tutorial to create my own facebook feed “plugin”

  6. Munna Hossain says

    Great sharing. I am new in WordPress. I don’t know everything about WordPress. Your article will help to create custom facebook feed in my WordPress site. Thank you for sharing such an informative article.

  7. Tracy TC says

    Do you recognize the feed on the homepage of I like the fact that it includes thumbnail pictures from each post. I find that more visually interesting than showing my logo over and over in the feed. I don’t control that area of the website (although I do know that it is WP) and the host has no interest in sharing which plugin is used.

    Thank you!!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.