[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í.
- OBS Studio. Un programa gratuito para gestión de transmisiones online (se puede hacer con otros).Lo puedes descargar aquí : https://obsproject.com/.
- 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.
- 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.
- ACCESS TOKEN de FB. Es un identificador para las aplicaciones de FB. Sino sabes como sacarlo dilo en comentarios y hago un manual
- 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
Nos saldrá la parte de los datos de conexión del streaming live que utilizaremos en OBS.
Con esos datos nos vamos a OBS y esta vez en la parte de streaming la configuramos de esta manera.
Como vemos la emisión ahora no funciona.
Así que le damos a Iniciar transmisión en OBS y la pantalla ya nos cambia un poco.
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)
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.
Le damos un nombre.
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í
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.
Luego vamos al Dashboard de OBS le damos doble click al BrowserSource le damos a Aceptar para que recarge los datos y ya está.
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
Hola, cuando dices «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.» le doy al botón del + pero me aparecen todas las opciones excepto la de BrowserSource. ¿Cómo puedo hacer que aparezca para continuar el tutorial? Mil gracias
Aquí te puedes descargar los plugins para el Browser en el caso de que hayas bajado la classic ya que la studio lo tiene integrado.
https://obsproject.com/forum/resources/browser-plugin.115/
La Studio mía no la lleva, será la clasic la que lo lleva no? Yo lo instalo y no me aparece. en mac.
¿NO lleva el plugin del Browser?
He vuelto a reinstalar y ahora sí!
Me alegro. Estoy haciendo pruebas para que el HTML sea más sencillo (para 2 o 3 opciones) y sea mas fácil de modificar.
Hola, cuando dices «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.» le doy al botón del + pero me aparecen todas las opciones excepto la de BrowserSource. ¿Cómo puedo hacer que aparezca para continuar el tutorial? Mil gracias 🙂
¿Que versión de obs te has instalado? La studio o la classic. Si es la classic lo del Browsersource tienes que instalarlo como plugin aparte
Hola de nuevo, muchas gracias. Una vez que he añadido el access token y el post id donde indica «pon aqui facebook access token» y «pon aqui tu post id», ¿porqué en el archivo descargado me dice «pon aquí tu post id solo el número» ? A pesar de ese cambio lo he copiado igual que lo has hecho tu pero con mi post id.
Ahora bien, me sale igual que a ti, como la ultima imagen pero, ¿donde aparece el contador? He probado a dar a me gusta como mi pagina en la publicacion y no sale el marcador. Por otra parte, ¿cómo cambio la imagen de fondo y elimino o muevo los iconos si solo quiero hacer una pregunta con 2 respuestas? Quizas son muchas preguntas, no se si con un video tutorial podrian ser resueltas o si no por escrito. Mil gracias por el tiempo tomado.
Te explico : Si por ejemplo el id del vídeo es el siguiente : https://www.facebook.com/1417434795167910/videos/1818591321718920/ el post ID es el primer número. En este caso :1417434795167910 . Y el ACCESS TOKEN lo Sacas de Facebook Developer. Si ves que no te aclaras intento hacer un vídeo.
Un vídeo paso a paso seria excelente gracias
Intentaré sacar algo de tiempo y lo haré.
Bien, lo he hecho así y me sigue sin contabilizarlo. No se donde puede estar el error pero he seguido paso a paso lo indicado, supongo que no importe que la pagina de Facebook donde estoy probando no esté publica ya que aún asi pruebo a dar a me gusta a mi mismo con mi cuenta personal y como la pagina… De nuevo gracias por tu tiempo
Yo hice las pruebas en una privada y aún así funcionaba. Voy a ver si saco un poco tiempo y hago un vídeo tutorial a ver si viéndolo quedan las cosas más claras.
De acuerdo, me mantendré a la espera. Mil gracias por tu tiempo
Amigos muchas gracias por la información he llegado hasta le punto 2 pero no tengo ni idea de donde sacar Página Web Modificada y siguiente ACCESS TOKEN de FB estoy un poco perdido hay gracias
Para sacar al ACCESS TOKEN TIENES que hacer una app en FACEBOOK. Aquí te dejo un link donde te lo explica. Para lo de compartir el link a cambio de un me gusta o de compartir en twitter se hace con un plugin para WordPress llamado Social Locker.
Aquí te dejo el link para obtener el ACCESS TOKEN :
https://www.youtube.com/watch?v=tOCxKbhK1GI
Es un vídeo que te explica como obtenerlo
Hola buen tarde mi OBS es 0.16.2 windows intente de nuevo pero no me funciona esperare el vídeo tutorial…. muchas gracias excelente aportes haces
Hola de nuevo,
He seguido todos todos los pasos del video tutorial que has puesto pero sigo exactamente igual con el mismo problema. Al dar a me gusta o cualquier otra acción no se actualiza, quizás el error esté en el archivo index en algo que hay que cambiar o configurar y no hago pero como ya digo sigo todos los pasos del video que has subido. Es mas, en el video se ve que en el minuto 12:32 la persona que hace el tutorial prueba y le ocurre lo mismo que a mi, que no se actualiza ni empieza a contar y que tras varios segundos para el video y lo reinicia de nuevo con el error ya solucionado. AHora, cual es el error que el ha cometido y que yo también estoy cometiendo, eso no lo se… Muchas gracias de nuevo, a ver si porfin lo consigo
Si te fijas arranca el vídeo después modifica el html con los datos del vídeo y del token y pinchas en obs donde BrowserSource. Ves que te vuelve a sacar las opciones del plugin. Le das como si lo hubieras configurado y obs recarga el HTML y los marcadores vuelven a funcionar. Recuerda que del vídeo no hay que poner la ruta entera, sino solo los números identificativos del vídeo del final.
¡Hola! soy Diego, me he permitido el lujo de crear un video tutorial de todo esto a partir de tus consejos y material. No te preocupes, los que lo sigan tendrán que recurrir a tu post para adquirirlo.
Sólo quería agradecerte el trabajo, espero que te guste el mío y te invito a que intercambiemos o participemos en alguna de esas idasdeolla.
¡Hasta pronto!
PUes cuando quieras. Muchas gracias por el tutorial. Ahora estoy estudiando la Api de Framework para poder hacer cosas mas espectaculares como se están viendo ahora.
Pues cuando tengas cositas avisa y lo probamos 😉
Buenas tardes! En primer lugar muchísimas gracias por tu ayuda! Estoy enormemente agradecido porque me gustan estos desafíos de internet y gracias a usted estamos en ello.
Acabo de hacer la publicación toda la configuración es correcta y la participación elevada. Mi página tiene más de 12mil seguidores. Enlazo la publicación todavía activa: https://www.facebook.com/tauroemocion/videos/1219778334772151
En OBS a tiempo real y transmisión esta en las tres opciones: 179 like, 274 corazon, 96 triste.
Sin embargo, en el directo de Facebook que ve la gente, va muy ralentizado… a qué se debe? 77 like, 90 corazon, 34 triste.
Las tres fotos adjuntas y sus textos las he subido por OBS, del mismo modo que cargué el html. Es decir, las fotos no las he incrustado en el fondo o añadido al html.
Por cierto, el mac lo llevo muy ralentizado últimamente y la conexión adsl no es muy buena.
Qué creéis que ha podido pasar?
Un saludo!
Me alegro que al final lo hayas conseguido. Eso que dices que hay desfase entre lo que ves en OBS y lo que ves en tu FAcebook evidentemente se debe a tu velocidad de conexión. No olvides que estas retransmitiendo casi FULLHD y eso necesita un buen ancho de banda de subida. Los adsl las subidas la suelen tener un poco pobres. Si puedes pruebalo en un sitio con una buena conexión y ya veras como la cosa cambia.
De bajada tengo unos 7 mb y de subida 0.60 mb. Logicamente para HD es pésimo. Si reduciera parametros iria mejor?
Si. Pero perderías calidad en el vídeo. Y eso se notaría.
Hola estoy claro que los pagan por hacer este tipo de cosas quería saber si realizaron el tutorial en video muchas gracias
Creo que te confundes un poco con el comentario. A mi nadie me ha pagado por hacer esto. Se que mucha gente ha cogido esta información y la está vendiendo, no es mi caso. Yo estudié el tema, lo probé y cree estos tutoriales. En cuanto al vídeo tienes en los comentarios uno. Y sino puedes ver que el artículo he puesto enlaces al blog de Vilma Nuñez que ella se curró un vídeo muy chulo. Así que por eso yo no creé vídeo.
Un Saludo