Tutorial : Facebook Live con Contadores en Tiempo Real en página local

Tutorial : Facebook Live con Contadores en Tiempo Real en página local

[AdSense-A]

Ayer en el anterior tutorial os dije que os iba a explicar otra forma de hacer el efecto este tan chulo de Facebook Live. Hoy hay algunas partes que son iguales en el anterior tutorial por eso veréis las mismas capturas pero este vez es Facebook Live con Contadores en Tiempo Real en página local.

Por lo visto ha habido gente que esta información no querían que saliera a la luz porque entonces perdían una ventaja en el mercado pero aunque la gente intente poner barreras al campo en Internet hay gente que ayuda a la comunidad y que es capaz de dar libremente estas soluciones para que todos podamos disfrutarlas.

Facebook Live con Contadores en Tiempo Real en página local

Los requerimientos  son los mismos que en el anterior tutorial. Así que no me importa repetirlos aquí.

 

  1. OBS Studio. Un programa gratuito para gestión de transmisiones online (se puede hacer con otros).Lo puedes descargar aquí : https://obsproject.com/.
  2. Imagen de Fondo . Con un tamaño de 1280×720 para poner de fondo en la transmisión  y con hueco para poner los contadores.
  3. Página Web Modificada. Al final del tutorial doy un enlace para que te bajes la página web con la que se desarrolla el tutorial.
  4. ACCESS TOKEN de FB. Es un identificador para las aplicaciones de FB. Sino sabes como sacarlo dilo en comentarios y hago un manual
  5. Un poco de Paciencia. Fijo que tendrás que probar para que salga varias veces así que ármate de paciencia.

 

Pasos

La primera parte del tutorial es casi idéntica al anterior solo que en este no necesitamos una web externa para hacer el efecto sino que tendremos una página local donde haremos la magia.

De todas maneras explico los pasos.

Instalamos OBS y vamos a nuestra Fan Page en la parte de Herramientas de Publicación. Vamos a la parte de Vídeos y allí le damos al directo

herramientas_publicacion

video_directo

 

Nos saldrá la parte de los datos de conexión del streaming live que utilizaremos en OBS.

 

datos_conexion

Con esos datos nos vamos a OBS y esta vez en la parte de streaming la configuramos de esta manera.

 

configuracion_obs

Como vemos la emisión ahora no funciona.

video_directo_02

 

Así que le damos a Iniciar transmisión en OBS y la pantalla ya nos cambia un poco.

 

 

video_directo_03

 

En esa pantalla configuramos el título de la transmisión de vídeo y las etiquetas y le damos a programar vídeo (son unos 10 minutos)

video_programado

transmision_programada

 

Ahora lo que vamos a hacer es añadir en OBS la página web que es la que vamos a retransmitir con los iconos,reacciones, y demás con BrowserSource.

 

browsersource

 

Le damos un nombre.

 

nombre_superposicion

Ahora viene una ligera modificación con respecto al tutorial anterior. En vez de usar una página web, vamos a usar una página web local. Así que la elegimos en OBS y ponemos la siguente configuración. Y nos queda algo así

 

web_local

 

 

 

 

Ya tenemos el vídeo programado ahora necesitamos introducir los datos del vídeo en la página web que se acompaña (se puede hacer con un editor de texto como notepad++. No aconsejo notepad).  Sacamos el POST ID de la publicación y el ACCESS TOKEN (que es el que hemos obtenido de la sección Developer de Facebook. Guardamos el archivo.

modificacion_codigo

 

 

Luego vamos al Dashboard de OBS le damos doble click al BrowserSource le damos a Aceptar para que recarge los datos y ya está.

web_local_02

 

 

Ahora ya nos funcionaría con una página web y sin necesidad de una aplicación. Como dicen que los magos no descubren todos los trucos solo a modo de comentario final os diré que ya que está en formato web se puede personalizar bastante y ahí lo dejo.

Aquí os dejo los ficheros web para que los podáis usar. No los he programado yo. En el fuente del fichero Index.html se puede ver toda la información. Espero que os haya servido de ayuda y ya podéis emular a los grandes y sus «trucos». Y hasta aquí el tutorial de  Facebook Live con Contadores en Tiempo Real en página local. Espero que lo saquéis partido.

 

[sociallocker id=»920″]

https://www.dropbox.com/s/yh6dwf5d30h2lbf/Facebook-Live-Reactions.zip?dl=0

[/sociallocker]

 

Como veo que el manual suscita muchas preguntas voy a intentar contestar a las que mas se repiten en vuestros comentarios : 

Preguntas Frecuentes

  • ¿Como saco mi ACCESS TOKEN?. Para responder a esto os pongo un vídeo que explica como hacerlo :

  • ¿Para cuando el manual en vídeo? Un poco de paciencia. Sacaré el manual en formato vídeo.
  • ¿Como modifico el aspecto de la web? Para eso hay que tener unos mínimos conocimientos de HTML y CSS. Así podrás modificar el fondo. Que solo te muestre los contadores que necesitas bien colocados, etc.

A medida que vaya saliendo preguntas las iré poniendo en esta sección y antes de nada muchas gracias a todos los que están comentando.

Vídeo

 

A falta de que haga un vídeo aquí os dejo uno que he encontrado en youtube que os puede ayudar bastante (quitadle la música porque es un poco cargante). Pero para ver el mecanismo de como funciona os puede valer.

 

Como se que mucha gente se lía a la hora de hacer este tutorial. La señorita Vilma Nuñez y su exposo os lo han puesto fácil. Os aconsejo que visitéis su tutorial aqui :

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