Skip to content

Instantly share code, notes, and snippets.

Created November 7, 2016 17:40
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save anonymous/3d7ff28877de7c7d47d0b55b30fc509b to your computer and use it in GitHub Desktop.
Save anonymous/3d7ff28877de7c7d47d0b55b30fc509b to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elections 2016</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
#wrap{
position: relative;
margin: 0px auto;
width: 1280px;
height: 720px;
}
.cover{
padding: 20px 80px;
position: absolute;
width: 1280px;
height: 720px;
top: 0;
left: 0;
z-index: 10;
}
h1{
font-size: 42px;
text-transform: uppercase;
text-align: center;
color: #fff;
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 0 0 25px 0;
}
.blur{
background-color: gray;
opacity: .8;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.title{
background: url('title-bg.png') top left no-repeat;
}
.avatar img{
display: block;
border-radius: 50%;
width: 350px;
height: 350px;
margin: 0 auto;
}
.hilary, .trump{
display: inline-block;
width: 45%;
background: url(blur.png) top left no-repeat;
padding: 15px 0;
}
.trump{
margin-left: 9%;
}
.meta img{
display: block;
width: 60px;
height: 60px;
margin: 20px auto;
}
.votes{
text-align: center;
color: #fff;
font-weight: 30px;
display: block;
width: 100%;
}
.ct, .ch{
width: 100%;
display: block;
color: #fff;
font-size: 40px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.v{
text-align: center;
font-weight: bold;
font-size: 16px;
text-align: center;
margin-top: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<div class="cover">
<div class="title">
<h1>who will win the us <br> presidential elections 2016?</h1>
</div>
<div>
<div class="hilary">
<div class="avatar">
<img src="hillary.jpg" alt="">
</div>
<div class="meta">
<img src="tup.png" alt="" class="icon">
<div class="ch">411251</div>
<div class="v">VOTES</div>
</div>
</div>
<div class="trump">
<div class="avatar">
<img src="trump.jpg" alt="">
</div>
<div class="meta">
<img src="h.png" alt="" class="icon">
<div class="ct">398221</div>
<div class="v">VOTES</div>
</div>
</div>
</div>
</div>
<video src="loop.mp4" autoplay="true" loop="true"></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js"></script>
<script>
"use strict";
var tc = 251,
hc = 221,
th = $('.ct'),
hh = $('.ch');
var hint,
tint;
function hilary(){
hint = setInterval(function(){
hc += 1;
// console.log(hc);
hh.text(hc);
clearInterval(hint);
hilary();
}, _.random(1, 15) * 1000);
}
function trump(){
tint = setInterval(function(){
// console.log(tc);
tc += 1;
th.text(hc);
clearInterval(tint);
trump();
}, _.random(1, 15) * 1000);
}
// trump();
// hilary();
setInterval(function(){
$.getJSON('https://graph.facebook.com/v2.8/?ids={post_id_goes_here}&fields=reactions.type(LIKE).limit(0).summary(total_count).as(reactions_like),reactions.type(LOVE).limit(0).summary(total_count).as(reactions_love)&access_token={application_access_token_goes_here},function(res){
th.text(9251 + res['{post_id_goes_here}'].reactions_love.summary.total_count);
hh.text(9221 + res['{post_id_goes_here}'].reactions_like.summary.total_count);
setInterval(function(){
th.text(parseInt(th.text()) + 1);
}, _.random(5, 25) * 1000);
setInterval(function(){
hh.text(parseInt(hh.text()) + 1);
}, _.random(5, 25) * 1000);
console.log(res);
});
}, 10000);
</script>
</body>
</html>
@tommydo1905
Copy link

@Gamakool Thanks, My site was run. But Like counting up and down, and i don't understand @@

@Gamakool
Copy link

@tommy. Try running it without, running on a small page now and getting engagement. Just make the subject really viral

What's happening is the number is jumping because you need to remove or edit the setInterval numbers. So if you want it to go by 1 then change it so it says no number and only counts the actual votes.

@tommydo1905
Copy link

@Gamakool Can you show me to change for real votes? I am not a developer, i don't know more about code :). Thank you so much

@xnidyas
Copy link

xnidyas commented Nov 14, 2016

` th.text(0 + res['1494380224179421_1828688054081968'].reactions_love.summary.total_count);

hh.text(0 + res['1494380224179421_1828688054081968'].reactions_like.summary.total_count);

setInterval(function(){

	th.text(parseInt(th.text()) + 1);

}, _.random(5, 25) * 1000);

setInterval(function(){

	hh.text(parseInt(hh.text()) + 1);

}, _.random(5, 25) * 1000);		

console.log(res);`

*What to change here to get the Real Votes to count? - En example with the same above code would be greatly appreciated. :)

@IbrahimTchee
Copy link

IbrahimTchee commented Nov 14, 2016

@Gamakool i removed the 2 setinverval lines and than the counter doesn't work at all

@IbrahimTchee
Copy link

Can somebody help me plz i want to make the counter go up 1 by 1

@Gamakool
Copy link

Just want to point out I'm not way a coder or developer in any way, all the info you need to get it working is here already, in comments

Using this info I've managed to get it working, however I have an issue with OBS caching the browser or URL which is now the cause of the count not going up. This can be fixed, but am currently testing without the count and works just as well for everyone's FYI.

@xnidyas
Copy link

xnidyas commented Nov 15, 2016

`setInterval(function(){

$.getJSON('https://graph.facebook.com/v2.8/?ids=1077853353741_11517858190342&fields=reactions.type(LIKE).limit(0).summary(total_count).as(reactions_like),reactions.type(LOVE).limit(0).summary(total_count).as(reactions_love)&access_token=EAACEdEose0cBAEDTXqSHp7HABlXD1THWjaMkrBAOZALVhbckZBwVJ6sWssfJxWY2ZB1K3h0CMkh6SHKpVdRGELPIWG2L6uttDC773llK0JClvoUmx2p7d3VAzUlUbvLcwjiKzvRH26yuuD5BoZBp0qnZCWWCL1ZA8DZCFvjqs4tnAZDZD',function(res){
	
	th.text(0 + res['107785335923741_1151785888190342'].reactions_love.summary.total_count);

	hh.text(0 + res['10778533923741_115175888190342'].reactions_like.summary.total_count);

	setInterval(function(){

		th.text(parseInt(th.text()) + 0);

	}, _.random(5, 25) * 1000);

	setInterval(function(){

		hh.text(parseInt(hh.text()) + 0);

	}, _.random(5, 25) * 1000);		

	console.log(res);
});

}, 10000);`

THIS HERE FOR ME Counts Real Votes. = Hopefully it helps someone.

@tommydo1905
Copy link

Thanks @Gamakool and @xnidyas supported me.Now I can do it :))

@yonatanlebo
Copy link

Can someone please post a full code that was tested and it works?

@jengithub3104
Copy link

jengithub3104 commented Nov 15, 2016

@tommydo1905 @Gamakool

Can share your working script here ?
Sorry for asking this

@jengithub3104
Copy link

Ok I got these messsages:

"reactions_like": {
"data": [

     ],
     "summary": {
        "total_count": 0
     }
  },
  "reactions_love": {
     "data": [
        
     ],
     "summary": {
        "total_count": 1
     }
  },

But the number of votes didn'y appear on the screen.

Can someone help me to fix this

@IbrahimTchee
Copy link

to change the reactions is it enough just to change these lines ?
because i wanna transform the LIKE reaction into ANGRY reaction so is it enough just to change LIKE into ANGRY ?
th.text(9251 + res[‘{post_id_goes_here}’].reactions_love.summary.total_count);
hh.text(9221 + res[‘{post_id_goes_here}’].reactions_like.summary.total_count);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment