¿Cómo mostrar y compartir mis vídeos en vivo de Facebook Live en mi página web? Guía paso a paso

Cuando quieres llevar adelante un plan de marketing sostenido será necesario que uses todas las herramientas que tienes al alcance de tus manos. Una de ellas es mostrar y compartir los vídeos de Facebook en tu sitio web.

Para esto será necesario que conozcas los beneficios que tiene integrar tus transmisiones en directo con la página de tu empresa o marca personal en Facebook. Esta información la podrás encontrar en los siguientes párrafos.

Pero esto no es todo, también te explicaremos el paso a paso que debes hacer para mostrar tus transmisiones de Facebook Live con los internautas de tu sitio web. Comencemos.

¿Cuáles son los beneficios de integrar tus transmisiones de Facebook Live en tu sitio web?

Si quieres aumentar tus visitas y crecimiento orgánico optar por integrar Facebook Live en tu sitio es una estrategia muy buena. Imagínate, tus visitas te podrán ver cara a cara y en vivo desde el primer instante. Esa empatía que has conseguido con tus seguidores, lo tendrás de seguro con todo el que ingrese al sitio. Eso implica que tus followers podrán conocer más de ti, tu empresa o servicios y de forma rápida.

Ni siquiera tendrán la necesidad de ingresar en FB para ver los stream, cualquier usuario que no utilice la red social tendrá acceso a tus contenidos. Hasta podrán interactuar en tiempo real contigo y tu público. Eso sin contar con el tiempo y el espacio que ahorrarás si te decides por las transmisiones simultaneas. Claro, para esto debes aprender a vincular tus Lives correctamente.

Además de conocer de cerca las necesidades de las buyer personas de tu estrategia de marketing (porque es el Live de FB es una herramienta ideal para el branding) tendrás la opción de elegir mejor los caminos que quieres seguir para alcanzar tus objetivos. Esto te ayudará a ahorrar dinero y tiempo en saber cuál es tu punto de equilibrio. Por último, si cumples con algunos requisitos impuestos por la red social, podrás monetizar tus vivos y de esta manera ganar dinero extra como un verdadero influencer.

Aprende paso a paso cómo mostrar tus transmisiones de Facebook Live con los internautas de tu sitio web

¿Has insertado antes vídeos de Youtube u otra plataforma en tu sitio web? Entonces sabrás que, mediante la URL, o la dirección del vídeo, es la manera más fácil de mostrarlo a tus visitantes. Para esto solo tienes que empezar la transmisión en FB y hacer clic derecho dentro del reproductor. Después de esto, copias el enlace completo que obtengas de forma automática. Hecho esto, pegas el código en el HTML de la página del sitio donde lo desees colocar.

Una vez que guardes los cambios, publiques y actualices estará abierto para que cualquiera que lo desee pueda verlo sin inconvenientes. Tan simple como esto para mostrar tus transmisiones de FB Live. Si por algún motivo la transmisión no sale como lo esperabas ¡no te preocupes!

Te mostraremos otros pasos para solucionar el inconveniente de compatibilidad que tienes con tu reproductor. Es decir, el tamaño del software que usas para reproducir no se ajusta bien a las medidas de la página. Los pasos que verás a continuación también te ayudarán para aquellas ocasiones en las que quieres ir un tanto más allá, para que las personas que visitan tu web puedan participar de forma activa.

Por todo esto, te mostraremos el paso a paso para hacer una inserción más completa en tu propio sitio, usando Facebook Live:

Comienza el directo

Lo primero que tienes que hacer es empezar a transmitir en vivo, para ello, sigue esta guía:

• Dirigete a FB e inicia sesión en tu perfil o page de Facebook.
• A continuación, comienza con el vídeo en directo como lo haces normalmente sea por tu página o perfil.
• Una vez presiones “En directo” se abrirá el reproductor nativo de la aplicación.
• Haz clic en “Conectar”.
• Dirígete a la ventana lateral derecha, en la pestaña “Publicación” y pulsa en la misma.
• En la esquina encontrarás la opción “Insertar este vídeo” por lo que tendrás que hacer clic en ella.
• De inmediato se abrirá una ventana emergente en la que aparecerá el código del vídeo en vivo.

