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.
que tal, he intentado hacerlo pero no soy programador me podrías ayudar, mediante algun video tutorial
porque mis conocimientos en programación son limitados
lo que ya hice
baje el programa de OBS
y ya hice la aplicación en https://developers.facebook.com/apps/ y ahi me quede
gracias
Hola Cesar.
La verdad es que si no tienes conocimientos, aunque sean básicos, de HTML y Javascript te va a resultar complicado, ya que es necesario para adaptarlo a tus necesidades. No conozco ningún videotutorial que te pueda ayudar, lo siento. Trata de buscar a un desarrollador que te ayude con esta tarea.
El resto ha ido bien? Un saludo.
Buenas Sergio; tengo tres preguntas:
1. Cuando dices: ”deberemos modificar el código de la página index.html dentro del archivo que os habeis bajado.” ¿En que punto te refieres que debemos modificarlo?
2. Tengo mínimos conocimientos de HTML he modificado el HTML a mi manera y me ha quedado bien. Pero no consigo conectar los ”Me gusta” y los ”Me encanta” con el directo.
3. Ultima pregunta, al abrir el html me lo abre en Safari, hasta ahí todo bien, podría poner ese link en OBS y que funcione en Facebook? Es un link tipo: file:///Users/MIUSUARIO/Desktop/Facebook-Live-Reactions-SocialWall.me/index.html
1. En realidad, en el punto que quieras. Al fin y al cabo debes meter en el código dos cosas, el ID del post en directo (debe estar ya publicado para poder coger el ID) y el Token de la aplicación que hayas creado. Por lo que digamos que el código lo debes modificar cuando ya hayas publicado el post en directo (trata de que no pase mucho tiempo desde que publicas hasta que modificas el código, para que nadie vea que está en blanco durante ese tiempo) y cuando ya tengas la aplicación publicada.
2. Quizás tengas algún error en el código Javascript o en la configuración de la aplicación de Facebook. Trata de ponerte en contacto con algún desarrollador que te pueda ayudar en estos puntos. Yo por mi mismo, sin ayuda, no lo hubiese sacado, conté con la ayuda de un desarrollador. Por si te sirve de ayuda, este link te lleva a la API de Facebook Live: https://developers.facebook.com/docs/videos/live-video
3. Te refieres a hacer la retransmisión en local? Sin haberlo intentado te digo que sí. Prueba y nos cuentas! EDIT: He modificado el post para que se haga todo desde local, así es más sencillo.
Saludos Sergio, he visto por otros sitios que el post id es “page id + post id” en este caso no?
Hola Fer!
Gracias por comentar. Te debo una disculpa! Hablando con la persona que me ayudó te da la razón. El ID del post es el ID de tu fan page de facebook, barra baja, y el ID del post. Muchísimas gracias.
Que tal Sergio, no entendí como obtener el post ID, me podrías explicar por favor?
Bueno días Jorge, gracias por comentar
Verás, para que el post tenga un ID debes publicarlo. Una vez publicado, si vas a el y pinchas sobre la fecha se te abrirá. Normalmente te aparecen los comentarios a su derecha, y normalmente hay que darle de nuevo a la fecha de publicación para que se te abra en una nueva URL. Es en ese momento cuando tienes que mirar la URL, los números del final es el post ID.
El ID que debes añadir en el código se compone por el ID de la pagina de facebook, barra baja, Id del post, en este caso el video en directo a través de Facebook Live. (xxxx_xxxx)
Ya me confundí, pues el post es el video que voy a transmitir, no? Como lo voy a publicar si aun no tengo los datos para publicarlo.
Publicas la retransmisión, inmediatamente coges el post ID y lo pegas en el codigo junto con el ID de tu página de facebook (IdPaginaFacebook_IdPostVideo) de la manera que se explica en el post y guardas. Hay unos segundos en los que estás retransmitiendo la página en blanco, pero en hacer esto se tarda 5 segundos.
La verdad no te entiendo porque necesitamos el post ID para el HTML para que funcione el OBS, entonces no podría iniciar ninguna transmisión, ya que éste marca error al conectarse y Facebook me muestra la transmisión sin conexión, entonces como podría publicarla.
Hola de nuevo Jorge,
El post ID es necesario para que tu página se conecte a Facebook a través de la API y vaya actualizando el número de reacciones que se van generando. El post ID no es para que funcione el OBS, es para que la página actualice las reacciones.
Buenas Sergio. he conseguido hacerlo .. pero cuando le das a me gusta.me divierte….. no hay ningun contador que sume los me gusta y demás.. como hacemos eso.
Hola Raquel!
Probablemente no estes conectando bien con la API de Facebook. Comprueba que el token que estas utilizando es el correcto, y recuerda que el post ID se compone de la siguiente manera: IdPagina_IdPost . Se que es confuso por los nombre utilizados, pero se debe a la última versión de la API de Facebook.
Buenas he comprobado todo… y cuando si que cuando le pincho en megusta,me encanta… sale el iconito… por la pantalla pero no crea lista tipo … sumando 1 en la encuesta…
La verdad es que a ciegas es un poco difícil… Si está todo bien seteado te debería funcionar sin problemas. Lo ideal es que vayas a tu index.html, lo abras en el navegador y hagas click con el botón derecho => inspeccionar y en la consola compruebes que error te está dando. Así tendrás más pistas de lo que falla. Si no trata de ponerte en contacto con un desarrollador para que te ayude en esta tarea.
Tengo una campaña corriendo.. va genial… pero no suma… los votos…. Como podrias diseñar una a medida?
Hola Raquel,
Si quieres que te haga una campaña a medida mandame un correo electrónico a sergiosaezdeibarra@hotmail.com o escribeme por facebook mensaje privado.
Un saludo!
Hola Sergio, he visto muchos tutoriales que explican paso a paso y por mas que intento no he conseguido que apareciera el contador a “0”. En todos estos tutoriales que he visto indicaban que el post id era la última serie de números (por ejemplo 12345678) pero por lo que te entiendo, lo que se debe poner en el archivo html es algo así como 12345678_12345678, es decir si al pulsar sobre la fecha y hora de la publicación el enlace que te sale es algo así como facebook.com/12345678/videos/9101112 se debería poner en el archivo html ‘12345678_9101112’ ? Yo solo pongo ‘9101112’ l Quizás el fallo que tengo esté ahí… Espero qje me hayas comprendido, gracias😃
Hola Pedro!
Efectivamente, yo tambien he estado leyendo otros post que hablan de lo mismo, y practicamente todos están equivocados. Se debe a que se están copiando los unos a los otros y parece que nadie comprueba lo que escribe… cualquier cosa por captar tráfico… en fin.
Tienes razón en una cosa y creo que no en la otra. Es decir, el formato es ese: xxxx_xxxx, pero los números que coges son los equivocados. La primera seria de número es tu ID de tu fan page, y creo que no se coge cómo tu dices, al menos yo no lo hago así (mi url de fanpage no es númerica, sino mi nombre, es decir facebook.com/sergiosaezdeibarra/videos/9101112). Para asegurarnos de que lo hacemos igual, el fanpage id lo cojo utilizando esta web: http://www.bufa.es/id-pagina-facebook/
El ID del post lo coges bien.
Pruebalo de nuevo y me dices. Un saludo.
Hola de nuevo Sergio, simplemente felicitarte ya que después de numerosos intentos mirando otros tutoriales porfin lo he conseguido. ¡Enhorabuena por el tutorial y por tu pagina! Y muchas gracias por tu ayuda, sin ti no hubiera sido posible. Saludos
Muchas gracias Pedro! Me alegra que lo hayas conseguido. Un saludo y gracias por tu comentario.
Hola Sergio, yo tengo configurado todo y parece estar bien. El problema me surge en que no muestar los resultados numericos en el streaming. Y creo que es por la creacion de la APP en developper. ¿Que tipo de APP debe ser la que escogemos en configuracion del producto?
Gracias.
Debeis escoger la web app. Asegúrate de que publicas la aplicación una vez la tengas configurada!
Hola, Sergio. Me ocurre lo mismo que a Román. La emisión se hace correctamente, pero no se muestra el contador. Aunque soy desarrollador, estoy utilizando la plantilla html modificando sólo el token de la app y el post ID. También he chequeado toda la configuración de la app: está dada de alta para página web, está publicada…
Alguna idea?
Con la experiencia he visto que la mayoría de la gente tiene problemas con el ID del post. Recuerdo, el ID del post con la última versión de la API de Facebook en realidad se compone del ID de la Fanpage, barrabaja, Id del post (XXXX_XXXX)
Para sacar el Id de tu fanpage te recomiendo hacerlo en esta web: http://www.bufa.es/id-pagina-facebook/
Y el Id del post son los último número de la URL.
Prueba y me dices.
Ya lo he conseguido, Sergio!
Como es habitual en estos casos, había una errata en el token >.<
Muchas gracias!
Me alegro mucho!
Hola,
Tenemos el mismo problema que la mayoría, seguimos todos los pasos pero como el video no está publicado no nos deja acceder a la ID del post, si lo programamos para que aparezca en el timeline no nos deja abrirlo para poder coger la ID, pero si no lo programamos tampoco nos deja darle a transmitir. Un saludo
Efectivamente, así funciona. Por eso hay que publicarlo, coger el ID, pegarlo rapidamente en tu código y actualizar la páginas. Durante unos breves segundos no aparecerá el conteo en la página, 10 segundos? Lo que tardes en copiar y pegar el ID de un lado a otro. Para asegurarte de que todo va a salir bien puedes probar antes con una fanpage de prueba sin seguidores por ejemplo, así lo hice yo.
hola quería una encuesta como en la imagen de arriba que se llene la barra con los votos, crees que me lo podrias dejar??
Hola! El único descargable que tengo es el que puedes encontrar en el post. Si quieres algo más a medida escríbeme por email y podemos intentar llegar a un acuerdo.
Gracias por comentar.
una pregunta, me lo he descargado pero como ago que se llene la barra mientras van votando como la imagen del inicio
Hola Starlin. Gracias por tu comentario. Todo lo que tiene que ver con los efectos visuales es CSS y Javascript. Para poder modificarlo necesitas tener conocimientos de programación y así ponerlo a tu gusto. Si no los tienes trata de encontrar a alguien que te pueda ayudar. Este artículo está pensado para poder realizar la encuesta utilizando la plantilla descargable, pero ya si quieres algo más personalizado y no tienes los conocimientos deberás contratar a alguien que los tenga. Un saludo y siento no poder haberte sido de ayuda.
Hola Sergio
La Pagina Playground hace unas encuestas por facebook live..donde con una palabra respondes
esa palabra aparece en letras grandes en medio de la pantalla..
calculo que tiene una funcionamiento parecido al de las reacciones ..pero en este caso funciona con los comentarios
Si tenes algún dato de como se puede hacer ..te lo agradecería
Saludos
Hola!
Gracias por tu comentario. No lo he visto nunca, pero suena interesante. A Facebook probablemente le guste más ese sistema de hecho. Le echaré un ojo, y si descubro como lo hacen actualizaré este post. Sí, el funcionamiento va a ser parecido, utilizando la API de Facebook. Gracias de nuevo.