zorrigas · November 15, 2016 19:44
diff --git a/CaptureFaceBookReaction.html b/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>
	<!--
	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>