Cómo agregar un calendario de eventos de Facebook en WordPress (forma fácil)

Acabas de organizar un calendario de eventos increíble en Facebook, pero los visitantes de tu sitio de WordPress se lo están perdiendo. Frustrante, ¿verdad?

Afortunadamente, integrar tus Eventos de Facebook directamente en tu sitio de WordPress es más fácil de lo que crees. Y es la clave para mantener a tu audiencia comprometida sin duplicar tu carga de trabajo.

En esta guía, te mostraremos cómo incrustar sin problemas tu calendario de Eventos de Facebook en tu sitio de WordPress.

¿Por qué agregar un calendario de eventos de Facebook en tu sitio web?

Un calendario facilita que las personas conozcan tus próximos eventos, seminarios web, retiros virtuales, sermones en línea, llamadas de coaching y más.

Facebook tiene un calendario de eventos incorporado que puedes usar para promocionar eventos presenciales y en línea a tus seguidores en redes sociales. Sin embargo, las personas no verán este calendario si solo visitan tu sitio web de WordPress.

Con esto en mente, es una buena idea agregar un calendario de Facebook a WordPress para que más personas puedan ver tus próximos eventos. Estas personas incluso podrían visitar tu página de Facebook y marcarse como interesadas en el evento o empezar a seguirte en Facebook.

Puedes agregar eventos a tu sitio web usando un plugin de calendario de WordPress. Sin embargo, agregar cada evento manualmente puede llevar mucho tiempo.

Si ya usas el calendario de eventos de Facebook, entonces es mucho más fácil agregar un feed de redes sociales a tu sitio web de WordPress.

Este feed luego extraerá automáticamente los eventos de Facebook, ahorrándote mucho tiempo y esfuerzo. También significa que los visitantes siempre verán tus eventos más recientes, manteniendo tu sitio web fresco e interesante.

Dicho esto, veamos cómo puedes agregar un calendario de eventos de Facebook en WordPress. Puedes usar estos enlaces rápidos para navegar por los pasos:

• Paso 1: Agrega un plugin de eventos de Facebook en WordPress
• Paso 2: Conecta Facebook a WordPress y crea un token de acceso a eventos
• Paso 3: Personaliza tu calendario de eventos de Facebook incrustado
• Step 4: Embed Your Facebook Event Calendar in WordPress

Paso 1: Agrega un plugin de eventos de Facebook en WordPress

La forma más fácil de incrustar un calendario de eventos de Facebook en WordPress es usando el plugin Custom Facebook Feed Pro.

Smash Balloon es el mejor plugin de feeds de redes sociales del mercado. Te permite mostrar fácilmente las reseñas de tu página de Facebook, álbumes, videos y más en tu sitio web de WordPress.

Primero, necesitas instalar y activar el plugin Custom Facebook Feed Pro. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, dirígete a Facebook Feed » Settings e introduce tu clave de licencia en el campo ‘License Key’.

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

Después de ingresar la clave, simplemente haz clic en ‘Activar’.

Paso 2: Conecta Facebook a WordPress y crea un token de acceso a eventos

Smash Balloon Custom Facebook Feed te permite incrustar eventos de tu página de Facebook. Incluso puedes mostrar los eventos en una ventana emergente tipo lightbox para que los visitantes puedan desplazarse por todo tu calendario.

El primer paso es conectar tu página de Facebook a WordPress, así que ve a Facebook Feed » All Feeds y luego haz clic en el botón ‘Add New’.

En la siguiente pantalla, puedes ver que Smash Balloon te permite incrustar videos de Facebook en WordPress, mostrar estados, publicaciones de la comunidad y más.

Para agregar un calendario de eventos de Facebook en WordPress, selecciona ‘Events’ y luego haz clic en ‘Next’.

Ahora, necesitas seleccionar la página de Facebook de donde obtendrás el calendario de eventos.

Para hacer eso, haz clic en el botón ‘Add New’.

Debido a cómo está configurado Facebook, verás una ventana emergente pidiéndote que crees una aplicación y luego ingreses un Page ID y un Event Access Token. Hagamos esto ahora.

En una nueva pestaña, ve a la página de Desarrolladores de Facebook.

En la barra de herramientas, haz clic en ‘Log In’ y luego ingresa el nombre de usuario y la contraseña de tu cuenta personal de Facebook.

