fernandoc1 · January 3, 2015 13:50 · fernandoc1 · Jan 3, 2015
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">

 <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Playlist do Picadeiro</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>


 </head>

 <body>

 <script>
 // Load the SDK asynchronously
 (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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

 window.fbAsyncInit = function() 
 {
    FB.init(
    {
        appId      : 'APP ID',
        cookie     : true,  // enable cookies to allow the server to access 
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.1' // use version 2.1
    });

    // Now that we've initialized the JavaScript SDK, we call 
    // FB.getLoginStatus().  This function gets the state of the
    // person visiting this page and can return one of three states to
    // the callback you provide.  They can be:
    //
    // 1. Logged into your app ('connected')
    // 2. Logged into Facebook, but not your app ('not_authorized')
    // 3. Not logged into Facebook and can't tell if they are logged into
    //    your app or not.
    //
    // These three cases are handled in the callback function.

    FB.getLoginStatus(function(response)
    {
        statusChangeCallback(response);
    });

 };

 function checkLoginState()
 {
    FB.getLoginStatus(function(response)
    {
        statusChangeCallback(response);
    });
 }

 // This is called with the results from from FB.getLoginStatus().
 function statusChangeCallback(response)
 {
    //console.log('statusChangeCallback');
    //console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected')
    {
        // Logged into your app and Facebook.
        redirectToPlaylistPage(response);
    } else if (response.status === 'not_authorized')
    {
        // The person is logged into Facebook, but not your app.
        document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
    } else {
        // The person is not logged into Facebook, so we're not sure if
        // they are logged into this app or not.
        document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
    }
 }

 function redirectToPlaylistPage(data)
 {
    //console.log(JSON.stringify(data));
    submitData = {};
    meQuery = new $.Deferred();
    pictureQuery = new $.Deferred();
    FB.api('/me', function(response)
    {
        submitData.me = response;
        meQuery.resolve();
    });
    FB.api('/me/picture',
           {
                "redirect": false,
                "height": "200",
                "type": "normal",
                "width": "200"
           },
           function (response)
           {
               submitData.picture = response;
               pictureQuery.resolve();
           }
   );
   $.when(meQuery, pictureQuery).done(function()
   {
       console.log(JSON.stringify(submitData));
   });
 }

 </script>


    <!-- Header -->
    <header id="top" class="header">
        <div class="text-vertical-center">
            <h1>Picadeirró</h1>
            <h3>Ajude-nos a montar nossa playlist</h3>
            <br>
            <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
            </fb:login-button>
            <div id="status"></div>
        </div>
    </header>

 </body>

 </html>

	<!DOCTYPE html>
	<html lang="en">

	<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Playlist do Picadeiro</title>

	<!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">

	<!-- Custom CSS -->
	<link href="css/stylish-portfolio.css" rel="stylesheet">

	<!-- Custom Fonts -->
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!-- jQuery -->
	<script src="js/jquery.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="js/bootstrap.min.js"></script>


	</head>

	<body>

	<script>
	// Load the SDK asynchronously
	(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/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	window.fbAsyncInit = function()
	{
	FB.init(
	{
	appId : 'APP ID',
	cookie : true, // enable cookies to allow the server to access
	xfbml : true, // parse social plugins on this page
	version : 'v2.1' // use version 2.1
	});

	// Now that we've initialized the JavaScript SDK, we call
	// FB.getLoginStatus(). This function gets the state of the
	// person visiting this page and can return one of three states to
	// the callback you provide. They can be:
	//
	// 1. Logged into your app ('connected')
	// 2. Logged into Facebook, but not your app ('not_authorized')
	// 3. Not logged into Facebook and can't tell if they are logged into
	// your app or not.
	//
	// These three cases are handled in the callback function.

	FB.getLoginStatus(function(response)
	{
	statusChangeCallback(response);
	});

	};

	function checkLoginState()
	{
	FB.getLoginStatus(function(response)
	{
	statusChangeCallback(response);
	});
	}

	// This is called with the results from from FB.getLoginStatus().
	function statusChangeCallback(response)
	{
	//console.log('statusChangeCallback');
	//console.log(response);
	// The response object is returned with a status field that lets the
	// app know the current login status of the person.
	// Full docs on the response object can be found in the documentation
	// for FB.getLoginStatus().
	if (response.status === 'connected')
	{
	// Logged into your app and Facebook.
	redirectToPlaylistPage(response);
	} else if (response.status === 'not_authorized')
	{
	// The person is logged into Facebook, but not your app.
	document.getElementById('status').innerHTML = 'Please log ' +
	'into this app.';
	} else {
	// The person is not logged into Facebook, so we're not sure if
	// they are logged into this app or not.
	document.getElementById('status').innerHTML = 'Please log ' +
	'into Facebook.';
	}
	}

	function redirectToPlaylistPage(data)
	{
	//console.log(JSON.stringify(data));
	submitData = {};
	meQuery = new $.Deferred();
	pictureQuery = new $.Deferred();
	FB.api('/me', function(response)
	{
	submitData.me = response;
	meQuery.resolve();
	});
	FB.api('/me/picture',
	{
	"redirect": false,
	"height": "200",
	"type": "normal",
	"width": "200"
	},
	function (response)
	{
	submitData.picture = response;
	pictureQuery.resolve();
	}
	);
	$.when(meQuery, pictureQuery).done(function()
	{
	console.log(JSON.stringify(submitData));
	});
	}

	</script>


	<!-- Header -->
	<header id="top" class="header">
	<div class="text-vertical-center">
	<h1>Picadeirró</h1>
	<h3>Ajude-nos a montar nossa playlist</h3>
	<br>
	<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
	</fb:login-button>
	<div id="status"></div>
	</div>
	</header>

	</body>

	</html>