Skip to content

Instantly share code, notes, and snippets.

@anburocky3

anburocky3/CaptureFaceBookReaction.html

Last active December 29, 2016 14:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save anburocky3/98ba1d165386e71be1d3cd5830d7c206 to your computer and use it in GitHub Desktop.
Save anburocky3/98ba1d165386e71be1d3cd5830d7c206 to your computer and use it in GitHub Desktop.
Download ZIP
Counts Facebook Reactions with Token and display in web page.
Raw
CaptureFaceBookReaction.html
<!--
How to use:
1.Create a facebook application here https://developers.facebook.com/apps/
- Open https://developers.facebook.com/tools/explorer , select your Application , select your FB Page, and copy access token :
This is called as the short lived access token, and will be valid for 30min or 1 hour
- Then open https://graph.facebook.com/oauth/ac...=<app_secret>&fb_exchange_token=<short_token> (replace the values correctly) .
This will give out another access token. Copy that token correctly from the response. It will be something like:
access_token=<the_long_lived_token>&expires=533131
- Copy this long-lived token, this is what you need to be using.
2. Save that long-lived token, post id in a html file, run the html file in your file browser, use obs to stream the browser view
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My FB Reactions Page - CDN</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment