koromerzhin
11/9/2016 - 5:44 PM

Capture FB Reactions count and show them on webpage

Capture FB Reactions count and show them on webpage

index.html
content_copyfile_download

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