Si esta es la primera vez que inicias sesión en el sitio de Desarrolladores de Facebook, haz clic en ‘Get Started’ y luego sigue las instrucciones en pantalla para crear una cuenta gratuita.

Una vez que hayas iniciado sesión en el panel de Desarrolladores de Facebook, haz clic en el botón ‘Create App’.

En la siguiente pantalla, deberás seleccionar el caso de uso principal de tu aplicación.

‘Configurar inicio de sesión de Facebook’ es útil si deseas agregar inicios de sesión sociales a WordPress. Sin embargo, dado que estás agregando un calendario de eventos a WordPress, deberás seleccionar ‘Otro’ y luego hacer clic en el botón ‘Siguiente’.

Ahora, verás todas las diferentes aplicaciones que puedes crear para tu página de Facebook.

Para incrustar eventos de Facebook, deberás seleccionar ‘Negocio’ y luego hacer clic en ‘Siguiente’.

En la siguiente pantalla, dale un nombre a tu aplicación. Esto es solo para tu referencia, así que puedes usar lo que quieras.

Aquí, también puedes escribir tu dirección de correo electrónico y agregar una Cuenta de Negocios opcional. Cuando estés satisfecho con la información que ingresaste, simplemente haz clic en ‘Crear aplicación’.

Después de unos momentos, verás el panel de control de tu nueva aplicación de Facebook.

En el menú de la izquierda, haz clic en ‘Configuración’ y luego selecciona ‘Básico’.

El panel de control muestra el ID de la aplicación por defecto.

Para ver el Secreto de la aplicación, haz clic en el botón ‘Mostrar’.

En una nueva pestaña, dirígete a la documentación oficial de Smash Balloon.

Ahora, busca el paso 3 y copia el ID de la aplicación y el Secreto de la aplicación en los campos.

En otra nueva pestaña, dirígete al Explorador de la API Graph de Facebook.

En el menú desplegable ‘Meta App’, selecciona la aplicación de Facebook que creamos anteriormente y luego haz clic en ‘Agregar un permiso’.

En el menú desplegable que aparece, debes hacer clic en ‘Grupos de eventos y páginas’. Luego, selecciona todos los siguientes permisos: page_events, pages_read_engagement, pages_read_user_content.

Después de agregar estos permisos, haz clic en ‘Generar token de acceso’.

En la ventana emergente que aparece, marca la casilla junto a la página de Facebook de la que deseas obtener eventos.

Luego, haz clic en el botón ‘Siguiente’.

Ahora, 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 página de Facebook, simplemente haz clic para desactivar cualquiera de los interruptores. Ten en cuenta que esto puede afectar los eventos que puedes incrustar en tu blog de WordPress o sitio web, por lo que recomendamos dejar todos los interruptores activados.

Cuando estés satisfecho con la configuración de los permisos, haz clic en 'Listo'.

Después de unos momentos, deberías ver un mensaje que confirma que has conectado tu sitio web de WordPress a Facebook. Con eso hecho, estás listo para hacer clic en 'Aceptar'.

De vuelta en el panel de Graph API Explorer, verás un token de acceso temporal, que es válido por aproximadamente 1 hora.

Para convertir esto en un token de acceso permanente, regresa a la documentación de Smash Balloon y desplázate hasta el paso 13. Ahora puedes pegar el token temporal en este campo y hacer clic en 'Extender mi token'.

Smash Balloon ahora creará un token de acceso de página permanente.

Copia este valor y regresa a tu panel de WordPress. Ahora puedes pegar el token en el campo 'Token de acceso de eventos'.

Finalmente, necesitamos el ID de tu página de Facebook.

Simplemente puedes visitar tu página en una nueva pestaña y mirar la barra de direcciones. El ID de la página es el valor después de id=. Por ejemplo, en la siguiente imagen, el ID de la página es 10006740374000.

Copia este valor y luego regresa al panel de WordPress.

Ahora puedes pegar el ID en el campo 'ID de página de Facebook' y luego hacer clic en 'Agregar fuente'.

En la siguiente pantalla, elige la plantilla que deseas usar para el calendario de eventos.

