En los últimos días habréis visto cómo muchas páginas se unieron al movimiento de emitir a través de Facebook Live con contadores interactivos de reacciones. Estos contadores utilizan la tecnología de Facebook para convertir cada reacción en un número que luego sumado a otros genera un contador divertido.
Este nuevo formato ha creado mucha controversia, algunos desean hacerlo (razón por la cual decidí montar este artículo) y otros lo critican porque lo consideran SPAM. Mi opinión está en el medio, creo que sí podemos utilizarlo dentro de una estrategia, pero no estoy de acuerdo en emisiones sin sentido que sólo buscan llamar la atención de fans por un momento. Ese tipo de emisiones me parecería como comprar amor por unos minutos y todos sabemos que no es real. Sin embargo, lo que sí funcionaría es que incluyamos este tipo de contadores en una estrategia mayor.
Al tema de contadores llevo siguiéndole la pista hace bastante. Con mis ex-compis de MUWOM montamos un contador de Twitter para el programa de televisión El Hormiguero a través del cual la audiencia votaba por sus artistas favoritos. El contador por sí solo era tecnología, pero detrás había una estrategia y un guión para juntar lo real con lo digital.
Esto es lo mismo que os recomiendo a vosotros (os dejo una gráfica de ejemplo). Como veréis, los primeros minutos son para conectar con la audiencia y son cruciales. Luego tenemos que iniciar a aportar valor sin olvidarnos de que la gente reaccionará con me gusta, corazones y hasta comentarios. Esto significa que tenemos que intentar acomodarnos a sus reacciones si queremos conectar mejor con ellos. Mi propuesta es que incluyas los contadores de reacciones en el medio de tu emisión, de una forma más natural. Primero educas y luego pides feedback de lo que acabas de decir. Esto no debería durar más de 5 minutos, no hace falta darle tanto protagonismo a una funcionalidad divertida.
Guía definitiva para hacer contadores con reacciones en tiempo real y en Facebook
Para crear la guía he contado con el apoyo de mi esposo Jose (para la parte de programación). También quiero agradecer a Monty por haber escrito dos buenos artículos sobre el tema en su blog diariodeunfriki y a Socialwall.me por aportarnos un HTML de base para trabajar desde que salió esta moda de reacciones en directo. Gracias al aporte de Monty, SocialWall y Jose hoy os puedo traer una guía fácil y unas plantillas de HTML gratis que podéis editar. No hace falta que os deis de alta en mi blog para descargarlas, pero si queréis tener trucos de este tipo os recomiendo suscribiros.
Los objetivos de este artículo son que puedas entender cómo funcionan las reacciones en directo y que tengas las herramientas y guía necesarias para probarlo o implementarlo.
Ingredientes para esta receta
- Crear una página de pruebas en Facebook
- OBS (Programa para emisión en directo)
- Editor de texto para poder editar el código HTML (no te asustes, yo no soy programadora y pude hacerlo)
- Crear una aplicación en la sección de desarrolladores de Facebook
- Crear un vídeo en directo programado
- Contenido gráfico para lanzar una pregunta a tus fans
Después de haberte listado los ingredientes, quiero repasar contigo todos los pasos que necesitas para lanzar tu contador. En mi canal de Youtube he publicado un videotutorial por si prefieres seguir los pasos de esta forma.
1. Crea tu página de fans de pruebas
Si todavía no tienes una página de fans para pruebas este es el momento perfecto para crearla.
Entra en este enlace facebook.com/pages/create y crea una página con un nombre genérico y que no esté asociado a tu marca personal o marca profesional. Ejemplo: Prueba Bam Bam
Cuando tengas tu página de fans creada, pon una mínima configuración y convierte esta página en tu mejor aliado antes de lanzar cualquier otra estrategia. En mi consultora tenemos 4 tipos de páginas de pruebas, 2 grupos de Facebook y un evento para experimentar.
2. Descarga e instala OBS
Desde la página oficial de OBS (Open Broadcaster Software) podrás descargar la herramienta (está para Windows, Linux y OSX).
Descarga e instala OBS obsproject.com
Cuando tengas instalada la aplicación déjala abierta y sigue con el próximo paso.
3. Crea una aplicación de Facebook
A través de la plataforma Facebook for Developers podrás darte de alta aceptando sus condiciones. Una vez te des de alta tan sólo tienes que seguir los siguientes pasos:
- Selecciona el botón de crear una nueva APP
- Ponle un nombre a tu APP y selecciona una categoría. Ejemplo: Reacciones en directo.
- Ve a la sección de Dashboard de tu aplicación para tener a mano tu APP ID y tu Código secreto de la aplicación.
- Ve a la página de SmashBalloon -> smashballoon.com/custom-facebook-feed/access-token y baja al punto 12 para generar tu access token. Lo necesitarás para proceder con este tutorial y la emisión.
Te dejo una imagen de ejemplo.
4a. Crea tu evento en directo
Para crear tu evento en directo tendrás que ir a “Herramientas de publicación” en tu página de fans y luego seleccionar “Vídeos”. En esa sección te saldrá el botón de “LIVE” y tendrás que seguir las siguientes instrucciones:
- Copia “Stream key” y abre OBS. En OBS haces clic en preferencias y seleccionas emisión para pegar el “Stream Key” de Facebook donde dice “Clave de retransmisión”.
- Vuelve a Facebook y selecciona el botón de siguiente para poner el título, las palabras claves y la imagen de miniatura.
- Por último, programa tu Live para que tengas tiempo de seguir la configuración.
4b. Extrae el ID post de una publicación
Para conectar las reacciones de tus fans con tu Facebook Live necesitaremos el ID Post del vídeo en directo que acabas de programar.
Primero necesitarás el enlace permanente de tu vídeo en directo. Para sacarlo tienes que ir a la publicación y seleccionar la fecha. Ejemplo: Hace 1 minuto. Una vez que consigues el enlace https://www.facebook.com/215552185797794/videos/1530140925294501/ tendrás que utilizar la parte que te resalto en rojo y negrita. Ese es el ID de POST que luego usaremos en el paso número 5 de este tutorial.
5. Configura tu acción de reacciones en directo
Aquí viene la parte más técnica (no te asustes que será fácil si sigues todos los pasos tal y como están citados en este artículo o como te repaso en el vídeo).
Para configurar todo necesitarás descargarte una carpeta llamada “Reacciones Facebook Live”.
Descarga la carpeta GRATIS y sin suscripción
Esta carpeta incluye lo siguiente:
- 3 imágenes
- 1 logo
- Un archivo HTML llamado index2 (para hacer contadores de dos columnas)
- Un archivo HTML llamado index3 (para hacer contadores de tres columnas)
Lo bueno de esta carpeta que hemos creado para ti es que tan sólo tienes que sustituir y editar dos o tres cosas. A continuación te repasamos todo.
a. Crea las dos o tres imágenes que quieres utilizar en tu acción.
b. Exporta las imágenes en JPG y con el mismo nombre que están en la carpeta.
c. Sustituye el logo actual.
d. Abre una aplicación de edición de texto como TextEdit (para MAC) y edita con MUCHO CUIDADO el código HTML para cambiar y agregar algunas cosas que te comparto en la imagen de abajo.
- Cambiar el color del background
- Cambiar el titular de la página
- Agregar el access token
- Agregar el post ID
e. Dale a grabar al archivo HTML y cierra el editor de texto.
f. Arrastra el documento index2 o index3 en tu navegador y luego ve al post de tu directo en Facebook. Una vez que tengas abierto el post prueba haciendo un me gusta y confirma que se refleja esta acción en el contador. Esta prueba es en local, pero si te funciona así funcionará perfectamente en directo.
5. Configura OBS para hacer tu directo
Por último, tendrás que emitir tu Facebook Live de prueba siguiendo estos pasos:
- Abre OBS
- Confirma que en la sección de emisión pusiste la Stream Key de Facebook (como te comenté en el paso 4a).
- En el cajón inferior de OBS tendrás la sección de “Fuentes”. Haz clic en el botón de “más” y selecciona “Browser Source”.
- Aquí tendrás que elegir “Local file” y buscar el archivo de Index que editaste para la acción.
- En medidas te recomiendo poner 1920px x 1080px y luego haz clic en aceptar.
Con estos pasos terminas la configuración y podrías darle a iniciar retransmisión. Recuerda que debe ser en la hora que has programado tu vídeo en directo en Facebook.
Ideas para usar las reacciones en directo de forma inteligente
- Haz que los usuarios decidan tu próximo producto o el precio del mismo (esta última fue idea de Jorge).
- Si estás presentando novedades pregúntales cuál les gustó más
- Si estás pensando en lanzar algo pero no sabes por dónde tirar, pregunta a tus fans qué temáticas les resultarían más interesantes.
- Deja en manos de tus fans una decisión importante. Por ejemplo, que elijan tu próxima portada, diseño, etc.
Recuerda que en Facebook Live la comunicación es bidireccional, tienes que preocuparte por tu audiencia. No olvides que, aunque uses un contador, lo más importante son los comentarios y la retención de tu vídeo en directo.
Videotutorial “Cómo crear un Facebook Live con contadores de reacciones en tiempo real”
Te comparto el videoresumen de este tutorial por si prefieres seguirlo conmigo de fondo.
Ejemplo distinto de reacciones en real-time
He decidido actualizar el post para poner el ejemplo de Save The Children de reacciones en tiempo real con un Live Streaming de Facebook.
Les comparto otro ejemplo del Diario.es
Si conocéis otros ejemplos dejadme en comentarios los enlaces para actualizar el artículo.
Las reacciones en directo han hecho que la comunidad de marketers nos abramos a compartir todo el proceso. Gracias a los que habéis aportado y a los que estáis leyendo este artículo. Si tenéis sugerencias o recomendaciones escribidme a través de comentarios.
Suscríbete y recibe en tu mail:
500 ideas para crear posts que llevarán tu blog a otro nivel. Suscríbete y recíbela en tu correo.
500 ideas para crear posts que llevarán tu blog a otro nivel. Suscríbete y recíbela en tu correo.
66 comentarios en “Superguía – Cómo crear un Facebook Live con reacciones en tiempo real”
Buen artículo Vilma! Un detalle, si utilizas el ID del post tal y como indicas no va a funcionar bien ya que no funciona con la última versión de la API de facebook.
Hola Sergio. ¿Qué nuevo cambio de la API? ¿Cuándo salió?
Este vídeo lo hicimos hace 48 horas con decenas de pruebas antes de emitirlo. Nos funciona bien. Déjanos saber.
Hola, Vilma:
¡Me encantó el tutorial! Es súper útil y me parece increíble lo didáctico que resulta a pesar de la complejidad del asunto. Lo he guardado en mis marcadores para investigarlo con calma 😉
Me interesa mucho tu comentario sobre las páginas y grupos de prueba en Facebook que usáis en la consultora, y que tenéis varios tipos de prueba. ¿Existe algún problema con Facebook a la hora de crear varias páginas solo para pruebas, aunque no se usen para postear habitualmente? Tengo en perspectiva crear algunas fanpages para clientes que necesitan publicar en varios idiomas y como es una característica que no he usado nunca me gustaría hacer antes algunas pruebas.
¡Mil gracias por compartir con tanta generosidad tus conocimientos!
Hola Encarni. Es totalmente recomendable tener una página de pruebas como mínimo. Verás como te ayuda.
¡Gracias por el consejo! En unas semanas espero tener varias en marcha, espero poder probar todas las cosas que tengo en mente. ¡Saludos!
Excelente 😀
Hola Vilma! En primer lugar felicitarte por el post, porque es absolutamente increíble. Sin embargo he tenido algunos problemas de configuración.
Una vez programada la retransmisión en vivo, habiendo configurado las preferencias de emisión en OBS, y habiendo editado el archivo HTML (comprobando que funciona el contabilizado de reacciones), cuando debe publicar la retransmisión y doy al botón de inicio de la retransmisión en OBS, no publica la retransmisión en Facebook. Es decir, no aparece. Se queda, por un lado en Facebook dice “Este video debería empezar pronto” y por otro en OBS, se queda la opción de conectando intermitente, como si no terminada de conectar.
Espero sirvan estas observaciones.
Un saludo y muchas gracias
Hola Juan.
Que cosa más rara. Vamos a mirar a ver qué tal. Pero a otros le ha funcionado.
El único problema que tengo es a la hora de las proporciones del video. Yo pongo 1920 – 1080 como indicabas en el video pero en el cuadro de video de facebook me sale más pequeño con fondo negro
Hola Josivi, puedes editarlo en OBS para aumentar el tamaño.
Vilma, muchas gracias, todo me salió bien, funcionando los contadores y todo, pero al momento de darle al botón “Iniciar Transmisión” en OBS, me sale una ventana de “Error al conectarse”
No se puede acceder a la llave del canal especificado o de la transmisión, por favor comprobar dos veces su llave de transmisión. Si es correcto, puede haber un problema conectándose al servidor.”
¿Me puedes ayudar con eso? Estoy buscando en internet y no sale nada, seguiré intentando solucionar esto…
Hola Chuy. Es raro. ¿Tienes la página de pruebas publicada?
Estaba no publicada! Eso era jajaj Muchas gracias. La publiqué, seguí los pasos y todo funcionó muy bien en la prueba.
Después, hoy, hice lo mismo, pero con una página administrada con el Business Manager y no funcionaban los contadores. Edité el archivo HTML con todo lo que se debía modificar, incluido el post ID, y nunca salieron los “ceros” en el archivo HTML abierto en el navegador. La transmisión funcionó todo bien, y OBS también, pero los contadores nunca se mostraron en el archivo local.
La página de prueba no está administrada con el Business Manager, y la página donde hice la transmisión hoy, sí; ¿tal vez será algo que cambia ahí?
Te agradezco mucho la respuesta, Vilma! Saludos y gracias. 😀
Hola Chuy. Otra persona me comentó el fallo de directo con Business Manager y es absurdo. Lo voy a tener que probar para ver que falla.
Buenas Vilma,
Lo he intentado hacer y me pide permisos de Business Manager. No consigo hacerlo funcionar, da ese error, y la aplicacion la tengo en business manager.
¿Qué puedo hacer?
Saludos
Hola David ¿Cuándo te sale ese error? Para crear la aplicación o para emitir el live?
Excelente tutorial. Ahora a ponerlo a funcionar. Gracias por compartir todo lo que sabes
Super!
Vilma! Gracias por el post, llevaba tiempo queriendo empezar a añadir este tipo de técnica para aumentar el engagement en FB.
Excelente 😀
Hola Vilma, muchas gracias por el tutorial, ha sido de mucha ayuda sin embargo, al momento de poner el ID de el post, no me aparecen los contadores todo lo he seguido al pie de la letra pero siguen sin aparecer ¿alguna posible causa que conozcas?
Saludos.
Algún paso debes realizarlo denuevo o asegúrate de que el ID no tenga un espacio o número de más
Hola Vilma, eres un angel, no te imaginas cuanto llevaba buscando esto, estaba a punto de darme por vencido y suponer que era un fake pero gracias a ti ha vuelto mi fe por la humanidad, muchas gracias.
Excelente 😀
Hola muy bien con el tutorial es entendible, pero tengo problema el contador no me aparece los numeros 🙁
Hola Oscar ¿Qué te sale?
REvisa bien el tema generar el token de Facebook y el ID.
Hola Vilma, gracias, mi error fue que no lo hice desde una fan page, hay algun metodo de hacerlo directamente desde el facebook persona?, muchas gracias me sirvio de mucho.
Debes hacerlo desde una fan page 😉
Hola, qué tal?
Me pasa lo mismo con el contador. Está todo OK. Transmite, pero no se mueve el contador.
Qué podrá ser?
Muchas gracias,
¡Qué extraño! Intenta hacer todos los pasos nuevamente
Hola Vilma, me pregunto como podria hacer para vincular el post id desde mi facebook personal y no desde una fan page, es posible?
Hola Oscar. No lo he probado todavía para poder confirmar.
Millones de gracias! Funciona perfectamente!
Lo único que noto es que el refresco es bastante impreciso. ¿Es normal?
Puede pasar. Me alegro que te gustara la guía.
Muchas gracias, excelente guía Vilma!
Siempre 😀
Hola Vilma, tengo problema también con el contador. Se reproduce correctamente el vídeo pero nunca me aparecen los contadores en el directo
Hola Vicente, intenta realizar los pasos denuevo, ya que es muy extraño que te suceda eso
Hola Vilma!
No hay manera, sigo los pasos y no me aparece el contador para ver la suma de votos y reacciones 🙁
Realiza los pasos nuevamente, ya que al seguir los pasos al pie de letra debe de aparecerte sin ningún problema
Hola, cual es el tamaño recomendado para la imagen?
1200 x 1200 pixeles
Genial post Vilma! Mejor no se puede explicar. Gracias por compartir esta info.
Siempre 😀
Hola Vilma! Lo acabo de probar y funcionó de maravilla. Uso windows y cambian algunas cosas pero salió genial. Muchas gracias!!!!!
Genial 😉
Me funciono a la primera muy bien explicado, gracias. He visto algunos donde ponen a peliar unos muñequitos “x” y se lanzan cosas y al llegar a ciertas reacciones hay ganador y cambia a otra pelea de muñequitos distintos, se me hace muy avanzado, alguna idea, sugerencia de donde investigar sobre eso. Gracias de nuevo
Genial 😉 no tengo conocimiento de esas reacciones
Hola Vilma, te escribo nuevamente por si no lo llegue a mandar. Los contadores no inician, osea no aperece el 0 de entrada. Esto probandolo local como en un servidor.
Los pruebo inicialmente antes de configurar todo lo de face. Tomo tu archivo y lo veo a través de un navegador, y no se ve el numero. Vi algunos comentarios sobre el este tema, desde ya agradezco tu ayuda y tu excelente aporte
Hola Andres
Miraremos el archivo para verificar.
¡Hola Vilma! Muy útil el tutorial, me funcionó muy bien. Una pregunta, si en lugar de color quiero colocar una imagen en el fondo del html, ¿cómo debo hacer?
¡Gracias!
Saludos,
Francisco
Me esperaba un optin necesario para descargar el material… Pero al ver que no pides nada, me suscribo yo mismo. Excelente material, de verdad muchas gracias!
¡Gracias Angel!
Excelente tutorial!! El único detalle es que el acess_token que se necesita es A LA PÁGINA no a la aplicación. Eso se hace desde Herramientas ayuda > Graph API Explorer de Facebook for Developers . Tal ves este detalle haya cambiado desde que Vilma lanzó el tutorial al día de hoy.
Muchas gracias por compartir!!
¡Gracias Florencia por tu mensaje y por tu aporte!
Excelente, tengo un video transmitiendo en vivo hace meses jaja
una consulta que queria hacerles, de que manera puedo hacer que los comentarios que hagan en la publicación aparezcan en el video, lo eh visto por ahi y me encanto la idea solo que no se como buscarlo web y que me ayude a hacerlo
Hola Gabriel, lo explico en la guía cómo hacerlo con OBS
Hola Vilma, Muchas gracias por tomarte tu tiempo en contestar, me eh leído nuevamente la guía pero la idea que te planteo y que realmente no la veo es la siguiente:
Eh visto hace unos días atrás, en un FaceLive, el contador de Reacciones Y ademas (y esto es lo novedoso para mi) que cada persona que comentaba la publicación a un costado como habitualmente se suele hacer en Facebook, esos comentarios también se iban plasmando/replicando en el video mismo en un recuadro que aparecía por segundos en tiempo real y luego desaparecía, o sea que la publicación tenia contador de reacciones y ademas algo que replicaba los comentarios en el video mismo, como si hubieran creado una app en Developers que tome los comentarios de la publicación y los muestre en pantalla en tiempo real.
Yo pensé que quizás ademas de tomar el código de la publicación para incluirlo en el html y hacer el recuento de reacciones, también se podría hacer lo mismo pero con los comentarios. Y quien sabe que mas se podría hacer con eso
Yo ya tengo el OBS transmitiendo con el contador de reacciones funcionando, todo perfecto gracias a tu guía pero quería saber como lo hicieron, me quedó esa incógnita
No, con los comentarios no sabría cómo hacerlo.
Vilma, excelente post y excelente tu blog…. me encantó todo.
Te hago una consulta, parece que mi comentario anterior no salió.
Hay alguna forma de que una vez terminada la transmisión queden los resultados finales???…. se que es medio imposible…
pero??
Saludos y gracias
Como es un vídeo se queda el registro de lo que pasó Mariano.
Muchas gracias por tan buen manual, pero tengo una duda.
Para que la imagen se mantenga al aire, significa que se debe tener un equipo encendido generando el live de forma continua?
Lo otro, tiene algún manual de cómo hacer un mismo interactivo, pero con una cuenta regresiva?
Saludos y muchas gracias nuevamente.
No entiendo Jorge el comentario 🙁 ¿Lo del equipo encendido a qué te refieres?
interesante, lo pondré a prueba ya te aviso si publico algo!
¡Genial!