Skip to content

Instantly share code, notes, and snippets.

/index.html

Created Nov 7, 2016
Embed
What would you like to do?
<!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>
@xuse92

This comment has been minimized.

Copy link

xuse92 commented Nov 9, 2016

{post_id_goes_here} - How do I get the post id?
{application_access_token_goes_here} - app ID, Secret? Which?

Thx

@a1ananth

This comment has been minimized.

Copy link

a1ananth commented Nov 9, 2016

A single quote is missing after the URL, there should be a ' before ,function(res) on line 188.

@drcyber96

This comment has been minimized.

Copy link

drcyber96 commented Nov 11, 2016

please teach me how to do Facebook live stream of a voting process with a real-time counter of likes/loves by step using video..please

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 11, 2016

Hi All, thanks for tips. Is there any way to make it so it doesn't jump on the counter. I.E goes up by 1 or shows real stats for the post?

Currently working but votes jump too high and obvious they are not real votes.

@jhanley89

This comment has been minimized.

Copy link

jhanley89 commented Nov 11, 2016

Yeah just remove the two setInterval calls lines 194-204. Also change lines 190 and 192 to not have the hard-coded number adding to the count.

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 11, 2016

Thanks jhanley89, Seems to be working fine. Only issue I have now is OBS it wont show real time what is happening on my domain/live it shows the page, and going directly to domain file and viewing works I can see count going up but OBS is not pulling the counter. Any way to make this appear in obs, stream and setup all fine and had it working earlier nothing changed but did have to mess with scenes to get it working.

@sult4n94

This comment has been minimized.

Copy link

sult4n94 commented Nov 12, 2016

