Cómo crear encuestas en directo en Facebook Live

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.

Encuesta en directo en Facebook
Encuesta en directo en Facebook

 

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”.

Notificación push
Notificación 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”.

Herramientas de publicación
Herramientas de publicación

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.

Clave de transmisión
Clave de transmisión

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.

Video en directo
Video en directo

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.

OBS Studio
OBS Studio

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:

numeros

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:

OBS Studio
OBS Studio
Retransmisión en local
Retransmisión en local

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.

mute

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.

[Total:6    Promedio:4.5/5]

36 Comentarios

  1. CESAR 14/11/2016 Reply
    • SergioAuthor 14/11/2016 Reply
  2. Ciano 15/11/2016 Reply
    • SergioAuthor 15/11/2016 Reply
  3. Fer 15/11/2016 Reply
    • SergioAuthor 15/11/2016 Reply
  4. Jorge 16/11/2016 Reply
    • SergioAuthor 16/11/2016 Reply
      • Jorge 16/11/2016 Reply
        • SergioAuthor 16/11/2016 Reply
  5. Jorge 16/11/2016 Reply
    • SergioAuthor 16/11/2016 Reply
  6. Raquel 16/11/2016 Reply
    • SergioAuthor 16/11/2016 Reply
  7. Raquel 16/11/2016 Reply
    • SergioAuthor 16/11/2016 Reply
  8. Raquel 16/11/2016 Reply
  9. Pedro 17/11/2016 Reply
    • SergioAuthor 18/11/2016 Reply
      • Pedro 18/11/2016 Reply
        • SergioAuthor 18/11/2016 Reply
  10. Roman 18/11/2016 Reply
    • SergioAuthor 20/11/2016 Reply
      • Borja 22/11/2016 Reply
        • SergioAuthor 22/11/2016 Reply
          • Borja 22/11/2016
          • SergioAuthor 22/11/2016
  11. Laura 23/11/2016 Reply
    • SergioAuthor 23/11/2016 Reply
  12. starlin 03/02/2017 Reply
    • SergioAuthor 03/02/2017 Reply
  13. starlin 15/02/2017 Reply
    • SergioAuthor 15/02/2017 Reply
  14. Gustavo 20/02/2017 Reply
    • SergioAuthor 20/02/2017 Reply

¡Comenta este post!

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *