/index.html

## index.html

<!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>

	<!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>