- Desde
- 13 Sep 2016
- Mensajes
- 594
Este es mi primer aporte para la comunidad y espero poder ayudar demasiado a esas personas que están buscando transmitir en sus fanpages vídeos en vivo con las reacciones. El script es muy sencillo, está desarrollado con JavaScript, HTML y CSS, a continuación te mostraré que es lo que necesitas para transmitir en vivo las reacciones en Facebook.
Para la realización de este tutorial vamos a necesitas un script que tendrás que descargar a través de MEGA:
Una vez descargada la carpeta procederemos a descomprimirla.
Paso 1
- Editar el archivo index.html (es donde está la configuración)
Esto es lo que tienen que hacer:
Pasos:
1/ Actualizar Background (Editar la linea 20 en donde dice "DIRECCIÓN DE TU FONDO AQUI" poniendo la dirección de tu FONDO)
2/ Actualizar tu logo (Editar la linea 90 en donde dice "DIRECCIÓN DE TU LOGO AQUI" poniendo la dirección de tu logo)
3/ Actualizar titulo (Editar la linea 12 en donde dice "TU TITULO AQUI" )
4/ Actualizar access token (Editar linea 105 en la parte que dice "TU ACCESS TOKEN")
5/ Actualizar POST ID (Editar linea 106 con tu POST ID) -->
Fuente original del script: GitHub
Necesitarás tener creatividad para crear un buen diseño, yo he modificado el fondo y el logo para la demostración de este tutorial.
Paso 2
Crear un Access Token con Facebook
Pasos a seguir:
Si creaste tu app con éxito, yendo a la herramienta de Access Token te debe de aparecer lo siguiente:
Copias los numeros que te salgan en la opción "App Token" y los copias en el index.html del script (linea 105)
Paso 3
Configurar OBS
Pasos:
Crear un vídeo en vivo
Necesitarás la siguiente información:
Configurar OBS
Localiza tu configuración y entra en "Emisión"...
Deberás de rellenar tu información en base a tu url de servidor y clave de transmisión que obtuviste en el punto pasado.
Seleccionar el index.html como fuente
Tendrás que hacer lo que se muestra en la siguiente imagen:
Te saldrá un cuadro de dialogo, le das a aceptar...
Ahora tendrás que activar la casilla que dice "Local File", esto nos permitirá seleccionar el archivo que vamos a transmitir, seleccionamos el "index.html" que viene en la carpeta que descargamos.
Una vez que hayamos realizado todo correctamente nos deberá salir una pantalla como la siguiente:
Como pueden ver, no sale ajustado a la pantalla, para eso necesitamos configurar los ajustes de OBS, para eso necesitamos hacer lo siguiente o simplemente seleccionando la pantalla y presionar las teclas "CONTROL + F"...
Como resultado obtendremos una pantalla como la siguiente:
Paso 4
Publicar vídeo en vivo
Una vez que hayas configurado correctamente todo, procederemos a publicar nuestro vídeo, para esto necesitamos presionar el botón que dice "INICIAR TRANSMISIÓN" en OBS:
Ahora tendremos que dar en "publicar transmisión" e ir a nuestra sección de noticias en nuestra página y copiar el enlace de nuestro vídeo en vivo:
Copiaremos los numeros que nos salgan, en este caso la transmisión fue:
Tenemos que copiar el ID, en este caso es: 1803923919876767
Ahora nos vamos a nuestro index.html y tenemos que modificar la linea 106 y ahí pondremos nuestro post id: 1803923919876767
IMPORTANTE
Para que pueda comenzar el conteo en vivo necesitamos hacer lo siguiente:
Una vez que hayas guardado y actualizado tu index.html que contiene tu POST ID, deberás de dirigirte a OBS y dar doble clic en la fuente y darle en aceptar, te muestro como a continuación:
Es de suma importancia que se haga este paso ya que actualizaremos el script con el POST ID para que el código javascript pueda ir extrayendo los likes/reactions que se vayan dando en el vídeo, se actualizará cada segundos.
Listo, tendrás una transmisión con los reactions en vivo, ahora podrás transmitir en tu fanpage en vivo con los nuevos reactions de Facebook con este script.
- OBS
- Script (link de descarga)
- Creatividad
- Poner atención al tutorial
Para la realización de este tutorial vamos a necesitas un script que tendrás que descargar a través de MEGA:
Una vez descargada la carpeta procederemos a descomprimirla.
Paso 1
- Editar el archivo index.html (es donde está la configuración)
Esto es lo que tienen que hacer:
Pasos:
1/ Actualizar Background (Editar la linea 20 en donde dice "DIRECCIÓN DE TU FONDO AQUI" poniendo la dirección de tu FONDO)
2/ Actualizar tu logo (Editar la linea 90 en donde dice "DIRECCIÓN DE TU LOGO AQUI" poniendo la dirección de tu logo)
3/ Actualizar titulo (Editar la linea 12 en donde dice "TU TITULO AQUI" )
4/ Actualizar access token (Editar linea 105 en la parte que dice "TU ACCESS TOKEN")
5/ Actualizar POST ID (Editar linea 106 con tu POST ID) -->
Fuente original del script: GitHub
Necesitarás tener creatividad para crear un buen diseño, yo he modificado el fondo y el logo para la demostración de este tutorial.
Paso 2
Crear un Access Token con Facebook
Pasos a seguir:
- Crear app en Facebook
- Publicar esa app (que sea publica)
- Ir a la Herramienta de Access Token de Facebook
Si creaste tu app con éxito, yendo a la herramienta de Access Token te debe de aparecer lo siguiente:
Copias los numeros que te salgan en la opción "App Token" y los copias en el index.html del script (linea 105)
Paso 3
Configurar OBS
Pasos:
- Crear vídeo en vivo
- Configurar OBS
- Seleccionar el index.html como fuente
- Ajustar la pantalla
- Configurar la transmisión
Crear un vídeo en vivo
Necesitarás la siguiente información:
- URL del servidor
- Clave de la transmisión
Configurar OBS
Localiza tu configuración y entra en "Emisión"...
OBS/CONFIGURACIÓN/EMISIÓN
Deberás de rellenar tu información en base a tu url de servidor y clave de transmisión que obtuviste en el punto pasado.
Seleccionar el index.html como fuente
Tendrás que hacer lo que se muestra en la siguiente imagen:
Te saldrá un cuadro de dialogo, le das a aceptar...
Ahora tendrás que activar la casilla que dice "Local File", esto nos permitirá seleccionar el archivo que vamos a transmitir, seleccionamos el "index.html" que viene en la carpeta que descargamos.
Una vez que hayamos realizado todo correctamente nos deberá salir una pantalla como la siguiente:
Como pueden ver, no sale ajustado a la pantalla, para eso necesitamos configurar los ajustes de OBS, para eso necesitamos hacer lo siguiente o simplemente seleccionando la pantalla y presionar las teclas "CONTROL + F"...
Como resultado obtendremos una pantalla como la siguiente:
Paso 4
Publicar vídeo en vivo
Una vez que hayas configurado correctamente todo, procederemos a publicar nuestro vídeo, para esto necesitamos presionar el botón que dice "INICIAR TRANSMISIÓN" en OBS:
Ahora tendremos que dar en "publicar transmisión" e ir a nuestra sección de noticias en nuestra página y copiar el enlace de nuestro vídeo en vivo:
Copiaremos los numeros que nos salgan, en este caso la transmisión fue:
Tenemos que copiar el ID, en este caso es: 1803923919876767
Ahora nos vamos a nuestro index.html y tenemos que modificar la linea 106 y ahí pondremos nuestro post id: 1803923919876767
IMPORTANTE
Para que pueda comenzar el conteo en vivo necesitamos hacer lo siguiente:
Una vez que hayas guardado y actualizado tu index.html que contiene tu POST ID, deberás de dirigirte a OBS y dar doble clic en la fuente y darle en aceptar, te muestro como a continuación:
Es de suma importancia que se haga este paso ya que actualizaremos el script con el POST ID para que el código javascript pueda ir extrayendo los likes/reactions que se vayan dando en el vídeo, se actualizará cada segundos.
Listo, tendrás una transmisión con los reactions en vivo, ahora podrás transmitir en tu fanpage en vivo con los nuevos reactions de Facebook con este script.
8:
