Cómo integrar Facebook Live Stream en tu sitio web (de forma sencilla)
Inicio Blog Cómo integrar Facebook Live Stream en tu sitio web (de forma sencilla)

Cómo integrar Facebook Live Stream en tu sitio web (de forma sencilla)

Cómo integrar Facebook Live Stream en tu sitio web

¿Quieres una forma rápida y sencilla de integrar tu transmisión en directo de Facebook en tu sitio web?

Si quieres convertir a más visitantes de tu sitio web en espectadores en tiempo real y hacer crecer tu audiencia rápidamente, incrustar transmisiones en directo de Facebook es una decisión inteligente.

El vídeo en directo es más popular que nunca, y llevar sus emisiones directamente a su sitio web le ayuda a mantener el interés de los visitantes, ampliar su alcance e incluso captar nuevos clientes.

Recuerdo la primera vez que intenté mostrar las vidas de Facebook en mi sitio... Los códigos de incrustación manuales me parecían toscos y no me daban el control o el aspecto que quería.

Por eso siempre utilizo el plugin Facebook Feed Pro, fácil de usar para principiantes, que simplifica todo el proceso y no requiere codificación.

En esta guía, te mostraré los pasos exactos que yo utilizo para integrar las transmisiones en directo de Facebook en mi sitio web. Podrás mostrar tus vídeos en directo con solo unos clics, incluso si eres nuevo en WordPress o no tienes conocimientos técnicos.

En este artículo

La forma más fácil de integrar Facebook Live Stream en WordPress

Antes, podías pegar enlaces de Facebook directamente en tu sitio web y WordPress los incrustaba automáticamente.

Lamentablemente, WordPress dejó de admitir esta función de oEmbeds, por lo que mostrar contenido de Facebook se hizo mucho más difícil.

Ahora, tendrás que generar manualmente el código de incrustación para cada transmisión en directo y luego añadir el código a tu sitio.

ejemplo incrustar facebook live manualmente

Como puedes suponer, este proceso puede ser largo y complicado, sobre todo si no estás acostumbrado a manejar mucho código.

Además, no puedes personalizar el aspecto de tu transmisión en directo, por lo que es posible que ni siquiera se ajuste a la marca de tu sitio web.

¿La buena noticia?

Puedes utilizar un plugin de WordPress que incruste automáticamente el contenido de Facebook.

Y el mejor plugin que puede ayudarte a empezar de inmediato es Facebook Feed Pro.

Con Facebook Feed Pro, puedes mostrar todo tipo de contenido de Facebook en tu sitio web en cuestión de minutos.

Una vez que actives el plugin, verás un flujo guiado de 3 pasos que puedes seguir. 

Esto te llevará a través de todo el proceso de creación, personalización e incrustación de feeds de Facebook en tu sitio.

Y en estos feeds de Facebook, puedes mostrar transmisiones en directo, galerías de fotos de Facebook, álbumes de Facebook, vídeos, eventos de Facebook, reseñas y mucho más. Tienes un montón de opciones para elegir.

tipos de feed de facebook seleccionar

Además, tus feeds de Facebook heredarán automáticamente el diseño de tu sitio web. Así, tus emisiones en directo se adaptarán perfectamente a tu marca una vez que las incorpores.

También dispones de un editor de feeds en directo con montones de opciones de personalización para cambiar cómo aparece el contenido de Facebook en tu sitio.

Facebook Feed Pro también tiene una calificación de 4,9/5 estrellas de más de 250.000 usuarios de todo el mundo. Como se puede ver, esto realmente es el mejor plugin de alimentación de Facebook en el mercado.

opiniones de usuarios de custom facebook feed pro

¿Quieres mostrar los feeds de Facebook con facilidad? ¡ Consigue Facebook Feed Pro aquí!

Con eso, vamos a seguir adelante y ver cómo este plugin puede ayudarle a incrustar transmisiones en vivo en su sitio web.

Cómo integrar Facebook Live Stream en tu sitio web

¿Estás listo para aprender a incrustar tus vídeos en directo de Facebook en WordPress?

Sigue esta sencilla guía y podrás empezar en un abrir y cerrar de ojos.

Paso 1: Instala el plugin Facebook Feed Pro

Primero, hazte con una copia del plugin Facebook Feed Pro desde aquí e instálalo en tu sitio web.

Si quieres un repaso rápido de cómo hacerlo, puedes seguir esta guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté listo, puedes pasar al paso 2 y crear un feed de Facebook.

