¿Estás buscando una forma sencilla de integrar eventos de Facebook en WordPress?
Over 200 million businesses use Facebook to reach their target audiences. Yet, visitors can easily miss your events if you don’t add them to your website.
That’s why in this guide, I’ll show you how to embed Facebook page events on your WordPress site. By the end, you’ll have an events feed that improves your reach and engagement.
¿Por qué integrar eventos de Facebook en WordPress?
Embedding Facebook Events on WordPress increases visibility by displaying your events directly on your site. It saves time by syncing updates automatically, builds excitement through RSVP options, and boosts credibility by showing social proof. Customization options ensure the display matches your website’s design.
Cómo integrar eventos de Facebook en WordPress
In this guide, I’ll share three ways to put Facebook events on your WordPress website:
- Make a special events page. This is like having a VIP section on your website just for events. It helps people find and sign up for events easily.
- Use a tool that grabs your events from Facebook. This tool acts like a bridge, pulling your events onto any page of your website. Plus, you can change how the events look to match your style.
- Add a snippet of code (if you’re comfortable with that). Facebook lets you grab a bit of code to put events directly on your site. This is the simplest way, but it doesn’t give you many options to make them look nice.
¿Qué método le conviene?
Si le cuesta elegir un método, aquí tiene una tabla comparativa con los pros y los contras de cada uno:
| Método | Características | Facilidad de uso | Precios | Mobile-Friendly | Free Version? | Free Version Limits |
|---|---|---|---|---|---|---|
| SeedProd | Landing pages, Facebook integrations | Easy | Paid/Free | Sí | Sí | Limited features, Facebook Page block requires paid |
| Globo Smash | Customizable Facebook feeds | Moderado | Paid/Free | Sí | Sí | Funciones limitadas |
| Incrustación manual (código) | Basic event display | Difficult | Gratis | Maybe | Sí | Very limited, needs coding knowledge |
Now let’s jump in.
Método 1. Insertar eventos de Facebook en WordPress con SeedProd
SeedProd is a popular drag-and-drop WordPress page builder, with coming soon and maintenance mode functionality. You can use this plugin to create high-converting landing pages without writing CSS and PHP code or hiring a developer.
Si has oído hablar de Elementor, funciona igual pero con una interfaz de usuario más ágil y centrada en la simplicidad.
No sólo puedes utilizar cientos de plantillas nada más sacarlo de la caja, sino que también incluye toneladas de bloques de contenido diseñados para generar clientes potenciales para tu negocio.
Lo más destacable son los bloques de Facebook, que permiten incrustar contenidos de redes sociales, entre otros:
- Facebook Like Button
- Comentarios en Facebook
- Página de Facebook
- Insertar en Facebook
Para este método utilizaremos el bloque de página de Facebook para añadir eventos directamente en tu página de destino. La mejor parte es que no hay tokens de acceso, shortcodes o IDs para copiar y pegar.
1. Instalar y activar SeedProd
Para empezar, instala y activa el plugin SeedProd. Para esta guía, usaremos SeedProd Pro porque tiene los bloques avanzados de Facebook que necesitamos.
2. Crear una página de destino en WordPress
Después de instalar SeedProd en su sitio web WordPress, tendrá que crear una nueva página de destino.
Por suerte, puedes seguir esta guía paso a paso sobre cómo crear una página de aterrizaje en WordPress para empezar rápidamente.
Una vez que el diseño de su página de destino está en su lugar, navegue a SeedProd " Páginas y haga clic en Editar en la página de destino que hizo siguiendo nuestro tutorial.
Se abrirá el editor visual de SeedProd, donde podrá añadir sus eventos.
3. Añadir el bloque de página de Facebook
A continuación, busca un espacio en tu página donde quieras mostrar tu calendario de eventos de Facebook. A continuación, ve a la sección Bloques avanzados de la derecha y busca el bloque Página de Facebook.
Para añadir este bloque a su página, arrástrelo desde la izquierda a la vista previa.
A continuación, en la configuración del contenido del bloque de la página de Facebook, puedes añadir la URL de tu página de Facebook.
Por defecto, SeedProd muestra automáticamente la línea de tiempo de su página de Facebook. Para mostrar sus eventos en su lugar, haga clic en la opción Eventos bajo el encabezado Pestañas.
En el mismo panel, también puedes cambiar el estilo de la cabecera, mostrar u ocultar tu foto de portada, ajustar la alineación, etc.
Y si quieres aumentar la participación en tu página de Facebook, puedes utilizar el bloque de incrustación de Facebook para incrustar una publicación, un vídeo de Facebook o un comentario junto a la programación de tus eventos.
4. Publique su página de destino
Sólo queda hacer clic en la flecha desplegable junto al botón Guardar en la esquina superior derecha y hacer clic en Publicar.
A continuación, cuando haga clic en Vista previa, verá su calendario de eventos en directo en su página de destino.
Ya está. Los visitantes de tu sitio web ya pueden ver tus eventos de Facebook en tu página de destino.
Pero si quieres mostrar un feed de eventos de Facebook completo, te sugerimos que pruebes el siguiente método.
Método 2. Incrustar Facebook Feed en WordPress con Smash Balloon
Necesitarás instalar y activar el plugin Smash Balloon Custom Facebook Feed Pro para este método. Si necesitas ayuda con este paso, consulta este tutorial paso a paso sobre cómo instalar un plugin de WordPress.
1. Crear un nuevo feed de Facebook
Después de instalar y activar el plugin, ve al menú Facebook Feed " All Feeds desde tu panel de control de WordPress. Desde allí, haz clic en el botón Añadir nuevo para empezar a crear tu feed de eventos.
En la página siguiente, verás 9 tipos diferentes de feeds de Facebook que puedes añadir a tu sitio web, entre los que se incluyen:
- Cronología
- Fotos
- Vídeos
- Álbumes
- Eventos
- Reseñas
- Y más
Elija la opción Eventos y pulse el botón Siguiente para continuar.
2. Seleccione una fuente de página de Facebook
After selecting a feed type, it’s time to choose a Facebook page source. This can be a Facebook group or a page where you post your business’s events.
Para añadir una fuente, pulse el botón Añadir nueva.
Se abrirá una ventana emergente en la que se te pedirá el ID de tu página de Facebook y el código de acceso al evento.
If you’re unsure how to find the app ID and app secret token for your page, follow these instructions.
Tras introducir los datos de tu aplicación de Facebook, haz clic en el botón Añadir fuente.
En la siguiente pantalla, verás tu página de Facebook recién añadida. Selecciona esa página y haz clic en Siguiente para continuar.
3. Personaliza el diseño de tu calendario de eventos de Facebook
Ahora puedes empezar a personalizar tus eventos. Las opciones de personalización se encuentran a la izquierda, mientras que a la derecha aparece una vista previa de tu feed.
Las opciones de personalización te permiten cambiar el tipo de fuente, el diseño, el color, el diseño de la cabecera, el diseño de la entrada y mucho más.
En primer lugar, elija a la izquierda la opción Diseño de la fuente.
Esta opción ofrece 3 configuraciones diferentes: lista, albañilería y carrusel.
Para mostrar los eventos uno tras otro, elija la opción Diseño de lista.
También puede seleccionar la opción Mampostería si prefiere mostrar sus eventos en un diseño de varias columnas.
Por último, está la opción Carrusel, que te permite mostrar tus eventos en un impresionante deslizador de imágenes.
Seleccione el diseño que mejor se adapte a su sitio web. A continuación, haga clic en el botón Personalizar una vez más para volver a la configuración anterior.
4. Personaliza la combinación de colores de tu feed de eventos de Facebook
Si quieres cambiar el color de tu feed, haz clic en el encabezado Esquema de colores. En este panel, puedes elegir entre 4 opciones de color diferentes, como:
- Heredar del Tema: Copiar el esquema de color de su sitio web
- Claro: Tener un fondo claro con texto de color oscuro.
- Oscuro: oscurece el fondo con texto de color claro.
- Personalizados: Introduzca usted mismo todos los colores
Después, puedes personalizar otros ajustes, como el diseño de la cabecera, el tamaño de la fuente, los márgenes, etc.
Cuando estés satisfecho con el aspecto de todo, haz clic en el botón Guardar .
5. Mostrar eventos de Facebook en páginas de WordPress
Ahora, estás listo para integrar los eventos de Facebook en tu sitio web de WordPress, y Smash Balloon te permite hacerlo de 2 maneras.
En primer lugar, haga clic en el botón Incrustar de la esquina superior derecha. Se abrirá una ventana emergente con distintas opciones de publicación.
Haz clic en el botón Añadir a una página para incrustar tus eventos de Facebook en una página normal de WordPress.
A partir de ahí, puede elegir cualquier página de su sitio web de la lista y hacer clic en el botón Añadir.
Al hacer clic en esa opción, accederás a la pantalla de edición de la página elegida. Desde allí, haz clic en el icono de signo más (+) y selecciona el widget Custom Facebook Feed.
Cuando actualices o publiques la página, podrás previsualizarla para ver cómo quedan tus eventos.
6. Añadir eventos de Facebook a las barras laterales de WordPress
Si prefieres añadir tu feed a una zona de la barra lateral, sólo tienes que hacer clic en el botón Añadir a un widget de la ventana Incrustar.
Al hacer clic en esa opción, accederás a la página de widgets, donde podrás elegir una barra lateral para mostrar tus eventos.
Después de elegir una barra lateral, haz clic en el icono más (+) para añadir un nuevo widget y elige el widget personalizado de Facebook Feed.
Una vez hecho esto, podrás previsualizar tu sitio web y ver los eventos de Facebook en la barra lateral.
Método 3: Añadir eventos de Facebook a WordPress sin un plugin
Si no te gusta utilizar demasiados plugins de WordPress en tu sitio web, puedes mostrar eventos de Facebook en WordPress sin necesidad de un plugin.
Sin embargo, este método requiere que añadas algo de código a tu sitio, por lo que no es algo que recomendemos a los principiantes. Tampoco ofrece mucho control sobre el aspecto de los eventos.
1. Visita el sitio web del plugin de la página de Facebook.
Para empezar con este método, necesitarás el plugin de página de Facebook. No se trata de un plugin de WordPress, sino de una herramienta independiente de Facebook para desarrolladores.
Así que dirígete a la herramienta Facebook Plugin y pega la URL de tu página de Facebook.
Después de introducir la URL de tu página de Facebook, la herramienta mostrará una vista previa de tu línea de tiempo. Como queremos mostrar tus eventos de Facebook, borra la palabra "timeline" en el campo Pestañas e introduce "eventos".
2. Generar el código de incrustación del evento de Facebook
El panel de vista previa muestra ahora una lista de los eventos de su página. Para obtener el código, haz clic en el botón Obtener código situado debajo de la vista previa.
Al hacer clic en el botón Obtener código se abre una ventana emergente con dos pestañas: JavaScript SDK e IFrame. Haz clic en la pestaña IFrame y copia el código incrustado en el portapapeles.
3. Insertar el código de eventos de Facebook en WordPress
A continuación, dirígete a tu sitio web de WordPress y edita la entrada o página en la que quieres mostrar tus eventos de Facebook.
En la pantalla de edición de la entrada o página, haga clic en el icono más (+) y busque el bloque HTML personalizado de WordPress.
Ahora, haz clic dentro del bloque HTML y pega el código de incrustación de la herramienta del complemento de página de Facebook.
A continuación, puedes guardar o publicar la entrada y, al previsualizarla, tus eventos de Facebook aparecerán en directo en tu sitio web.
Si quieres cambiar cómo se muestra este feed, tendrás que volver al plugin de página de Facebook y generar de nuevo el código wp embed Facebook. Dicho esto, la configuración de Facebook que puedes cambiar es limitada.
Utilización de la URL de iCal para la sincronización de eventos
Si quieres integrar tus eventos de Facebook en el calendario de tu sitio web, utilizar una URL de iCal es un método eficaz.
A continuación te explicamos cómo obtener y utilizar la URL de iCal:
Accede a tu cuenta de Facebook, ve a la sección de eventos y selecciona el evento que quieras compartir.
En la parte superior derecha, verás un botón llamado Añadir al calendario.
Haga clic en este botón y, en la ventana emergente, haga clic con el botón derecho del ratón en el botón Exportar y seleccione "Copiar dirección de enlace".
Añade esta URL a la configuración de tu calendario de WordPress o a cualquier plugin de calendario que acepte feeds de iCal. Esto sincronizará automáticamente tus eventos de Facebook con el calendario de tu sitio web.
Preguntas frecuentes sobre la incorporación de eventos de Facebook
¿Cómo puedo personalizar la apariencia de los eventos de Facebook en WordPress?
Para personalizar más allá de las opciones de esta guía, es posible que necesites CSS o JavaScript personalizados. Los usuarios con conocimientos de codificación pueden modificar directamente los estilos o scripts de su tema de WordPress o utilizar un tema hijo para aplicar estilos más personalizados a la fuente de eventos de Facebook.
¿Cómo puedo solucionar los problemas que surgen cuando no se muestran los eventos de Facebook?
Si los eventos de Facebook no se muestran en tu sitio de WordPress, busca problemas comunes como plugins obsoletos, conflictos con otros plugins o una configuración incorrecta de la API de Facebook. Asegúrate de que todos los plugins están actualizados y revisa la documentación del plugin para comprobar que la configuración es correcta.
¿Puede afectar al rendimiento de mi sitio la incrustación de eventos de Facebook?
Incrustar eventos de Facebook puede afectar al rendimiento del sitio, sobre todo si aumenta el tiempo de carga de la página. Para minimizarlo, asegúrate de utilizar plugins optimizados como SeedProd o Smash Balloon, diseñados para cargar contenido externo de forma eficiente. Además, utiliza plugins de almacenamiento en caché para mejorar el rendimiento general del sitio.
¡Ya está!
Con la ayuda de este artículo, ya conoces 3 formas diferentes de integrar eventos de Facebook en WordPress.
You might also like the following guides for your WordPress site:
- Cómo añadir una página de Facebook a WordPress
- Cómo incrustar vídeos de Facebook en WordPress
- Cómo añadir un botón "Me gusta" de Facebook a tu sitio WordPress
- How to Easily Create a Facebook Group Landing Page
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.
También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.
