Skip to content

Instantly share code, notes, and snippets.

Embed
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>
@Kinoulou

This comment has been minimized.

Copy link

@Kinoulou Kinoulou commented Nov 10, 2016

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

@gneuman

This comment has been minimized.

Copy link

@gneuman gneuman commented Nov 11, 2016

Same problem here!

@sult4n94

This comment has been minimized.

Copy link

@sult4n94 sult4n94 commented Nov 12, 2016

not working bro .. ? :/

@keshavdutt

This comment has been minimized.

Copy link

@keshavdutt keshavdutt commented Nov 12, 2016

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

This comment has been minimized.

Copy link

@Nath13 Nath13 commented Nov 12, 2016

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

@junaid-A-khan

This comment has been minimized.

Copy link

@junaid-A-khan junaid-A-khan commented Nov 12, 2016

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.

@RickyNotaro

This comment has been minimized.

Copy link

@RickyNotaro RickyNotaro commented Nov 15, 2016

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.

:)

@J0ker98

This comment has been minimized.

Copy link

@J0ker98 J0ker98 commented Nov 16, 2016

@PhlosX

This comment has been minimized.

Copy link

@PhlosX PhlosX commented Nov 17, 2016

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

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Nov 21, 2016

Thank you!

@RicardoCelso

This comment has been minimized.

Copy link

@RicardoCelso RicardoCelso commented Dec 12, 2016

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