Paso 2: Crear un nuevo feed de Facebook

Utilizando un feed de Facebook, puedes empezar a mostrar tus retransmisiones en directo en tu sitio web.

Para crear tu feed, primero, abre el menú Facebook Feed " All Feeds desde el área de tu panel de control de WordPress.

A continuación, haga clic en el botón Añadir nuevo de la parte superior.

crear un nuevo feed de facebook

Después, puedes seleccionar el tipo de contenido que quieres mostrar en tu feed de Facebook. Este plugin es compatible con la línea de tiempo de la página, galerías de fotos, calendarios de eventos, comentarios y mucho más.

Para visualizar las transmisiones en directo, seleccione la opción Vídeos y haga clic en Siguiente.

elige el tipo de feed de vídeos para facebook

Ahora tienes un nuevo feed de vídeo de Facebook en tu sitio web para mostrar tus transmisiones en directo. En el paso 3, puedes conectar tu cuenta de Facebook a este feed.

Paso 3: Conecta tu página de Facebook

Al conectar una página de Facebook, tu feed puede obtener transmisiones en directo de Facebook y luego mostrarlas en tu sitio web.

Haga clic aquí en el botón Añadir nuevo para empezar.

añadir fuente facebook feed pro

Después de eso, el plugin te redirigirá a conectar tu cuenta de Facebook. Siga adelante y haga clic en Conectar con Facebook.

Al hacerlo, se abrirá Facebook en tu navegador. Aquí, puedes confirmar la cuenta que estás utilizando haciendo clic en el botón Continuar.

Una vez que hayas confirmado qué cuenta de Facebook vas a utilizar para conectarte como fuente, ya puedes dar al plugin acceso de sólo lectura a tu Facebook para que pueda mostrar transmisiones en directo en tu sitio web.

Con este acceso de sólo lectura, Facebook Feed Pro sólo puede ver el contenido y no podrá realizar ningún cambio en tu cuenta.

Sólo tiene que hacer clic en el botón Hecho para confirmar el acceso de sólo lectura.

permitir el acceso de sólo lectura a facebook feed pro

Ahora, el plugin te enviará a tu página web una vez más. Desde aquí, puedes confirmar tu página de Facebook como fuente de este vídeo en directo de Facebook.

Para ello, pulse el botón Añadir.

seleccione la página del grupo de facebook

Cada vez que crees nuevos feeds de Facebook, ahora puedes seleccionar esta página como fuente con un solo clic.

Ahora puede hacer clic en el botón Siguiente para continuar con el siguiente paso.

seleccionar fuente facebook feed pro

Ahora, tu feed de Facebook está listo para mostrar vídeos en directo en tu sitio web.

Pero antes de empezar a incrustar tu feed en directo de Facebook, puedes personalizar su diseño en el paso 4.

Paso 4: Personaliza tus transmisiones de Facebook Live

Como el plugin hereda automáticamente el diseño de tu sitio web, tus transmisiones en directo de Facebook tendrán un aspecto increíble desde el primer momento.

¿Quieres tener más control sobre el diseño de tus transmisiones en directo de Facebook? Este plugin te ayuda.

En primer lugar, puede optar por importar una plantilla de feed preconstruida para su feed. Tienes 7 opciones para elegir:

  • Por defecto
  • Mampostería simple
  • Widget
  • Rejilla grande
  • Álbum grande
  • Carrusel de escaparates
  • Carrusel simple

Seleccione aquí su plantilla de alimentación y haga clic en Siguiente.

selecciona tu plantilla de feed de facebook

Después de eso, el plugin te ofrece 2 formas diferentes de mostrar las transmisiones en directo de Facebook:

  • Mostrar todos los flujos en tu página
  • Mostrar sólo el contenido de la lista de reproducción elegida

Después de elegir la opción que prefiera, haga clic en el botón Siguiente.

elegir tipo de vídeo facebook

Utilizaremos la opción Mostrar todos los vídeos para este ejemplo.

Ahora, el plugin abrirá el editor de transmisiones en directo para que puedas personalizar tus transmisiones en directo de Facebook al detalle.

Puedes usar las opciones de la izquierda para cambiar el diseño, el tamaño del feed, los colores, la cabecera, el estilo de la entrada, el botón de cargar más y mucho más.

live feed editor for facebook feed pro video

Cuando realices algún cambio, la vista previa en directo de la derecha mostrará el aspecto de tus transmisiones en directo de Facebook.

