calvez/gist:a2aab955fb979e288b7c7fcb9f7faf80

## gistfile1.html
<!--

    Facebook Javascript SDK Demo

    Refs:
        https://developers.facebook.com/docs/javascript/quickstart/v2.0
        http://hayageek.com/facebook-javascript-sdk/
        http://pt.slideshare.net/littleq0903/introduction-to-facebook-javascript-sdk-new
        https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0
        http://pivotallabs.com/working-with-asynchronously-loaded-javascript/

    by Fernando Felix

-->
<html>
<body>
<div id="fb-root"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script id="facebook-jssdk" type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>
<!-- <script id="facebook-jssdk" type="text/javascript" src="//connect.facebook.net/en_US/sdk/debug.js"></script> -->

<script>

$(document).ready(function(){
    function facebookReady(){
        // init metodo do facebook, nenhuma funcao do SDK deve ser chamada anstes dela
        FB.init({
            appId: 'FACEBOOK_APP_ID_AQUI',
            status: false, // don't get info about the current user after init
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // find and initialize any social plugins that have been added using XFBML
            version: 'v2.0', // determine which Graph API version is used.
            oauth: true
        });

        auth_log(); // opcional


    }

    if(window.FB) {
        facebookReady();
    } else {
        window.fbAsyncInit = facebookReady;
    }

    init_my_app();

});


    function init_my_app(){

        // ref https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
        FB.getLoginStatus(function(response) {

            if(response.status != "connected"){
                show_login_button();
            } else {
                show_profile();
            }

        });

    }

    function show_login_button(){

        var content = "Login to start the app: <br>";
        var content = "<button id='login'>Login</button>"

        $("#content").html(content);

        $("button#login").click(function(){
            login(init_my_app);
        });
    }

    function login(func_to_call, scope) {

        // definindo default permissions
        // https://developers.facebook.com/docs/facebook-login/permissions/v2.0
        // obs: Apps that ask for more than public_profile, email and user_friends must be reviewed by Facebook before they can be made available to the general public.
        // /me/permissions para listar as permissoes do usuario
        if (typeof(scope) === "undefined"){
            scope = {
                scope: "public_profile,email,user_friends,user_photos,user_videos,publish_actions,user_likes",
                auth_type: "rerequest"
            };
        }

        func = function(response) {
            if (response.authResponse) {
                func_to_call();
            } else {
                console.log("User cancelled login or did not fully authorize.");
            }
        };

        FB.login(func, scope);

    }

    function logout() {

        var func = function(){
            document.location.reload();
        }

        FB.logout(func);
    }

    function show_profile(){

        var func = function(response) {

            console.log(JSON.stringify(response));

            var content="Nome: $name <br>".replace("$name", response.name);
            content +="Link: $link <br>".replace("$link", response.link);
            content +="Username: $login <br>".replace("$login", response.username);
            content +="ID: $id <br>".replace("$id", response.id);
            content +="Email: $email <br>".replace("$email", response.email);
            content +="<button id='show_picture'> show picture </button>";
            content +="<button id='show_friends'> show friends </button>";
            content +="<button id='show_friends'> show friends </button>";
            content +="<button id='show_message_form'> show message form </button>";
            content +="<button id='feed_dialog'> lorem ipsum dialog </button>";
            content +="<button id='logout'> logout </button>";

            $("#content").html(content);

            $( "#show_picture" ).click(function() {
                show_picture();
            });

            $("#logout").click(function() {
                logout();
            });

            $("#show_friends").click(function() {
                show_friends();
            });

            $("#show_message_form").click(function() {
                show_message_form();
            });

            $("#feed_dialog").click(function() {
                feed_dialog();
            });

        }

        FB.api("/me", func)

    }

    function show_picture() {

        var func = function(response) {
            var content =" <img src='$url'>".replace("$url", response.data.url);
            $("#profile_image").html(content);
        }

        FB.api("/me/picture?type=normal", func);
    }

    function show_friends(){

        var func = function(response){
            console.log(response.data);
        }

        FB.api("/me/friends", func);

    }

    function show_message_form(){
        var content = "<input type='text' id='message'><button id='post_message'> enviar </button>";

        $("#message_content").html(content);

        $("button#post_message").click(function(e){
            e.preventDefault();

            var value = $("input:text#message").val();

            post_message(value);

        });

    }

    function post_message(message){
        //@scope publish_actions

        func = function() {
            FB.api('/me/feed', 'post', {message: message});
        };

        login(func, {scope: "publish_actions"});

    }

    function feed_dialog(){

        var dict = {
            method: 'feed',
            name: 'Lorem Ipsum',
            caption: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
            description: (
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
              "Phasellus interdum imperdiet lacus eget consectetur. " +
              "Vivamus aliquet aliquet pretium."
            ),
            link: "http://www.lipsum.com/",
            picture: "http://www.lipsum.com/images/lipsum07.gif"
        };

        var func = function(response) {
            if (response && response.post_id) {
                console.log("Post foi publicado com sucesso.")
            } else {
                console.log("Post não foi publicado.");
            }
        };

        FB.ui(dict, func);
    }

    /**
     * Mostra os logs relacionados a autenticacao no console do browser
    **/
    function auth_log(){

        var func = function(response) {
            console.log(response.status);
        };

        FB.Event.subscribe("auth.authResponseChange", func);

    }

