Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 9, 2016 17:44
Show Gist options
  • Save anonymous/7073ea6c601f28aa65e5a077ef875526 to your computer and use it in GitHub Desktop.
Save anonymous/7073ea6c601f28aa65e5a077ef875526 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 9, 2016.
    123 changes: 123 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@

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