Desde aquí, haga clic en la opción Combinación de colores para iniciar la personalización.

opción de combinación de colores para facebook feed pro

Para establecer los colores de tus transmisiones en directo de Facebook, puedes elegir entre 4 combinaciones de colores:

  • Heredar del tema: Copie los colores de su tema de WordPress
  • Claro: Mostrar un fondo claro con una fuente oscura
  • Oscuro: Mostrar un fondo oscuro junto con un color de fuente claro.
  • Personalizado: Selecciona manualmente todos los colores del feed
elige tu combinación de colores facebook feed pro

Elige tu combinación de colores entre las opciones y haz clic en el botón Guardar de la parte superior.

A continuación, puedes seguir configurando el diseño de tus retransmisiones en directo haciendo clic en el botón Personalizar .

personalizar botón facebook feed live stream

A continuación, puedes elegir el aspecto de la cabecera de Facebook que aparece sobre tus flujos.

Para ello, haga clic en la opción Cabecera de la izquierda.

opción de cabecera para facebook feed pro live stream

Con la opción Tipo de cabecera, puede elegir el aspecto de su cabecera:

  • Visual: Muestra un encabezado visual con una foto de portada, foto de perfil, número de me gusta y más.
  • Texto: Escriba manualmente una línea de texto para utilizarla como encabezado sobre sus retransmisiones en directo
cabecera tipo facebook feed pro

Sólo tienes que seleccionar el tipo de cabecera que prefieras para continuar. Recuerda hacer clic en Guardar para confirmar el diseño de tu cabecera.

Como puedes ver, es muy fácil personalizar tus transmisiones en directo de Facebook utilizando el editor de transmisiones en directo del complemento. Puedes utilizar el resto de opciones para configurar el número de vídeos, el diseño, el diseño de los botones, el cuadro de me gusta y mucho más.

Por último, haga clic en el botón Guardar para conservar los cambios.

Una vez hecho esto, puedes pasar al último paso e incrustar tus transmisiones en directo de Facebook.

Paso 5: Insertar transmisiones de Facebook Live en tu sitio web

Ahora, puedes elegir entre 2 formas diferentes de incrustar tus transmisiones en directo de Facebook:

  • Insertar la transmisión en directo de Facebook en la página del sitio web
  • Insertar la transmisión en directo de Facebook en la barra lateral o el pie de página del sitio web

Veamos a continuación cómo realizar ambos métodos.

Insertar Facebook Live Stream en la página del sitio web

La buena noticia es que puedes empezar a incrustar tus transmisiones de Facebook directamente desde este editor de transmisiones en directo.

Sólo tiene que hacer clic en el botón "Incrustar " de la parte superior para empezar.

incrustar su vídeo en directo wordpress

Al hacerlo, se abrirá una ventana emergente en la que podrás elegir la ubicación de tus transmisiones en directo de Facebook.

Como vamos a añadirlo a una página web, haz clic en la opción Añadir a una página .

añade tu vídeo en directo a la página web

A continuación, verá una lista de las páginas disponibles en su sitio.

Sólo tienes que seleccionar la página en la que deseas mostrar las transmisiones en directo de Facebook y, a continuación, hacer clic en Siguiente.

elegir página wordpress facebook live

El plugin abrirá ahora esa página en el editor de WordPress para que puedas incrustar tu contenido de Facebook.

Para ello, haz clic en el icono más (+) y, a continuación, selecciona el bloque Fuente personalizada de Facebook.

Ahora pulsa el botón Actualizar y tus transmisiones en directo de Facebook se incrustarán en tu sitio web.

Si abres esta página, podrás comprobar cómo se ven las retransmisiones en directo para los visitantes de tu sitio web.

ejemplo facebook live streaming video

Veamos el siguiente método para añadir flujos de Facebook a WordPress.

Con el editor de transmisiones en directo, también puedes incrustar tus transmisiones como widgets de Facebook en tu barra lateral o pie de página.

En primer lugar, ve al menú Facebook Feed " All Feeds desde el panel de control de WordPress.

A continuación, haz clic en la fuente de vídeo de Facebook que contiene tus emisiones en directo.

abrir transmisiones en directo de facebook en el editor

Al hacer esto, tus transmisiones en directo de Facebook volverán a aparecer en el editor de transmisiones en directo.

Como antes, haz clic en el botón Incrustar de la parte superior.

incrustar su vídeo en directo wordpress

Después, puedes utilizar la ventana emergente para elegir la ubicación de tus flujos de Facebook.