Obtén el código con el reproductor de vídeo integrado

A este paso debes prestar mucha atención porque tendrás que hacer modificaciones si quieres personalizar más las opciones. Esto es en caso de que necesites de que el vídeo aparezca con botones para dar Likes, hacer comentarios y demás. Por supuesto esta es la mejor forma de mostrar el vídeo.

Los pasos que harás son:

• Pulsa en la opción “Configuración avanzada”.
• Desde aquí la plataforma te dirigirá a otra sección llamada “Video Player Configurator” dentro del sitio. Esta es una herramienta de desarrolladores para ajustar más características de la URL del directo.
• Primero modifica el ancho del vídeo a tu gusto, esta herramienta se encuentra justo al lado del enlace.
• Luego marca la casilla “Incluir toda la publicación”.
• Hecho esto debes abrir la ventana donde indica “Obtener código”.

En caso que quieras agregar de manera manual los códigos, también lo podrás hacer.

Los códigos que tendrás que usar son:

<html>

<head>

<title>Your Website Title</title>

</head>

<body>

<!-- Load Facebook SDK for JavaScript -->

<div id="fb-root"></div>

<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

<!-- Your embedded video player code -->

<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">

<div class="fb-xfbml-parse-ignore">

<blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">

<a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>

<p>How to share with just friends.</p>

Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014

</blockquote>

</div>

</div>

</body>

</html>

Siendo data-href la dirección URL del vídeo que quieres incorporar.

Modifica el código

Tras hacer clic en “Obtener código” tendrás dos formas de insertar el stream en vivo, una de ellas es seleccionando la pestaña “IFrame” con el código en cuestión. Esta es más sencilla puesto que solo se trata de copiar todo el código que ves en la ventana. Luego de esto te diriges a tu propio sitio web y en la sección de editor HTML lo insertas justo donde lo desees. Guardas, publicas, actualizas el sitio y listo.

Ahora bien, hay otra opción un poco más compleja que se ubica en la otra pestaña con el “SDK de JavaScript”, en este punto hará falta un poco de conocimiento de programación. Si no lo tienes, no te preocupes porque es posible llegar a hacerlo por tu cuenta con lo que diremos. Se trata de pegar parte del código SDK de Facebook para JavaScript en la página después de la etiqueta de <body> de apertura. Mientras tanto el resto del código debe ir donde deseas que aparezcan los Lives de FB.

En WordPress usa el plugin del reproductor y luego ingresa:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553"

data-width="500" data-allowfullscreen="true"></div>

Pero si no quieres usar el SDK de Facebook para JavaScript vas a tener que escribir el código:

