JSFiddle - React, Tailwind, and code Playground

by Adam Azad

HTML

<script src="http://designmodo.github.io/Flat-UI/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div id="fb-root"></div>
<div class="container">
    <!-- Header -->
    <div class="page-header">
         <h3>Simple Pages Manager</h3>

    </div>
    <!-- Content -->
    <div class="row">
        <!-- Login and real-time updates -->
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p id="user-updates">Please, login with you Facebook account</p>
                    <button type="button" class="btn btn-info" id="login">Login with Facebook!</button>
                </div>
            </div>
        </div>
        <!-- Page Switcher -->
        <div class="col-md-4">
            <div class="list-group" id="pages"></div>
        </div>
        <!-- Current Page Manager -->
        <div class="col-md-4" style="display:none;" id="page-manage-wrapper">
            <div class="panel panel-default" id="page-manage" data-page-token="" data-page-id="">
                <div class="panel-body">
                    <button type="button" class="btn btn-success" id="create-post">Create a post</button>
                    <div id="up-form" style="display:none;">
                        <textarea class="form-control" rows="2" id="post-update"></textarea>
                        <div class="clearfix">&nbsp;</div>
                        <button type="button" class="btn btn-success" id="post-up">Post</button>
                        <a href="http://facebook.com/" id="post-view" style="display:none;">Click here to view your post</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    padding:10px;
}

JavaScript

window.fbAsyncInit = function () {
    FB.init({
        appId: '553435274702353',
        status: true,
        xfbml: true
    });
};

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$('#login').click(function () {

    $('#login, #user-updates').fadeOut();

    FB.login(function (response) {
        if (response.authResponse) {

            FB.api('/me', function (userData) {
                $('#user-updates').text('Welcome, ' + userData.name + ', choose a page to manage').fadeIn();
            });

            FB.api('/me/accounts?fields=picture.type(large),access_token,name,about,category', function (pages) {
                $.each(pages.data, function (index, page) {
                    $('#pages').append('<a href="#" id="manage-page" class="list-group-item" data-page-id="' + page.id + '"><h4 class="list-group-item-heading">' + page.name + '</h4><p class="list-group-item-text">' + page.category + '</p></a>')
                })
            });
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        scope: 'email, user_likes, manage_pages'
    });

});

$('#pages').on('click', '[id="manage-page"]', function () {
    $('#pages, #user-updates').fadeOut();
    $pageId = $(this).data('page-id');
    FB.api($pageId + '?fields=access_token,id,name,category,picture.type(large)', function (pageData) {

        $('#user-updates').html('Managing the page, ' + pageData.name + ', <a href="#" id="switch-page">choose another page</a>').fadeIn();
        $('#post-update').val('');
        $('#page-manage-wrapper, #post-view').fadeOut();
        

        $('#page-manage').attr({
            'data-page-token': pageData.access_token,
               ...