Todas las plantillas de Smash Balloon son completamente personalizables, por lo que puedes ajustar el diseño según cómo quieras mostrar tu feed de Facebook personalizado en WordPress.

Estamos usando la plantilla 'Predeterminada', pero puedes usar cualquier plantilla que desees. Después de hacer tu selección, haz clic en 'Siguiente'.

Smash Balloon ahora creará un feed basado en tu página de Facebook y plantilla. Este es un buen comienzo, pero es posible que desees ajustar cómo aparecen los eventos en tu sitio.

Paso 3: Personaliza tu calendario de eventos de Facebook incrustado

Después de crear tu feed, serás llevado automáticamente al editor de Smash Balloon.

En el lado derecho, verás una vista previa de tu calendario de eventos de Facebook. En el lado izquierdo, verás todas las diferentes configuraciones que puedes usar para personalizar cómo aparecen los eventos en tu sitio.

La mayoría de estas configuraciones se explican por sí mismas, pero cubriremos rápidamente algunas áreas clave.

Si deseas cambiar la plantilla que estás usando, simplemente haz clic en 'Plantilla'. Luego, presiona el botón 'Cambiar' para elegir una nueva plantilla.

Cuando hayas terminado con estas configuraciones, puedes hacer clic en el enlace 'Personalizar' para regresar al editor principal de Smash Balloon.

A continuación, queremos ver la configuración de 'Diseño del feed'.

En esta pantalla, puedes alternar entre diseños de mosaico y de lista y cambiar la altura del feed.

A medida que realices cambios, la vista previa se actualizará automáticamente, por lo que puedes probar diferentes configuraciones hasta que estés satisfecho con cómo se ve el calendario de eventos de Facebook.

Por defecto, Smash Balloon mostrará un número diferente de eventos de Facebook en computadoras de escritorio y dispositivos móviles.

Puedes previsualizar cómo se verá tu calendario de eventos en computadoras de escritorio, tabletas y teléfonos inteligentes usando la fila de botones en la esquina superior derecha.

Después de probar la versión móvil de tu sitio web, es posible que desees cambiar cuántos eventos muestras en teléfonos inteligentes y tabletas para que todo el contenido quepa cómodamente en la pantalla.

Para hacer este cambio, simplemente busca la sección ‘Number of Posts’ y escribe un número diferente en el campo ‘Mobile’.

Otra opción es mostrar menos columnas en teléfonos inteligentes y tabletas cambiando la configuración de 'Columnas'.

Por ejemplo, estamos mostrando 3 columnas en escritorio, 2 columnas en tabletas y 1 columna en dispositivos móviles.

Cuando estés satisfecho con cómo se ve el calendario en todos los dispositivos, haz clic en 'Personalizar' para regresar a la pantalla principal del editor.

Aquí, haz clic en la siguiente opción de configuración, que es 'Esquema de color'.

Por defecto, Smash Balloon utiliza el mismo esquema de color que tu tema de WordPress para el calendario de eventos.

Si no te gusta cómo se ve esto, puedes cambiar a un esquema de color 'Claro' o 'Oscuro'.

Otra opción es diseñar tu propio esquema de colores seleccionando 'Personalizado'.

Puedes usar los controles para cambiar el color del enlace, el color de fondo y el color del texto en WordPress, y más.

Por defecto, Smash Balloon agrega una cabecera encima de tu calendario de eventos. Esto permite a los visitantes saber que los eventos están relacionados con tu página de Facebook o negocio, y también los anima a visitar tu página de Facebook.

Para personalizar la sección de la cabecera, haz clic en 'Cabecera' en el menú de la izquierda. Para empezar, puedes alternar entre los estilos de cabecera visual y de texto.

Si estás usando el estilo 'Visual', entonces también puedes usar los controles para cambiar el tamaño de la cabecera, ocultar la foto de portada, cambiar el color de fondo y más.

Si estás usando un estilo 'Texto', entonces puedes personalizar el texto que se muestra en la cabecera.

También puedes cambiar el tamaño de la fuente, el color y más.

Si quieres crear un calendario de eventos más simple, entonces siempre puedes eliminar la cabecera haciendo clic para desactivar el interruptor 'Habilitar'.

Una vez que hayas hecho eso, puedes cambiar cómo se ven los eventos individuales dentro de tu calendario seleccionando 'Estilo de publicación' en el menú de la izquierda.