</script>

<h1>Facebook Javascript SDK Demo</h1>

<div id="content">

</div>

<div id="profile_image">
</div>

<div id="message_content">
</div>

<!-- Usando o SDK para adicionar o Social Plugin "Like button" com o xfbml -->
<!-- https://developers.facebook.com/docs/plugins -->
<div
  class="fb-like"
  data-send="true"
  data-width="450"
  data-show-faces="true">
</div>

</body>
</html>
	<!--

	Facebook Javascript SDK Demo

	Refs:
	https://developers.facebook.com/docs/javascript/quickstart/v2.0
	http://hayageek.com/facebook-javascript-sdk/
	http://pt.slideshare.net/littleq0903/introduction-to-facebook-javascript-sdk-new
	https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0
	http://pivotallabs.com/working-with-asynchronously-loaded-javascript/

	by Fernando Felix

	-->
	<html>
	<body>
	<div id="fb-root"></div>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script id="facebook-jssdk" type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>
	<!-- <script id="facebook-jssdk" type="text/javascript" src="//connect.facebook.net/en_US/sdk/debug.js"></script> -->

	<script>

	$(document).ready(function(){
	function facebookReady(){
	// init metodo do facebook, nenhuma funcao do SDK deve ser chamada anstes dela
	FB.init({
	appId: 'FACEBOOK_APP_ID_AQUI',
	status: false, // don't get info about the current user after init
	cookie: true, // enable cookies to allow the server to access the session
	xfbml: true, // find and initialize any social plugins that have been added using XFBML
	version: 'v2.0', // determine which Graph API version is used.
	oauth: true
	});

	auth_log(); // opcional


	}

	if(window.FB) {
	facebookReady();
	} else {
	window.fbAsyncInit = facebookReady;
	}

	init_my_app();

	});


	function init_my_app(){

	// ref https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
	FB.getLoginStatus(function(response) {

	if(response.status != "connected"){
	show_login_button();
	} else {
	show_profile();
	}

	});

	}

	function show_login_button(){

	var content = "Login to start the app: <br>";
	var content = "<button id='login'>Login</button>"

	$("#content").html(content);

	$("button#login").click(function(){
	login(init_my_app);
	});
	}

	function login(func_to_call, scope) {

	// definindo default permissions
	// https://developers.facebook.com/docs/facebook-login/permissions/v2.0
	// obs: Apps that ask for more than public_profile, email and user_friends must be reviewed by Facebook before they can be made available to the general public.
	// /me/permissions para listar as permissoes do usuario
	if (typeof(scope) === "undefined"){
	scope = {
	scope: "public_profile,email,user_friends,user_photos,user_videos,publish_actions,user_likes",
	auth_type: "rerequest"
	};
	}

	func = function(response) {
	if (response.authResponse) {
	func_to_call();
	} else {
	console.log("User cancelled login or did not fully authorize.");
	}
	};

	FB.login(func, scope);

	}

	function logout() {

	var func = function(){
	document.location.reload();
	}

	FB.logout(func);
	}

	function show_profile(){

	var func = function(response) {

	console.log(JSON.stringify(response));

	var content="Nome: $name <br>".replace("$name", response.name);
	content +="Link: $link <br>".replace("$link", response.link);
	content +="Username: $login <br>".replace("$login", response.username);
	content +="ID: $id <br>".replace("$id", response.id);
	content +="Email: $email <br>".replace("$email", response.email);
	content +="<button id='show_picture'> show picture </button>";
	content +="<button id='show_friends'> show friends </button>";
	content +="<button id='show_friends'> show friends </button>";
	content +="<button id='show_message_form'> show message form </button>";
	content +="<button id='feed_dialog'> lorem ipsum dialog </button>";
	content +="<button id='logout'> logout </button>";

	$("#content").html(content);

	$( "#show_picture" ).click(function() {
	show_picture();
	});

	$("#logout").click(function() {
	logout();
	});

	$("#show_friends").click(function() {
	show_friends();
	});

	$("#show_message_form").click(function() {
	show_message_form();
	});

	$("#feed_dialog").click(function() {
	feed_dialog();
	});

	}

	FB.api("/me", func)

	}

	function show_picture() {

	var func = function(response) {
	var content =" <img src='$url'>".replace("$url", response.data.url);
	$("#profile_image").html(content);
	}

	FB.api("/me/picture?type=normal", func);
	}

	function show_friends(){

	var func = function(response){
	console.log(response.data);
	}

	FB.api("/me/friends", func);

	}

	function show_message_form(){
	var content = "<input type='text' id='message'><button id='post_message'> enviar </button>";

	$("#message_content").html(content);

	$("button#post_message").click(function(e){
	e.preventDefault();

	var value = $("input:text#message").val();

	post_message(value);

	});

	}

	function post_message(message){
	//@scope publish_actions

	func = function() {
	FB.api('/me/feed', 'post', {message: message});
	};

	login(func, {scope: "publish_actions"});

	}

	function feed_dialog(){

	var dict = {
	method: 'feed',
	name: 'Lorem Ipsum',
	caption: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
	description: (
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
	"Phasellus interdum imperdiet lacus eget consectetur. " +
	"Vivamus aliquet aliquet pretium."
	),
	link: "http://www.lipsum.com/",
	picture: "http://www.lipsum.com/images/lipsum07.gif"
	};

	var func = function(response) {
	if (response && response.post_id) {
	console.log("Post foi publicado com sucesso.")
	} else {
	console.log("Post não foi publicado.");
	}
	};

	FB.ui(dict, func);
	}

	/**
	* Mostra os logs relacionados a autenticacao no console do browser
	**/
	function auth_log(){

	var func = function(response) {
	console.log(response.status);
	};

	FB.Event.subscribe("auth.authResponseChange", func);

	}

	</script>

	<h1>Facebook Javascript SDK Demo</h1>

	<div id="content">

	</div>

	<div id="profile_image">
	</div>

	<div id="message_content">
	</div>

	<!-- Usando o SDK para adicionar o Social Plugin "Like button" com o xfbml -->
	<!-- https://developers.facebook.com/docs/plugins -->
	<div
	class="fb-like"
	data-send="true"
	data-width="450"
	data-show-faces="true">
	</div>

	</body>
	</html>