Os habréis dado cuenta que últimamente se han puesto de moda las encuestas en directo en Facebook Live. Para quien no lo sepa, son esas encuestas que para votar tienes que elegir entre me gusta, me asombra, me encanta… mientras que se van viendo los resultados mediante una retransmisión en directo.
Este tipo de encuestas logran un gran nivel de interacción por diversos motivos, entre otros se debe a que las retransmisiones en directo son notificadas a los usuarios de Facebook móvil mediante “push”.
En este post voy a tratar de explicar la manera en la que realizar estas encuestas para que puedas reproducirlas en tus páginas de Facebook. Comenzamos.
Para comenzar deberemos contar con un contador escrito en HTML/Javascript que comentaremos en este post, una aplicación de streaming gratuita (OBS Studio), y un plugin de OBS para nuestro navegador.
El contador va a consistir en una página web donde pondremos de fondo un vídeo o imagen y un contador de likes y “me encanta” en Javascript utilizando la API de Facebook.
El primer paso será crear una publicación en directo. Para esto iremos a nuestra página de Facebook y clicamos sobre “Herramientas de Publicación”. En el menú de la izquierda seleccionaremos Vídeos, y seguidamente, tal y como aparece en la imagen, seleccionamos el botón “En directo”.
Aquí encontrarás la clave de transmisión que deberás utilizar más tarde en OBS Studio. Tenla a mano para cuando la utilicemos.
Hacemos clic sobre siguiente y continuamos. Completamos lo que nos pide, que es básicamente un título para la retransmisión en directo y unas etiquetas. Vemos de nuevo la clave de transmisión, es la misma que la anterior, así que no hace falta hacer nada más con ella.
Es el momento de abrir el OBS Studio.Para usuarios de MAC, según se abre el programa clicamos sobre “Configuración”. En la nueva ventana vamos a “Emisión”, y ahí nos encontramos con el lugar en el que debemos introducir nuestra Clave de retransmisión. Debemos también seleccionar el servicio, en nuestro caso Facebook Live.
En este punto dejamos dejamos dejamos a un lado OBS.
Es el momento de crear la página donde aparecerán los resultados de las votaciones en directo. Es probable que en alguno de estos puntos necesites la ayuda de un desarrollador, si cuentas con uno, perfecto! Si no, no te preocupes, cacharreando al final lo conseguirás.
En este enlace os dejo un archivo en formato .zip donde podrás encontrar una plantilla con un script para capturar las reacciones de tu post en directo, y hacer así funcional la encuesta en directo. El link es este: Encuestas Facebook Live.
Este archivo es original de socialwall.me
Este código escrito en HTML y Javascript lo que hace es, a través de la API de Facebook, realizar un conteo del número de likes, “Me encanta”, etc, y mostrarlo de esta manera en la página que retransmitimos en directo. En nuestra mano está lo bonito que quede.
Para que nuestro código Javascript interactue correctamente con la API de Facebook deberemos crear una aplicación en Facebook.
https://developers.facebook.com/apps/
Una vez creada la aplicación (me he saltado este punto porque da para otro post, si hay dudas comentad más abajo), deberemos modificar el código de la página index.html dentro del archivo que os habeis bajado.
Incluyo un link con información de la API de Facebook Live y este otro con la API Graph post reactions para que modifiqueis el código a vuestro antojo, pero en realidad sólo es necesario cambiar dos cosas que os explico a continuación.
Abrimos el archivo index.html con algún editor, yo uso Sublime Text. Una vez abierto, debemos añadir el ID del post donde va a estar la votación, y añadir también el token de la aplicación que acabamos de crear. Si no sabes cómo sacar el token, lo explican perfectamente en este post (está en ingles).
El ID del post se compone en realidad el ID de tu fan page de facebook más el ID del video en sí de Facebook Live. Para saber el ID de tu fan page utiliza esta web: http://www.bufa.es/id-pagina-facebook/ . Para conseguir el ID del video, debemos publicar la retransmisión, el ID son los números que vienen en la URL como pone en la imagen:
Entonces el ID que hay que poner quedaria como: IdFanPage_IdVideo (XXXXXX_XXXXXX)
Aquí teneis un ejemplo de cómo os debe quedar: Ejemplo página de encuesta en directo
Volvemos al OBS Studio y añadimos la ruta del archivo que acabamos de modificar de la siguiente manera:
Una vez tengas todo esto seteado le das a aceptar y comienzas la retransmisión en directo de la votación o encuesta, ya se estará retransmitiendo tu votación de la encuesta en directo con Facebook Live
Os aconsejo que quiteis el sonido a la retransmisión, sino captará el sonido de la habitación en la que estés.
Con las preguntas que se vayan haciendo, si las hay, iré actualizando el post.
Edit 1. Pronto actualizaré el script, ya que este tiene cosas raras que no me gustan. Buscaré algún otro que funcione mejor, pero la mecánica es la misma.
Edit 2. He modificado el post con el nuevo código.
Edit 3. He modificado el post de forma que la retransmisión se hace desde local, no es necesario tener dominio ni host.