Tutorial: Trasmitir en vivo reacciones en Facebook (script)

  • Autor Autor Son Lux
  • Fecha de inicio Fecha de inicio
[MENTION=169178]Son Lux[/MENTION] Oye, mira que no me cuentas las reacciones. No aparece los numeritos :neglected::neglected::neglected::neglected:

Saqué el codigo de otra oágina porque quería poner imágenes. Mira, será que está bien el código??

HTML:
<!-- 
*** English ***

Updated File by Torr. http://youtube.com/torr_oficial
Original code: https://gist.github.com/anonymous/7073ea6c601f28aa65e5a077ef875526 

You should update:
1- Page Title (:34)
2- Background (:42)
3- Logo (:126)
4- Title (:127)
5- Access Token (:140)
6- Post ID (:141)


*** Español ***

Actualización por Torr. http://youtube.com/torr_oficial
Código fuente original: https://gist.github.com/anonymous/7073ea6c601f28aa65e5a077ef875526 

Cosas que deberías actualizar:
1- Título de la página (:34)
2- Fondo (:42)
3- Logo (:126)
4- Título (:127)
5- Token de acceso (:140)
6- Post ID (:141)

-->
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>BLA BLA BLA...</title>
	<style>
        html {
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          margin:0;
          padding:0;
          background: url("FONDO.jpg") no-repeat center fixed; /* YOUR BACKGROUND URL HERE */
          -webkit-background-size: cover; 
          background-size: cover; 
        }
		*, *:before, *:after {
		  box-sizing: inherit;
		}
		body{
			margin: 0;
            font-family: 'Open Sans', sans-serif;
            color: #333;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3)
		}
        header { 
            text-align: center; 
        }
        header .logo { 
            position: relative; 
            margin:100px auto 20px; 
            width:250px;
        }
        h1 { 
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 60px;
font-family: Arial;
        }
		#wrap{
			position: relative;
			margin: 0px auto;
			width: 1280px;
			height: 720px;
		}
        .tc { 
            text-align: center; 
            font-size: 3rem; 
            font-weight: bold; 
        }
        .wf { 
            width: 28%; 
        }
        .wf img.illu {
            width:80%;
            display: block;
            margin: 20px auto;
            position: relative;
        }
        .wf img.emoji  {
            width:34px;
            display: inline-block;
        }
        .wf { 
            width: 29.3%; 
            float:left; 
            margin:30px 2%;
            border:solid 1px #eee;
            background:#fff;
            border-radius: 8px;
            position: relative; 
            text-align: center; 
            min-height:180px;
        }
        img.sixOptions{
            width:200px;
            float:left;
            height:auto;
        }
        h2{
            font-size:25px;
        }
        .footer{
            width:100%;
            position:relative;
            top:500px;
            max-height:200px;
        }
	</style>
</head>
<body>
    <header>
        <img class="logo" src="logo..png"> <!-- YOUR LOGO URL HERE -->
        <h1>BLA BLA BLA...</h1> <!-- YOUR TITLE HERE -->     
    </header>
    <!-- REACTIONS -->
	<div class="tc wf likes"><img src="img/FOTO1.png" class="sixOptions"><H2>Mancera</H2><img class="emoji" src="emojis/like.png"><br/><span class="counter"></span></div>
    <div class="tc wf happy"><img src="img/FOTO2.png" class="sixOptions"><H2>Chong</H2><img class="emoji" src="emojis/love.png"><br/><span class="counter"></span></div>
    <div class="tc wf sad"><img src="img/FOTO3.png" class="sixOptions"><H2>AMLO</H2><img class="emoji" src="emojis/sad.png"><br/><span class="counter"></span></div>
    <div class="tc wf fml"><img src="img/FOTO4.png" class="sixOptions"><H2>Margarita</H2><img class="emoji" src="emojis/haha.png"><br/><span class="counter"></span></div>
    <div class="tc wf angry"><img src="img/FOTO5.png" class="sixOptions"><H2>Eruviel Avila</H2><img class="emoji" src="emojis/angry.png"><br/><span class="counter"></span></div>
    <div class="tc wf shock"><img src="img/FOTO6.png" class="sixOptions"><H2>Anaya</H2><img class="emoji" src="emojis/shock.png"><br/><span class="counter"></span></div>
    <script src="jquery.min.js"></script>
    <script src="lodash.min.js"></script>
    <script>
    "use strict";
    var access_token = '8948217Q0bf1b5305c7d7bbb76db28d8'; // Get it on Step 12 on https://smashballoon.com/custom-facebook-feed/access-token/
    // PASTE HERE YOUR FACEBOOK ACCESS TOKEN
    var postID = '1825646540989740'; // PASTE HERE YOUR POST ID 
    var refreshTime = 5; // Refresh time in seconds
    var defaultCount = 0; // Default count to start with

    var reactions = ['LIKE', 'LOVE', 'WOW', 'HAHA', 'SAD', 'ANGRY'].map(function (e) {
        var code = 'reactions_' + e.toLowerCase();
        return 'reactions.type(' + e + ').limit(0).summary(total_count).as(' + code + ')'
    }).join(',');

    var	v1 = $('.likes .counter'),
    	v2 = $('.happy .counter'),
        v3 = $('.sad .counter'),
        v4 = $('.fml .counter'),
        v5 = $('.angry .counter'),
        v6 = $('.shock .counter');

    function refreshCounts() {
        var url = 'https://graph.facebook.com/v2.8/?ids=' + postID + '&fields=' + reactions + '&access_token=' + access_token;
    	$.getJSON(url, function(res){
    		v1.text(defaultCount + res[postID].reactions_like.summary.total_count);
    		v2.text(defaultCount + res[postID].reactions_love.summary.total_count);
            v3.text(defaultCount + res[postID].reactions_sad.summary.total_count);
            v4.text(defaultCount + res[postID].reactions_haha.summary.total_count);
            v5.text(defaultCount + res[postID].reactions_angry.summary.total_count);
            v6.text(defaultCount + res[postID].reactions_wow.summary.total_count);
    	});
    }

    $(document).ready(function(){
        setInterval(refreshCounts, refreshTime * 1000);
        refreshCounts();
    });
    </script>
</body>
</html>
 
[MENTION=169178]Son Lux[/MENTION] Oye, mira que no me cuentas las reacciones. No aparece los numeritos :neglected::neglected::neglected::neglected:

¿Haz hecho todos los pasos tal cual?, muchos usuarios se confunden y no hacen el último paso de actualizar el archivo desde el OBS.
 
muchisimas gracias estaba buscando asi pero no lo conseguia XD
 
¿Haz hecho todos los pasos tal cual?, muchos usuarios se confunden y no hacen el último paso de actualizar el archivo desde el OBS.

Ya lo hice con tu archivo y todo, pero nada. No sale la cuenta de cada reacción.
 
Gracias, yo si pude, muy agradable, igual hay que tener ciertos cuidados. 🙄
 

Temas similares

Atrás
Arriba