Superguía – Cómo crear un Facebook Live con contadores de reacciones en tiempo real

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.

guion-para-facebook-live-con-reacciones

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.

 Tip: Nunca le hagas like a la página desde tu perfil porque tus amigos lo verán. Esta página es de pruebas, si alguien se cuela bórralo a través de configuración.

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.

como-conseguir-tu-access-token-de-la-app-de-facebook

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.

 Antonio Rull me comenta que podemos extraer el ID de nuestras publicaciones antes de emitir. Tan sólo tenemos que ir a la tuerca de la publicación y darle a insertar. En este código nos saldrá el ID.

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.

ejemplo-de-facebook-live-reactions-con-reacciones

b. Exporta las imágenes en JPG y con el mismo nombre que están en la carpeta.
c.  Sustituye el logo actual.
 IMPORTANTE: debes utilizar los mismos nombres con las imágenes para que funcione.
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. 

 OBS no sólo es útil para emitir un contador con reacciones (te recomiendo agregar más fuentes para poder mostrar tu pantalla o salir en cámara), sino que además es una herramienta MUY buena para hacer un buen Facebook Live.

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.

Espero que este tutorial te haya servido. Nosotros nos hemos divertido mucho en el proceso de montarlo 😉

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.

ejemplo-reacciones-facebook-en-facebook-live-save-the-children

Les comparto otro ejemplo del Diario.es

ejemplo-eldiarioes-reacciones-facebook-live

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.

 

¿Quieres acceder a cientos de contenidos de Marketing?

Visita mi librería de Marketing Online, la más grande de habla hispana, y encontrarás plantillas, ebooks y cursos que te ayudarán a formarte y a potenciar tus proyectos online. Si estás interesado en cursos online visita directamente mi página con todos mis cursos gratuitos y de pago.

recursos de marketing digital gratis

Todos los derechos reservados. Esta obra está protegida por las leyes de copyright y tratados internacionales.

You may also like

62 comments

  • Sergio Sáez de Ibarra November 16, 2016   Reply →

    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.

    • Vilma Núñez November 17, 2016   Reply →

      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.

  • Encarni November 16, 2016   Reply →

    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!

    • Vilma Núñez November 17, 2016   Reply →

      Hola Encarni. Es totalmente recomendable tener una página de pruebas como mínimo. Verás como te ayuda.

      • Encarni November 17, 2016   Reply →

        ¡Gracias por el consejo! En unas semanas espero tener varias en marcha, espero poder probar todas las cosas que tengo en mente. ¡Saludos!

  • Juan Francisco November 16, 2016   Reply →

    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

    • Vilma Núñez November 17, 2016   Reply →

      Hola Juan.
      Que cosa más rara. Vamos a mirar a ver qué tal. Pero a otros le ha funcionado.

  • josivi November 16, 2016   Reply →

    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

  • Chuy November 17, 2016   Reply →

    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…

    • Vilma Núñez November 17, 2016   Reply →

      Hola Chuy. Es raro. ¿Tienes la página de pruebas publicada?

      • Chuy November 18, 2016   Reply →

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

        • Vilma Núñez November 21, 2016   Reply →

          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.

  • David November 17, 2016   Reply →

    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

    • Vilma Núñez November 17, 2016   Reply →

      Hola David ¿Cuándo te sale ese error? Para crear la aplicación o para emitir el live?

  • Rebeca November 17, 2016   Reply →

    Excelente tutorial. Ahora a ponerlo a funcionar. Gracias por compartir todo lo que sabes

  • Borja November 17, 2016   Reply →

    Vilma! Gracias por el post, llevaba tiempo queriendo empezar a añadir este tipo de técnica para aumentar el engagement en FB.

  • José Luis November 18, 2016   Reply →

    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.

    • Vilma Núñez January 4, 2017   Reply →

      Algún paso debes realizarlo denuevo o asegúrate de que el ID no tenga un espacio o número de más

  • Miguel November 18, 2016   Reply →

    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.

  • Oscar November 19, 2016   Reply →

    Hola muy bien con el tutorial es entendible, pero tengo problema el contador no me aparece los numeros 🙁

    • Vilma Núñez November 21, 2016   Reply →

      Hola Oscar ¿Qué te sale?
      REvisa bien el tema generar el token de Facebook y el ID.

      • Oscar November 22, 2016   Reply →

        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.

      • Dan November 24, 2016   Reply →

        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,

      • Oscar November 25, 2016   Reply →

        Hola Vilma, me pregunto como podria hacer para vincular el post id desde mi facebook personal y no desde una fan page, es posible?

  • Alberto November 20, 2016   Reply →

    Millones de gracias! Funciona perfectamente!

  • Alberto November 20, 2016   Reply →

    Lo único que noto es que el refresco es bastante impreciso. ¿Es normal?

  • Daniel Gutiérrez November 22, 2016   Reply →

    Muchas gracias, excelente guía Vilma!

  • Vicente Orozco November 24, 2016   Reply →

    Hola Vilma, tengo problema también con el contador. Se reproduce correctamente el vídeo pero nunca me aparecen los contadores en el directo

    • Vilma Núñez January 12, 2017   Reply →

      Hola Vicente, intenta realizar los pasos denuevo, ya que es muy extraño que te suceda eso

  • Emilio November 30, 2016   Reply →

    Hola Vilma!
    No hay manera, sigo los pasos y no me aparece el contador para ver la suma de votos y reacciones 🙁

    • Vilma Núñez January 12, 2017   Reply →

      Realiza los pasos nuevamente, ya que al seguir los pasos al pie de letra debe de aparecerte sin ningún problema

  • Brian December 13, 2016   Reply →

    Hola, cual es el tamaño recomendado para la imagen?

  • Javi Pérez December 29, 2016   Reply →

    Genial post Vilma! Mejor no se puede explicar. Gracias por compartir esta info.

  • Georgina January 12, 2017   Reply →

    Hola Vilma! Lo acabo de probar y funcionó de maravilla. Uso windows y cambian algunas cosas pero salió genial. Muchas gracias!!!!!

  • Ulysses Náfate January 20, 2017   Reply →

    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

  • Andres January 31, 2017   Reply →

    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

  • Francisco February 7, 2017   Reply →

    ¡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

  • Angel April 30, 2017   Reply →

    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!

  • Florencia June 14, 2017   Reply →

    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!!

  • Gabriel Ocampo June 22, 2017   Reply →

    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

    • Vilma Núñez June 27, 2017   Reply →

      Hola Gabriel, lo explico en la guía cómo hacerlo con OBS

      • Gabriel Ocampo June 29, 2017   Reply →

        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

  • Mariano August 10, 2017   Reply →

    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

Leave a comment