JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="wrapper"><!--wrapper open-->
    <div class="facebookfeed">
        <h2>Loading...</h2>
    </div>
</div><!--wrapper closed-->

JavaScript

$(function() {
    //Set Url of JSON data from the facebook graph api. make sure callback is set   with a '?' to overcome the cross domain problems with JSON
    var url = "https://graph.facebook.com/?ids=immbudden,cocacola,peacockstudio&callback=?";

    //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
    $.getJSON(url, function(json) {
        var html = '';
        
        $.each(json, function(index, item) {
            html += "<ul><li>" + item.likes + "</li><li>" + item.about + "</li></ul>";
        });
        
        //A little animation once fetched
        $('.facebookfeed').animate({
            opacity: 0
        }, 500, function() {
            $('.facebookfeed').html(html);
        });
        $('.facebookfeed').animate({
            opacity: 1
        }, 500);
    });
});