<script>window.fbAsyncInit = function() {

init({

xfbml : true,

version : 'v3.2'

});

}; (function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

src = "https://connect.facebook.net/en_US/sdk.js";

parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

Otra manera que tienes es utilizar la función de inserción de vídeos API Graph, ingresa los siguientes códigos:

{

"data": [

{

"id": "1234567890", / Siendo el valor "id": "1234567890" "https://www.facebook.com/video.php?v={id}"

"created_time": "2015-02-25T23:22:06+0000",

"description": "My Video Caption",

"embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",

"format": []

}

]

}

A continuación, diseña el tamaño del vídeo en la pantalla de un ordenador. Escribe para ello:

<!-- WRONG! -->

<style type="text/css">

.fb-video {

width: 500px;

}

</style>

<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->

<div class="fb-video" data-href="{your-video-post-url}"

data-allowfullscreen="true" data-width="500"&gt;</div>

En caso de que quieras que el contenido se vea en toda la pantalla escribe al código la propiedad data-allowfullscreen="true". Para que tu vídeo pueda ajustarse a la pantalla de un móvil no tendrás que programar nada adicional, ya que de forma automática el código efectúa los ajustes necesarios.

Lista de las mejores herramientas para transmitir en vivo desde Facebook Live en tu sitio web

Te mostraremos a continuación las mejores herramientas que puedes usar para transmitir en vivo desde Facebook en tu web personal:

Facebook Live Vídeo Auto Embed for WordPress

En el top de plugins para WP que facilitan la vida está Facebook Live Video Auto Embed for WordPress. Esto se debe porque solo hace falta descargarlo y mantenerlo actualizado para agilizar la tarea de vincular los Lives al sitio. No importa si los stream provienen de tu perfil, de tu Fan Page o desde un grupo, incluso tienes la facilidad de insertar otros vídeos de Live pregrabados sin problema.

Es decir, con esta herramienta no hay límite con los contenidos audiovisuales que quieras insertar. Facebook Live Video Auto Embed for WordPress está diseñado para detectar de forma automática si estás transmitiendo para insertar los stream, también avisa en el sitio si estás activo en la red.

Para ello tan solo se configura una discreta barra de notificaciones en la parte de arriba de las páginas. Con esto tus seguidores estarán conectados y podrán participar desde cualquier medio y, si no estás en línea, tienes la posibilidad de dejar mensajes automáticos a tus visitantes. Es un complemento en sintonía con el diseño responsive por tantos beneficios tenía que estar en la cúspide.

Descargar Facebook Live Vídeo Auto Embed para WordPress

Widget de página de Facebook

Puedes optar por utilizar el Widget de página para Facebook. Por lo general, si agregas este plugin solo aparecerá el encabezado y la foto de portada, pero no es esto lo que buscamos. Más bien debes agregar varias pestañas, luego por medio del código IFrame incorpora las transmisiones en directo de Facebook. Así pueden verse los vídeos en directo usando solo un Widget.

Ingresa los plugins de las páginas al sitio web:

<div class="fb-page"

data-href="https://www.facebook.com/facebook"

data-width="380"

data-hide-cover="false"

data-show-facepile="false"></div>

Luego agrega varias pestañas:

<div class="fb-page"

data-tabs="timeline,events,messages"

data-href="https://www.facebook.com/YoloBookStore"

data-width="380"

data-hide-cover="false"></div>

WPLiveStream.com

Por otro lado, tienes el complemento fácil de descargar WP Live Stream. Si bien es un plugin de pago es uno de los más completos en materia de streaming en directo. Tiene un coste de alrededor de 59 € al año si lo utilizas en un solo sitio web. Además, la ventaja de este programa con relación a los demás es que se especializa únicamente en contenidos en vivo.

Solo debes copiar y pegar el enlace corto de los vídeos y listo, este software detectará e insertará en breve la transmisión. Tiene actualizaciones gratuitas y el desarrollador asegura que no pasarán más de 3 minutos en la detección de la emisión. Incluso, si no estás contento con tu compra puedes pedir el reembolso antes del mes.

Bloque de inserción de Elementor

Otro plugin que te puede ahorrar muchos inconvenientes en el futuro es Elementor. Este complemento para crear páginas es muy conocido y utilizado. Pero ¿qué tiene que ver con los Lives de FB? Pues fácil, este integra entre sus utilidades un bloque de inserción especial para Facebook.

Solo tienes que añadir a los ajustes el ID de la app de esta red social, esto lo harás a través de la configuración de integración. Lo bueno de Elementor es que es un complemento muy flexible porque es posible añadir extensiones de bloques de cualquier tipo, el cual se acoplará de forma perfecta. Utiliza la URL https://elementor.com/ para entrar a este programa y comprar alguna de sus versiones de pago.

Free Livestream

El software Free Livestream – Live Video Streaming With Hapity es un complemento alternativo ideal que te permite hacer transmisiones simultáneas a Facebook. Además, incluye alojamiento de vídeo gratuito para que estos contenidos no ocupen espacio innecesario en tus dispositivos. Sus desarrolladores prometen que en menos de 5 minutos podrás configurar todo rápidamente.

Descargar Free Livestream – Live Video Streaming With Hapity