Create a gist now

Instantly share code, notes, and snippets.

anonymous /index.html
Created Nov 9, 2016

What would you like to do?
Capture FB Reactions count and show them on webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My FB Reactions Page</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';
var postID = 'POST_ID_HERE';
var refreshTime = 10; // in seconds
var defaultCount = 5; // 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=' + 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>

Hey, I've added my post ID and Access Token but it seems that this can't work. Any idea?

gneuman commented Nov 11, 2016

Same problem here!

not working bro .. ? :/

you have to enter the post id means that number part only from the whole url.
Do it and use it like a boss.

Nath13 commented Nov 12, 2016

your Ids dont work because the page is not public ;)

please use fbid you get for a post instead of postid. example https://www.facebook.com/photo.php?fbid=10154676003983545******************************theater. * === I dont want you to see extra info. LOL.

Hello everyone! For the post id, you need to use the pageID+"_"+postID.

Ex:349054752532_10154721398977533 for this publication ; https://www.facebook.com/OfficialJessicaNigri/photos/a.356555587532.187802.349054752532/10154721398977533/?type=3&theater

I found it while looking at the chrome console, the requests responses was a 400 because the api was depreciated.

I hope it helped you.

:)

PhlosX commented Nov 17, 2016

Get flaged from facebook because using this script. Anormal activity detected.

ikuc commented Nov 21, 2016

Thank you!

It was working, but two days ago it stopped, I tried several changes and nothing, someone else with problems?

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