JSFiddle - React, Tailwind, and code Playground

by arpecop

HTML

<div class="feed">
    <h2>Loading...</h2>
</div>


Can't take all the credit... but i was able to add to the original script (just status messages).
<br>original script from prettyklicks.com

CSS

.feed ul{list-style:none;padding:0;margin:0;}
.feed ul li{list-style:none;padding:10px 0;margin:0;border-bottom:#555 1px solid;}
.feed ul li:last-child{border:0;}
.feed ul li:hover{color:#e6f2fa;}
.likes{font-size:8px;}
.date{font-size:10px;}
.name{font-size:18px;}
.pic{margin-right:10px;}

JavaScript

var profile = "xnakxx";
var profile_pic = "http://graph.facebook.com/" + profile + "/picture?type=small";
var url = "http://graph.facebook.com/" + profile + "/feed?limit=10&callback=?";
$.getJSON(url, function(json) {
    var output = "<ul><li><img class=\"pic\" /><span class=\"name\"></span></li>";
    $.each(json.data, function(i, fb) {
        if (fb.message) {
            output += "<li><div class=\"date\">" + formatFBTime(fb.created_time) + "</div>" + fb.message;
            if (fb.likes) {
                output += "<div class=\"likes\">Likes(" + fb.likes + ")</div>";
            }
            output += "</li>";
        }
    });
    output += "</ul>";
    $('.feed').animate({
        opacity: 0
    }, 500, function() {
        $('.feed').html(output);
        $('.pic').attr("src", profile_pic);
        $('.name').html(profile);
    });

    $('.feed').animate({
        opacity: 1
    }, 500);

});