A continuación, haz clic de nuevo en 'Estilo de publicación'.

En esta pantalla, puedes elegir entre un diseño regular y uno en caja para tu calendario.

Si seleccionas 'En caja', entonces puedes crear un fondo de color para cada evento. También puedes hacer que el radio del borde sea más grande para crear esquinas curvas y agregar una sombra de caja.

Si eliges 'Regular', entonces puedes cambiar el grosor y el color de la línea que separa tus diferentes eventos.

En la siguiente imagen, hemos agregado una línea más gruesa al calendario y hemos cambiado su color.

También puedes personalizar las partes individuales dentro de cada evento volviendo a la pantalla de configuración principal.

Una vez más, selecciona 'Estilo de publicación', pero esta vez, elige 'Editar elementos individuales' en su lugar.

Ahora verás todo el contenido diferente que Smash Balloon muestra para cada evento, como su título, fecha y detalles del evento.

Para ocultar una pieza de contenido, simplemente haz clic para desmarcar su casilla.

También puedes cambiar cómo se ve un elemento haciendo clic en su nombre.

Las opciones que puedes ver en la siguiente pantalla variarán. Sin embargo, normalmente puedes cambiar el tamaño del texto y el color del texto.

Por defecto, Smash Balloon agrega un botón Me gusta de Facebook debajo de tu calendario de eventos, lo que permite a los visitantes seguir tu página de Facebook o compartirla con otras personas.

Esta función puede ayudarte a conseguir más seguidores y compartidos en redes sociales, por lo que vale la pena hacer clic en 'Like Box' para ver qué cambios puedes hacer.

Para empezar, puedes cambiar si el cuadro aparece encima o debajo de tu calendario de eventos usando el menú desplegable 'Posición'.

También puedes cambiar el tamaño o el ancho del cuadro, o agregar la foto de portada de tu página.

Un gran número de seguidores es una excelente prueba social que animará a más personas a seguirte en redes sociales y asistir a tus eventos. Teniendo esto en cuenta, es posible que desees hacer clic para habilitar el interruptor 'Mostrar fans'.

Si prefieres eliminar el cuadro de 'Me gusta', simplemente haz clic en el interruptor 'Habilitar' para cambiarlo de azul a gris.

Cuando estés satisfecho con la configuración del botón 'Me gusta', puedes pasar a la configuración del 'Botón Cargar más'.

El botón 'Cargar más' ofrece a los visitantes una forma fácil de desplazarse por todos tus eventos. Teniendo esto en cuenta, es posible que desees hacer que este botón se destaque del resto de tu sitio cambiando su color de fondo, estado al pasar el cursor y color del texto.

El botón muestra 'Cargar más' por defecto, pero puedes reemplazarlo con tu propio mensaje escribiendo en el campo 'Texto'.

Por ejemplo, podrías usar algo como 'Ver más eventos' o 'Explorar nuestro calendario'.

Smash Balloon tiene una función de lightbox que permite a los visitantes ver tus eventos en una ventana emergente.

Los visitantes pueden simplemente hacer clic en la imagen de un evento para abrir la ventana emergente lightbox.

Los visitantes pueden desplazarse por todos sus eventos usando las flechas, similar a incrustar un álbum de Facebook en WordPress.

Para personalizar la lightbox predeterminada, simplemente selecciona 'Lightbox' en el menú de la izquierda.

Here, you can change the color of the lightbox’s text, links, and background colors.

La ventana emergente lightbox facilita a los visitantes la exploración de su calendario, pero también permite a las personas desplazarse por todos sus eventos sin visitar su grupo de Facebook.

Si desea animar a las personas a visitar su página de Facebook, es posible que desee deshabilitar la función lightbox haciendo clic en el interruptor 'Habilitar' para que cambie de azul a gris.

Si deshabilita la función lightbox, hacer clic en un evento abrirá su página de Facebook en una nueva pestaña.

Cuando esté satisfecho con el aspecto del calendario de eventos de Facebook, no olvide hacer clic en 'Guardar' para almacenar sus cambios. Ahora está listo para agregar esta fuente a su sitio web de WordPress.

Paso 4: Incrustar su calendario de eventos de Facebook en WordPress

