Instantly share code, notes, and snippets.

anonymous /index.html
Created Nov 9, 2016

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.

Show comment
Hide comment
@Kinoulou

Kinoulou Nov 10, 2016

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

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.

Show comment
Hide comment
@gneuman

gneuman Nov 11, 2016

Same problem here!

gneuman commented Nov 11, 2016

Same problem here!

@sult4n94

This comment has been minimized.

Show comment
Hide comment
@sult4n94

sult4n94 Nov 12, 2016

not working bro .. ? :/

sult4n94 commented Nov 12, 2016

not working bro .. ? :/

@keshavdutt

This comment has been minimized.

Show comment
Hide comment
@keshavdutt

keshavdutt 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.

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.

Show comment
Hide comment
@Nath13

Nath13 Nov 12, 2016

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

Nath13 commented Nov 12, 2016

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

@junaid-A-khan

This comment has been minimized.

Show comment
Hide comment
@junaid-A-khan

junaid-A-khan 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.

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.

Show comment
Hide comment
@RickyNotaro

RickyNotaro 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.

:)

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.

Show comment
Hide comment

J0ker98 commented Nov 16, 2016

@PhlosX

This comment has been minimized.

Show comment
Hide comment
@PhlosX

PhlosX Nov 17, 2016

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

PhlosX commented Nov 17, 2016

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 21, 2016

Thank you!

ghost commented Nov 21, 2016

Thank you!

@RicardoCelso

This comment has been minimized.

Show comment
Hide comment
@RicardoCelso

RicardoCelso Dec 12, 2016

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

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