Resumen: Cómo incrustar eventos de Facebook en WordPress. Cuatro métodos, cada uno adecuado para un caso de uso diferente.
- SeedProd: Añade el bloque de página de Facebook a cualquier página de destino. No se necesitan tokens de acceso ni configuración de desarrollador.
- Smash Balloon: Muestra un feed completo del calendario de eventos en cualquier lugar de tu sitio. Ideal para eventos continuos con control total del diseño.
- Sincronización iCal: Copia la URL iCal de tu evento en cualquier plugin de calendario de WordPress. Ideal para la integración del calendario en todo el sitio.
- HTML Manual: Genera código del Plugin de Página de Facebook y pégalo en un bloque HTML Personalizado. Gratuito pero limitado en opciones de diseño.
Me encontré con un gran problema al promocionar eventos en Facebook. La gente en mi sitio web no tenía idea de que esos eventos existían. No revisaban mi página con regularidad y no quería enviarlos a otro lugar solo para que confirmaran su asistencia.
Así que busqué una forma de incrustar eventos de Facebook directamente en WordPress. De esa manera, los visitantes podían ver lo que se avecinaba, unirse con un clic y permanecer en mi sitio todo el tiempo.
Si has estado tratando de averiguar cómo hacer eso tú mismo, estás en el lugar correcto. En esta guía, te mostraré cuatro formas de mostrar tus eventos de Facebook en un sitio de WordPress.
Cómo incrustar eventos de Facebook en WordPress
En esta guía, compartiré tres formas de poner eventos de Facebook en tu sitio web de WordPress:
- Crea una página especial de eventos. Es como tener una sección VIP en tu sitio web solo para eventos. Ayuda a las personas a encontrar y registrarse para eventos fácilmente.
- Usa una herramienta que obtenga tus eventos de Facebook. Esta herramienta actúa como un puente, extrayendo tus eventos a cualquier página de tu sitio web. Además, puedes cambiar cómo se ven los eventos para que coincidan con tu estilo.
- Añade un fragmento de código (si te sientes cómodo con ello). Facebook te permite obtener un trozo de código para poner eventos directamente en tu sitio. Esta es la forma más sencilla, pero no te da muchas opciones para que queden bien.
- Sincroniza tus eventos usando una URL iCal. Copia el enlace iCal de cualquier evento de Facebook y pégalo en un plugin de calendario de WordPress. Tu sitio se actualiza automáticamente cuando añades nuevos eventos en Facebook.
¿Cómo saber qué método de incrustación es el mejor para ti?
¿No estás seguro de la mejor manera de mostrar un feed de eventos de Facebook en tu sitio web? Aquí tienes una tabla comparativa lado a lado para ayudarte a elegir el método correcto para incrustar un calendario de Facebook en WordPress.
| M extasciitildeetodo | Características | Facilidad de uso | Precios | Compatible con móviles | ¿Versión gratuita? | Límites de la versión gratuita |
|---|---|---|---|---|---|---|
| SeedProd | Páginas de destino, integraciones de Facebook | Fácil | De pago/Gratis | Sí | Sí | Funciones limitadas, el bloque de página de Facebook requiere pago |
| Smash Balloon | Feeds personalizables de Facebook | Moderado | De pago/Gratis | Sí | Sí | Funciones limitadas |
| Incrustación manual (Código) | Visualización básica de eventos | Difícil | Gratis | Quizás | Sí | Muy limitado, requiere conocimientos de codificación |
| Sincronización iCal | Sincronizar con cualquier plugin de calendario | Fácil | Gratis | Depende del plugin de calendario | Sí | Requiere un plugin de calendario compatible |
Ahora, vamos a ello.
¿Cómo incrustar eventos de Facebook usando SeedProd?
SeedProd es un creador de sitios web de arrastrar y soltar para WordPress, con funcionalidad de modo de cuenta atrás y mantenimiento. Puedes usar este plugin para crear páginas de destino de alta conversión sin escribir código CSS y PHP ni contratar a un desarrollador.
A diferencia de la mayoría de los métodos de incrustación, el bloque de página de Facebook de SeedProd no necesita un token de acceso, ID de aplicación ni ninguna configuración de desarrollador.
No solo puedes usar cientos de plantillas listas para usar, sino que SeedProd también incluye bloques de contenido que te permiten incrustar contenido de redes sociales como tu calendario de eventos de Facebook, feed de página en vivo y herramientas de RSVP, sin necesidad de código.
Los más notables son los bloques de Facebook, que te permiten incrustar contenido de redes sociales, incluyendo:
- Botón Me gusta de Facebook
- Comentarios de Facebook
- Página de Facebook
- Incrustar Facebook
Usaremos el bloque de página de Facebook para añadir eventos directamente en tu página de destino para este método. La mejor parte es que no hay tokens de acceso, códigos cortos ni IDs para copiar y pegar.
1. Instala y activa 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. Crea una página de destino de WordPress
Después de instalar SeedProd en tu sitio web de WordPress, necesitarás crear una nueva página de destino.
Afortunadamente, puedes seguir esta guía paso a paso sobre cómo crear una página de destino en WordPress para empezar rápidamente. O puedes seguir esta guía para crear específicamente una página de destino de eventos.
Una vez que el diseño de tu página de destino esté listo, navega a SeedProd » Páginas y haz clic en Editar en la página de destino que creaste siguiendo nuestro tutorial.
Esto abrirá el editor visual de SeedProd, donde podrás añadir tus eventos.
3. Añade el bloque de página de Facebook
A continuación, busca un espacio en tu página donde te gustaría mostrar tu calendario de eventos de Facebook. Luego, ve a la sección de bloques avanzados a la derecha y busca el bloque Página de Facebook.
Para añadir este bloque a tu página, arrástralo desde la izquierda a tu vista previa.
Luego, en la configuración de contenido del bloque de página de Facebook, pega la URL de tu página. Así es como SeedProd extrae tu feed público de eventos de Facebook y lo muestra directamente dentro de tu diseño de WordPress.
Por defecto, SeedProd muestra tu línea de tiempo de página de Facebook automáticamente. Para mostrar tus eventos en su lugar, haz clic en la opción Eventos bajo el encabezado de 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 y más.
Y si quieres aumentar la interacción en tu página de Facebook, puedes usar el bloque de Incrustar Facebook para incrustar una publicación, un vídeo de Facebook o un comentario junto a tu calendario de eventos.
4. Publica tu página de destino
Todo lo que queda por hacer es hacer clic en la flecha desplegable junto al botón Guardar en la esquina superior derecha y hacer clic en Publicar.
Luego, al hacer clic en Vista previa, verás tu calendario de eventos en vivo en tu página de destino.
Eso es todo. Los visitantes de tu sitio web ahora pueden ver tus eventos de Facebook en tu página de destino.
Pero si deseas mostrar un feed completo de eventos de Facebook, te sugerimos probar el siguiente método.
¿Cómo mostrar un calendario completo de eventos de Facebook en WordPress?
Necesitarás instalar y activar el plugin Smash Balloon Custom Facebook Feed Pro para este método. Para obtener ayuda con este paso, consulta este tutorial paso a paso sobre cómo instalar un plugin de WordPress.
1. Crea un nuevo feed de Facebook
Después de instalar y activar el plugin, ve al menú Feed de Facebook » Todos los feeds desde tu panel de WordPress. Desde allí, haz clic en el botón Añadir nuevo para empezar a crear tu feed de eventos.
En la siguiente página, verás 9 tipos diferentes de feeds de Facebook que puedes añadir a tu sitio web, incluyendo:
- Cronograma
- Fotos
- Vídeos
- Álbumes
- Eventos
- Reseñas
- Y más
Elige la opción Eventos y haz clic en el botón Siguiente para continuar.
2. Selecciona una fuente de página de Facebook
Después de seleccionar un tipo de feed, es hora de elegir una fuente de página de Facebook. Puede ser un grupo de Facebook o una página donde publicas los eventos de tu negocio.
Para añadir una fuente, haz clic en el botón Añadir nuevo.
Esto abre una ventana emergente que te pide tu ID de página de Facebook y Token de acceso a eventos.
Si no estás seguro de cómo encontrar el ID de la aplicación y el token secreto de la aplicación para tu página, sigue estas instrucciones.
Después de introducir los detalles 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. Simplemente 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 están en el lado izquierdo, mientras que una vista previa de tu feed está en la derecha.
Las opciones de personalización te permiten cambiar el tipo de feed, el diseño, el color, el diseño del encabezado, el diseño de las publicaciones y más.
Primero, elige la opción Diseño del feed en la izquierda.
Esta opción ofrece 3 configuraciones diferentes, incluyendo diseños de Lista, Mampostería y Carrusel.
Para mostrar los eventos uno tras otro, elige la opción de diseño Lista.
También puedes seleccionar la opción Masonry si prefieres mostrar tus 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.
Selecciona un diseño que se adapte mejor a tu sitio web. Luego, haz 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 deseas cambiar el color de tu feed, haz clic en el encabezado Esquema de color. En este panel, puedes elegir entre 4 opciones de color diferentes, como:
- Heredar del tema: Copia la combinación de colores de tu sitio web
- Claro: Ten un fondo claro con texto de color oscuro
- Oscuro: Pon el fondo oscuro con texto de color claro
- Personalizado: Introduce tú mismo todos los colores
Después, puedes personalizar otros ajustes, como el diseño de la cabecera, el tamaño del feed, los márgenes y más.
Cuando estés satisfecho con el resultado, haz clic en el botón Guardar.
5. Muestra eventos de Facebook en páginas de WordPress
Ahora, estás listo para incrustar eventos de Facebook en tu sitio web de WordPress, y Smash Balloon te permite hacerlo de 2 maneras.
Primero, haz clic en el botón Incrustar en la esquina superior derecha. Esto abre una ventana emergente con diferentes 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.
Desde allí, puedes elegir cualquier página de tu sitio web de la lista y hacer clic en el botón Añadir.
Hacer clic en esa opción te lleva a la pantalla de edición de la página elegida. Desde allí, haz clic en el icono más (+) y selecciona el widget Feed de Facebook personalizado.
Cuando actualices o publiques la página, puedes previsualizarla para ver cómo quedan tus eventos.
6. Añade eventos de Facebook a las barras laterales de WordPress
Si prefieres añadir tu feed a un área de barra lateral, simplemente haz clic en el botón Añadir a un widget en la ventana Incrustar.
Hacer clic en esa opción te envía a la página de widgets, donde puedes 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 Feed de Facebook personalizado.
Una vez que hayas hecho eso, puedes previsualizar tu sitio web y ver tus eventos de Facebook en el área de la barra lateral de tu sitio.
¿Puedes incrustar eventos de Facebook sin un plugin?
Si no eres fanático de usar demasiados plugins de WordPress en tu sitio web, puedes mostrar eventos de Facebook en WordPress sin 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 para principiantes. Tampoco ofrece mucho control sobre cómo se ven tus eventos.
1. Visita el sitio web del Plugin de Página de Facebook.
Antes de confiar en este método para un cliente o un sitio en vivo, pruébalo primero con tu página de Facebook. La pestaña de eventos del Plugin de Página de Facebook ha tenido un soporte inconsistente desde 2016, y los resultados varían según la cuenta. Si los eventos no se muestran, utiliza los métodos de Smash Balloon o SeedProd anteriores en su lugar.
Así que dirígete a la herramienta Plugin de Página de Facebook 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 cronología. Como queremos mostrar tus eventos de Facebook, elimina la palabra "timeline" en el campo "Tabs" e introduce "events".
2. Genera tu código de inserción de eventos de Facebook
El panel de vista previa ahora muestra una lista de los eventos de tu página. Para obtener el código, haz clic en el botón Get Code debajo de la vista previa.
Al hacer clic en el botón Get Code se abre una ventana emergente con 2 pestañas: JavaScript SDK e IFrame. Haz clic en la pestaña IFrame y luego copia el código de inserción en tu portapapeles.
3. Inserta el código de eventos de Facebook en WordPress
A continuación, dirígete a tu sitio web de WordPress y edita la publicación o página donde deseas mostrar tus eventos de Facebook.
En la pantalla de edición de la publicación o página, haz clic en el icono más (+) y busca el bloque Custom HTML de WordPress.
Ahora, haz clic dentro del bloque HTML y pega el código de inserción de la herramienta Plugin de Página de Facebook.
Luego puedes guardar o publicar la entrada, y al previsualizarla, tus eventos de Facebook estarán en vivo en tu sitio web.
Si deseas cambiar cómo se muestra este feed, deberás volver al Plugin de Página de Facebook y generar de nuevo el código de inserción de Facebook para wp. Dicho esto, hay configuraciones limitadas de Facebook que puedes cambiar.
Antes de confiar en este método para un cliente o un sitio web en producción, pruébalo primero con tu página de Facebook. La pestaña de eventos del plugin de páginas de Facebook ha tenido un soporte inconsistente desde 2016, y los resultados varían según la cuenta. Si los eventos no se muestran, utiliza en su lugar los métodos de Smash Balloon o SeedProd mencionados anteriormente.
¿Cómo sincronizar eventos de Facebook con un calendario de WordPress?
Si deseas integrar tus eventos de Facebook en el calendario de tu sitio web, usar una URL iCal es un método eficiente.
Así es como puedes obtener y usar la URL iCal:
Inicia sesión en tu cuenta de Facebook, ve a tu sección de eventos y selecciona el evento que deseas compartir.
En la parte superior derecha, verás un botón llamado Add to Calendar.
Haz clic en este botón y, en la ventana emergente, haz clic derecho en el botón Exportar y selecciona "Copiar dirección del enlace".
Pega esta URL iCal en tu plugin de calendario de WordPress o en cualquier herramienta que admita feeds externos. Esto te permite sincronizar tus eventos de Facebook con tu calendario de eventos de WordPress automáticamente.
Esto sincronizará automáticamente tus eventos de Facebook con el calendario de tu sitio web.
¿Qué hacer si tus eventos de Facebook no se muestran?
Si tienes problemas para que se muestren los eventos, estas cuatro comprobaciones solucionan los problemas más comunes.
- Revisa la configuración de privacidad de tu Facebook. El evento o la página deben estar configurados como públicos. Los eventos privados y las páginas restringidas no se mostrarán en incrustaciones externas.
- Desactiva los bloqueadores de anuncios o los complementos de seguridad. Algunos complementos de seguridad y de cookies bloquean scripts externos de Facebook. Intenta cargar la página en una ventana de incógnito para probar.
- Usa el código iFrame, no el SDK de JavaScript. Al usar el método de incrustación manual, selecciona siempre la pestaña iFrame. La versión del SDK de JavaScript es menos fiable entre navegadores.
- Cambia a un plugin si nada de esto funciona. El plugin de página de Facebook ha tenido un soporte inconsistente para eventos desde 2016. SeedProd o Smash Balloon te darán un resultado más fiable.
Preguntas frecuentes sobre la incrustación de eventos de Facebook
¿Por qué no se muestran mis eventos de Facebook en mi sitio de WordPress?
Las razones más comunes son la configuración de privacidad (el evento o la página deben ser públicos), los bloqueadores de anuncios o los complementos de seguridad que bloquean los scripts de Facebook, o el uso de la incrustación del SDK de JavaScript en lugar de la versión iFrame. Si la incrustación manual sigue sin funcionar, la pestaña de eventos del plugin de página de Facebook ha tenido un soporte inconsistente desde 2016. Cambia a SeedProd o Smash Balloon para obtener un resultado más fiable.
¿Puedo incrustar eventos de Facebook sin un plugin?
Sí. Usa la herramienta Plugin de Página de Facebook para generar un código de incrustación iFrame, luego pégalo en un bloque de HTML personalizado en WordPress. No obtendrás control de diseño ni actualizaciones automáticas, y los resultados varían según la cuenta. Para una incrustación más fiable, SeedProd o Smash Balloon son mejores opciones.
¿Incrustar eventos de Facebook ralentiza mi sitio?
Puede hacerlo, dependiendo del método. La incrustación manual carga JavaScript externo y contenido iFrame de Facebook, lo que aumenta el peso de la página. Plugins como SeedProd y Smash Balloon están diseñados para minimizar esa carga. Si la velocidad del sitio es una prioridad, usa el bloque de página de Facebook de SeedProd, que cargó en 556 ms en mis pruebas con solo 16 solicitudes HTTP.
¿Puedo incrustar eventos de grupos de Facebook en WordPress?
La mayoría de las herramientas de incrustación solo admiten eventos de páginas públicas, no eventos privados o de grupos. Si administras un grupo de Facebook, el método de sincronización iCal es tu mejor opción. También puedes listar manualmente los eventos del grupo en una página de WordPress y enlazar al evento de Facebook para las confirmaciones de asistencia.
Ahora sabes cómo incrustar tus eventos de Facebook directamente en WordPress. Ya sea que desees un feed de eventos completo, una sola pestaña o una sincronización de calendario, hay un método aquí que se adapta a tus necesidades.
¿Quieres que tus eventos conviertan mejor? Prueba a crear una página de destino de eventos con SeedProd a continuación.
También te pueden interesar las siguientes guías para tu sitio de WordPress:
- Cómo añadir una página de Facebook a WordPress
- Cómo incrustar vídeos de Facebook en WordPress
- Cómo agregar un botón "Me gusta" de Facebook a tu sitio de WordPress
- Cómo crear fácilmente una página de destino para grupos de Facebook
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