Para agregar el calendario de eventos de Facebook, puede hacer clic en el botón 'Incrustar' en la parte superior de la pantalla.

Puede agregar el calendario de eventos de Facebook en WordPress usando un shortcode, bloque o widget.

En nuestra experiencia, es más fácil incrustar la fuente de Facebook usando un bloque o widget, por lo que le mostraremos esos métodos primero.

Agregar el calendario de eventos de Facebook a una página

Primero, puede hacer clic en 'Agregar a una página'. Después de eso, seleccione una página a la que desee agregar el calendario de eventos y haga clic en 'Agregar'.

Luego será dirigido al editor de bloques.

Aquí, proceda a hacer clic en el botón '+ Agregar bloque' y busque el bloque 'Fuente de Facebook'.

Una vez que haga eso, puede seleccionar la Fuente de Facebook con el calendario de eventos que creó anteriormente.

El bloque de Gutenberg se cambiará automáticamente al calendario de eventos.

Si usas un tema de bloques y quieres agregar este bloque a una parte de plantilla o a un patrón, también puedes hacerlo usando los mismos pasos pero en el Editor de Sitio Completo.

Para más información sobre cómo hacer esto, lee nuestra guía sobre la Edición de Sitio Completo en WordPress.

Agregar el Calendario de Eventos de Facebook a un Área Lista para Widgets

Otro lugar donde puedes mostrar el calendario de eventos es en un área lista para widgets, como una barra lateral. De esta manera, aún puedes mostrar tus próximos eventos de Facebook sin distraer a los usuarios del contenido principal.

Lo que necesitas hacer es hacer clic en ‘Agregar a un Widget‘ en la ventana emergente Embed Feed. Luego serás dirigido a la página del editor de widgets de WordPress.

Ahora, haz clic en el botón ‘+ Agregar Bloque’ en el área lista para widgets que desees y selecciona el bloque ‘Feed de Facebook’.

Como antes, simplemente selecciona el feed del calendario de eventos que creaste anteriormente.

Una vez hecho, simplemente haz clic en el botón ‘Actualizar’ en la esquina superior derecha.

Agregar el Calendario de Eventos de Facebook Usando Shortcode de WordPress

Si los métodos de bloque o widget no funcionan, entonces puedes intentar agregar el calendario de eventos de Facebook usando un shortcode.

Simplemente copia el código que está disponible en la ventana emergente Embed Feed y pégalo en un bloque de shortcode en el editor de bloques o widgets.

Para más información sobre shortcodes, puedes leer nuestro artículo sobre cómo agregar shortcodes en WordPress.

Bono: Mejora tu Integración de WordPress y Facebook

¿Quieres llevar tu integración de WordPress y Facebook al siguiente nivel? Consulta estas guías adicionales:

• Cómo agregar un sorteo de Facebook en WordPress para aumentar la participación – Aprende a organizar sorteos atractivos que aumenten tu número de seguidores en Facebook.
• Cómo publicar automáticamente en Facebook desde WordPress – Optimiza tu estrategia de redes sociales automatizando tus publicaciones de Facebook.
• Cómo solucionar el problema de miniaturas incorrectas de Facebook en WordPress – Asegúrate de que tu contenido compartido siempre se vea bien en Facebook.
• Cómo solucionar el problema de oEmbed de Facebook e Instagram en WordPress – Resuelve problemas comunes de incrustación para una visualización fluida en redes sociales.
• Cómo mostrar tu línea de tiempo de Facebook en WordPress – Muestra tu actividad de Facebook directamente en tu sitio de WordPress.
• Formas rápidas de obtener más Me gusta en Facebook usando WordPress – Haz crecer tu audiencia de Facebook con estas estrategias efectivas.
• Cómo agregar reacciones de 'Me gusta' de Facebook a tus publicaciones de WordPress – Aumenta la interacción agregando la popular función de reacciones de Facebook a tu contenido.
• Cómo agregar un cuadro de 'Me gusta' / cuadro de fans de Facebook en WordPress – Fomenta más 'Me gusta' y seguidores con un cuadro de 'Me gusta' incrustado.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un calendario de eventos de Facebook en WordPress. También te puede interesar ver nuestras selecciones expertas de los mejores plugins de Facebook para tu blog o aprender cómo programar publicaciones de WordPress para redes sociales.

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