Como estamos incrustando un widget de transmisión en directo de Facebook, haz clic aquí en Añadir a un widget.

añadir facebook live stream website sidebar footer

Después de eso, el plugin te enviará a la página de Widgets de tu sitio web. Desde allí, puedes añadir, eliminar y administrar tus widgets de WordPress.

Para mostrar las retransmisiones en directo de Facebook en tu barra lateral, haz clic en el panel Barra lateral .

abre el panel de la barra lateral para insertar el feed de instagram en directo

¿Quieres mostrar las retransmisiones en directo en el pie de página? Haz clic en el panel Pie de página.

Utilizaremos la barra lateral como ejemplo.

abrir panel de pie de página para insertar feed de instagram en directo

Para añadir un nuevo widget, basta con hacer clic en el icono más (+) de la parte inferior.

Por último, haz clic en el widget Custom Facebook Feed para incrustar las transmisiones en directo en tu sitio de WordPress.

widget de noticias de redes sociales de facebook

Para confirmar tu nuevo widget, haz clic en el botón Actualizar de la parte superior.

Ahora tienes un nuevo widget de Facebook que muestra tus retransmisiones en directo. Si abres tu sitio, podrás ver cómo queda:

incrustar facebook live stream en la barra lateral del sitio web

¡Y ahí lo tienes!

Esperamos que esto te haya enseñado cómo incrustar una transmisión en directo de Facebook en tu sitio web. Ahora puedes convertir fácilmente a los visitantes de tu sitio web en espectadores y seguidores.

¿Por qué integrar Facebook Live Stream en tu sitio web?

Facebook Live es una plataforma muy popular para retransmisiones en directo y un lugar estupendo para promocionar tu negocio si quieres llegar a montones de personas.

Al fin y al cabo, el 82% de la gente prefiere los vídeos en directo de las marcas a las publicaciones habituales en las redes sociales.

Y si incrusta transmisiones en directo en su sitio web, puede convertir el tráfico de su sitio en nuevos espectadores y seguidores.

De este modo, podrás potenciar la presencia de tu marca en Facebook con facilidad. Y eso es sólo el principio. 

Aquí tienes más trucos de marketing en Facebook que puedes probar con las retransmisiones en directo:

  • Puedes compartir eventos en directo, como anuncios, seminarios web, lanzamientos de productos, etc. con los visitantes de tu sitio web.
  • Al incrustar tus antiguas retransmisiones en directo, puedes seguir obteniendo más visitas y ofrecer a los visitantes más contenido para ver
  • Los clientes que no están activos en Facebook pueden unirse a tus retransmisiones en directo directamente desde tu sitio web.
  • Para convertir a los visitantes en clientes, puedes incluir transmisiones en directo con demostraciones de productos y testimonios.

En definitiva, las retransmisiones en directo de Facebook pueden ser una opción fantástica si quieres mantener a los visitantes en tu sitio web, aumentar tu número de seguidores en Facebook, impulsar tus ventas y mucho más.

Con el plugin Facebook Feed Pro, es más fácil que nunca mostrar contenido de redes sociales de Facebook.

¿Listo para integrar tu transmisión en vivo de Facebook? Consigue tu copia de Facebook Feed Pro aquí.

¿Quieres incrustar la emisión en directo de YouTube en un sitio web? Puedes seguir nuestra guía completa sobre cómo incrustar vídeos en directo.

¿Le ha resultado útil? Puede seguirnos en Facebook y Twitter para obtener más consejos y trucos útiles sobre marketing en redes sociales.

avatar de autor
Sajjan Sharma Redactor jefe
Sajjan lleva más de 10 años escribiendo sobre WordPress, marketing en redes sociales y negocios online. Sus intereses profesionales se extienden al marketing de influencers, la curación de contenidos y las estrategias de marketing digital.

Comentarios 2

  1. Francis MacDougall hace 3 años

    Estoy buscando incrustar "sólo" la transmisión en vivo, y mostrar una imagen cuando la transmisión en vivo no se está reproduciendo. ¿Puedo hacerlo con esta herramienta?

    Respuesta
    1. Manuel Escobar hace 3 años

      Hola Francis,

      En este caso, el vídeo mostrará una miniatura cuando lo incrustes, de modo que el visitante lo verá antes de reproducir el vídeo.

      Si tiene alguna otra pregunta, envíenos una solicitud de asistencia a través del formulario de nuestro sitio web,

      Gracias.

      Respuesta

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.