not working for me :(

@zeroonecool

This comment has been minimized.

Copy link

zeroonecool commented Nov 12, 2016

guys please in this field {application_access_token_goes_here} i have to write the app access token or the app secret or the page access token ?

@mihajlovtoni

This comment has been minimized.

Copy link

mihajlovtoni commented Nov 12, 2016

$.getJSON('https://graph.facebook.com/v2.8/?ids=202834790155127_203360600102546&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=EAACEdEose0cBAPGLktqEYPyFhyUoOq1jvsvnsO9L4qrrwzP2QZB2YuDzBNxabBbZBqta7R0h2z3rTGCmoS59XTBHErs7ZCpayZBZAZBqmx60K8DUDSNEKGoDD7zCiJY0SZAW79AnkoEJxh3gjvyqgzjGCvK6wPWW9f2esfi1kcB2wZDZD,function(res){

	th.text(1 + res['202834790155127_203360600102546'].reactions_love.summary.total_count);

	hh.text(1 + res['202834790155127_203360600102546'].reactions_like.summary.total_count);

	setInterval(function(){

video is showed in fb everything looks ok, but likes and love dont count , can u help me somehow?

thx

@mfabris

This comment has been minimized.

Copy link

mfabris commented Nov 12, 2016

I have the same problem of mihajlovtoni,
the video and animation of reactions works but the counter doesn't work> the token is valid

@zeroonecool

This comment has been minimized.

Copy link

zeroonecool commented Nov 12, 2016

guys what token exactly you use page token ? or app token ? or app secret ?

@GianMarioM

This comment has been minimized.

Copy link

GianMarioM commented Nov 12, 2016

Hello, seems ok...but it doesn't count! Why?

@IbrahimTchee

This comment has been minimized.

Copy link

IbrahimTchee commented Nov 12, 2016

jhanley89 i removed the 2 SetInterval and then what do i have to do with 190 and 192 lines ?

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 12, 2016

jhanley89 i removed the 2 SetInterval and then what do i have to do with 190 and 192 lines ?

I think I removed the 0 and + Symbols so it would go up by 1 only. Works fine but OBS is not showing what is happening live for me, so the domain is running fine, counting up by 1 but OBS is not showing live video of the browser window.

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 12, 2016

video is showed in fb everything looks ok, but likes and love dont count , can u help me somehow?

You are missing a ' before the ,function(res){ so should look like

',function(res){

This is something I had trouble with, then what you do is run the entire link in browser and check you see the live counts to show the JSON is pulling from API.

@mihajlovtoni

This comment has been minimized.

Copy link

mihajlovtoni commented Nov 12, 2016

@IbrahimTchee

This comment has been minimized.

Copy link

IbrahimTchee commented Nov 12, 2016

Gamakool does it work ? because mine jumps to high and then comes down to the real votes and then jumps high again and comes down again so i would like to know how to make it go up only by 1
i didn't quite understand what jhanley said about changing 190 and 192 lines
plz help

@tomebub

This comment has been minimized.

Copy link

tomebub commented Nov 13, 2016

IbrahimTchee change
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);
to (or any number you would like counter to start at)
th.text(0+ res['{post_id_goes_here}'].reactions_love.summary.total_count);
hh.text(0+ res['{post_id_goes_here}'].reactions_like.summary.total_count);

and it should work fine.

@zeroonecool

This comment has been minimized.

Copy link

zeroonecool commented Nov 13, 2016

its not working no counter

@mfabris

This comment has been minimized.

Copy link

mfabris commented Nov 13, 2016

'{post_id_goes_here}' has to replace without {}, with 'IDFanPage_IDPostPage'

Have to add ' below so: ',function(res){

Someone founds any error? Please add the solution

@fondajf

This comment has been minimized.

Copy link

fondajf commented Nov 13, 2016

image
Having this error anyone can help me ?

@sammythebull

This comment has been minimized.

Copy link

sammythebull commented Nov 13, 2016

Everything is working fine... but my "likes" and "loves" are not increasing.

Here is the Lines 186 - 209 of the index.html file... can someone please assist:

setInterval(function(){

$.getJSON('https://graph.facebook.com/v2.8/?ids=1494380224179421_1828688054081968&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=119959345152770|xSj2s8vQtgOUGuiDck1XfpdB02Y',function(res){
	
	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);
});

}, 10000);
</script>

@sammythebull

This comment has been minimized.

Copy link

sammythebull commented Nov 14, 2016

Here is what I have... but I still cannot get the incremental votes to work... can someone please assist.

Page ID: 1494380224179421
Post ID: 1828706637413443
App Token: EAABtGjYnwwIBALOhSPfyiw9h3bGSaupNAJMlYENo2R06qPTWugZBIH5ToZCNNZAGbVo4vvKR8juGInh5fmTJm7NcnXKZAgG3mAa75NR9wj4Yc67QlUHvULHotfBFLVyf7jeWhm6Nm9LMx5CSeGSuYzhufNhkFTfPexUiktBEswZDZD

$.getJSON('https://graph.facebook.com/v2.8/?ids=1494380224179421_1828706637413443&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=EAABtGjYnwwIBALOhSPfyiw9h3bGSaupNAJMlYENo2R06qPTWugZBIH5ToZCNNZAGbVo4vvKR8juGInh5fmTJm7NcnXKZAgG3mAa75NR9wj4Yc67QlUHvULHotfBFLVyf7jeWhm6Nm9LMx5CSeGSuYzhufNhkFTfPexUiktBEswZDZD',function(res){
	
	th.text(1 + res['1494380224179421_1828706637413443'].reactions_love.summary.total_count);
	hh.text(1 + res['1494380224179421_1828706637413443'].reactions_like.summary.total_count);
@xnidyas

This comment has been minimized.

Copy link

xnidyas commented Nov 14, 2016

Can anyone show where to get post_id_goes_here via a picture or a very short film. I'm dying to get this and not getting anywhere. LOL
And i bet it is so simple.

Fan Page ID = i get that fine

Post ID = LOST...? please a pic showing where would love to see. 👍

Please. Thank you.

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 14, 2016

To Remove Counts from Jumping Up then back to Zero:

Remove the variables that get added:

Yeah just remove the two setInterval calls lines 194-204. Also change lines 190 and 192 to not have the hard-coded number adding to the count.

Apart from tweaking and script should be working fine for most of you.
The Post ID is found once you've posted to the page unless someone knows how to get this before hand? I was'st sure if this was the same ID that shows in the Stream Key, have not tested.

The only issue I have now is OBS will not show real time what is happening and show the counter going up by 1 per each vote placed. But using the base script works fine I just don't like how it fools people into thinking the votes are going up, more legit to show the actual count and so they can see the vote placed which gives more social proof.

Anyone able to help with OBS (Using browser source and all things configured properly, just wont count up on OBS but does on the domain per each vote)

@xnidyas

This comment has been minimized.

Copy link

xnidyas commented Nov 14, 2016

Once you posted to the page via LIVE --- it shows wwwfb.com/pageID/videos/VideoID - do I use that VideoID as Post ID? I'm telling you i'm lost.

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 14, 2016

Once you posted to the page via LIVE --- it shows wwwfb.com/pageID/videos/VideoID - do I use that VideoID as Post ID? I'm telling you i'm lost.

That's what I've been doing. So you grab it and run to the index.html and edit the sections that need the id then test your graph link to see if its pulling from the api. Then you let it roll and watch the page on domain and test the counter by liking or hearting. If you left the add variables you should see it start going up.

Does anyone know how to Refresh OBS browser source so it shows live what is happening on the URL. As the script is working just wont show on the live feed.

@xnidyas

This comment has been minimized.

Copy link

xnidyas commented Nov 14, 2016

@Gumakool - Try what i told you - it works and shows Live - Also what you told me - works. Thank you man.

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 14, 2016

xnidyas - I cant see what you said regarding showing live using OBS, mine is not showing and caching the page before the count starts? Any way to fix?

@IbrahimTchee

This comment has been minimized.

Copy link

IbrahimTchee commented Nov 14, 2016

How to make the counter go up 1 by 1 ? because mine jumps up to 25 votes a second

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 14, 2016

Actually works without the counter all together - due to Facebook giving the Live Video so much reach out of the gate.

tommydo1905

@Gamakool - My request run but likes can't counting. Can you help me?

Make sure you read some of the advice up the page, also double check your page id's and access token. If the count is going up on the domain when you click like and refresh the page then you are stuck in the same boat as me. OBS cache is storing the page locally so it wont show the new stats for count. Keep running the Link you gave above until you see stats for 0 on engagement through the api, that means its all set, the next thing is configuring the count to go up normally and not jump.

How to make the counter go up 1 by 1 ? because mine jumps up to 25 votes a second

Explained previously, you remove numbers from the script near the bottom.

Yeah just remove the two setInterval calls lines 194-204. Also change lines 190 and 192 to not have the hard-coded number adding to the count.

@tommydo1905

This comment has been minimized.

Copy link

tommydo1905 commented Nov 14, 2016

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

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 14, 2016

@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

This comment has been minimized.

Copy link

tommydo1905 commented Nov 14, 2016

@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

This comment has been minimized.

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

This comment has been minimized.

Copy link

IbrahimTchee commented Nov 14, 2016

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

@IbrahimTchee

This comment has been minimized.

Copy link

IbrahimTchee commented Nov 14, 2016

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

@Gamakool

This comment has been minimized.

Copy link

Gamakool commented Nov 15, 2016

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

tommydo1905 commented Nov 15, 2016

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

@yonatanlebo

This comment has been minimized.

Copy link

yonatanlebo commented Nov 15, 2016

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

@jengithub3104

This comment has been minimized.

Copy link

jengithub3104 commented Nov 15, 2016

@tommydo1905 @Gamakool

Can share your working script here ?
Sorry for asking this

@jengithub3104

This comment has been minimized.

Copy link

jengithub3104 commented Nov 16, 2016

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

This comment has been minimized.

Copy link

IbrahimTchee commented Nov 17, 2016

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
You can’t perform that action at this time.