Skip to content

Instantly share code, notes, and snippets.

@J0ker98 J0ker98/index.html forked from anonymous/index.html
Last active Mar 29, 2017

Embed
What would you like to do?
Working Facebook Reactions count and webpage show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Facebook Reactions</title>
<style>
html {
box-sizing: border-box;
width: 100%;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
background:url('./background.jpg') no-repeat; /* IMAGE NAME HERE */
color: #FFF;
width: 100%;
height: 100%;
}
#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;
}
.tc { text-align: center; font-size: 3rem; font-weight: bold; }
.wf { width: 28%; }
.likes {
position: absolute;
top: 20%;
left: 5%;
}
.happy {
position: absolute;
top: 47.5%;
left: 5%;
}
.sad {
position: absolute;
top: 77.5%;
left: 5%;
}
.fml {
position: absolute;
top: 20%;
right: 10%;
}
.angry {
position: absolute;
top: 48%;
right: 10%;
}
.shock {
position: absolute;
top: 77.5%;
right: 10%;
}
</style>
</head>
<body>
<div class="tc wf likes"></div>
<div class="tc wf happy"></div>
<div class="tc wf sad"></div>
<div class="tc wf fml"></div>
<div class="tc wf angry"></div>
<div class="tc wf shock"></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 access_token = 'ACCESS_TOKEN_HERE'; //Paste your Access Token here
var pageID = 'PAGE_ID_HERE'; //Paste your Facebook Page ID here
var postID = 'POST_ID_HERE'; //Paste your live's Post ID here
var refreshTime = 5; // 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'),
v2 = $('.happy'),
v3 = $('.sad'),
v4 = $('.fml'),
v5 = $('.angry'),
v6 = $('.shock');
function refreshCounts() {
var url = 'https://graph.facebook.com/v2.8/?ids=' + pageID + "_" + 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);
});
}
setInterval(refreshCounts, refreshTime * 1000);
refreshCounts();
</script>
</body>
</html>
@Priidik

This comment has been minimized.

Copy link

commented Nov 24, 2016

I can't get this to work. "The error is Cannot read property 'reactions_like' of undefined".
Do I have to instert my fanpage access_token or the app access_token?

@cantorrodista

This comment has been minimized.

Copy link

commented Nov 30, 2016

You need to change the getJSON call:

var finalVar = pageID + "_" + postID;
$.getJSON(url, function(res){ v1.text(defaultCount + res[finalVar].reactions_like.summary.total_count); v2.text(defaultCount + res[finalVar].reactions_love.summary.total_count); v3.text(defaultCount + res[finalVar].reactions_sad.summary.total_count); v4.text(defaultCount + res[finalVar].reactions_haha.summary.total_count); v5.text(defaultCount + res[finalVar].reactions_angry.summary.total_count); v6.text(defaultCount + res[finalVar].reactions_wow.summary.total_count); });

@Wachu91

This comment has been minimized.

Copy link

commented Dec 9, 2016

Can you paste here whole working code?

Cannot read property 'reactions_like' of undefined.

@ShailuSri

This comment has been minimized.

Copy link

commented Dec 20, 2016

This is really helpful for us thank you for coding. I have implemented this and every this was good but finally when I start the Streaming am getting an error as "Failed to Connect to server" could you please help me in solving this.
Thank you in advance..

image

@J0ker98

This comment has been minimized.

Copy link
Owner Author

commented Dec 26, 2016

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Facebook Reactions</title>
	<style>
		html {
		  box-sizing: border-box;
          width: 100%;
          height: 100%;
		}
		*, *:before, *:after {
		  box-sizing: inherit;
		}
		body{
			margin: 0;
            background:url('./background.jpg') no-repeat; /* IMAGE NAME HERE */
            color: #FFF;
            width: 100%;
            height: 100%;
		}
		#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;
		}
        .tc { text-align: center; font-size: 3rem; font-weight: bold; }
        .wf { width: 28%; }
        .likes {
            position: absolute;
            top: 20%;
            left: 5%;
        }
        .happy {
            position: absolute;
            top: 47.5%;
            left: 5%;
        }
        .sad {
            position: absolute;
            top: 77.5%;
            left: 5%;
        }
        .fml {
            position: absolute;
            top: 20%;
            right: 10%;
        }
        .angry {
            position: absolute;
            top: 48%;
            right: 10%;
        }
        .shock {
            position: absolute;
            top: 77.5%;
            right: 10%;
        }
	</style>
</head>
<body>

	<div class="tc wf likes"></div>
    <div class="tc wf happy"></div>
    <div class="tc wf sad"></div>
    <div class="tc wf fml"></div>
    <div class="tc wf angry"></div>
    <div class="tc wf shock"></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 access_token = 'ACCESS_TOKEN_HERE'; //Paste your Access Token here
var pageID = 'PAGE_ID_HERE'; //Paste your Facebook Page ID here
var postID = 'POST_ID_HERE'; //Paste your live's Post ID here
var refreshTime = 5; // 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'),
	v2 = $('.happy'),
    v3 = $('.sad'),
    v4 = $('.fml'),
    v5 = $('.angry'),
    v6 = $('.shock');
function refreshCounts() {
        var url = 'https://graph.facebook.com/v2.8/?ids=' + pageID + "_" + postID + '&fields=' + reactions + '&access_token=' + access_token;
	var finalVar = pageID + "_" + postID;
$.getJSON(url, function(res){ v1.text(defaultCount + res[finalVar].reactions_like.summary.total_count); v2.text(defaultCount + res[finalVar].reactions_love.summary.total_count); v3.text(defaultCount + res[finalVar].reactions_sad.summary.total_count); v4.text(defaultCount + res[finalVar].reactions_haha.summary.total_count); v5.text(defaultCount + res[finalVar].reactions_angry.summary.total_count); v6.text(defaultCount + res[finalVar].reactions_wow.summary.total_count); });
}
setInterval(refreshCounts, refreshTime * 1000);
refreshCounts();
</script>

</body>
</html>
@J0ker98

This comment has been minimized.

Copy link
Owner Author

commented Dec 26, 2016

@ShailuSri you have a problem with OBS, it's not the code!

@danielgc

This comment has been minimized.

Copy link

commented Jan 5, 2017

Hello, thx for the code! But I haven't been able to show the actual votes a person gives. When maximized on desktop, or in mobile, facebook lets you react multiple times, but this code only shows the first reaction you give (or another but it takes out the previous). Do you know where can we research about it?

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.