smdooley/Facebook JS SDK

## Facebook JS SDK
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title - My ASP.NET Web Page</title>
        <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script src="~/Scripts/jquery-1.7.1.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
        <script src="~/Scripts/modernizr-2.5.3.js"></script>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>

        <button type="button" class="fb-login">Login with Facebook</button>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="~/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @if (WebSecurity.IsAuthenticated) {
                            <text>
                                Hello, <a class="email" href="~/Account/Manage" title="Manage">@WebSecurity.CurrentUserName</a>!
                                <form id="logoutForm" action="~/Account/Logout" method="post">
                                    @AntiForgery.GetHtml()
                                    <a href="javascript:document.getElementById('logoutForm').submit()">Log out</a>
                                </form>
                            </text>
                        } else {
                            <ul>
                                <li><a href="~/Account/Register">Register</a></li>
                                <li><a href="~/Account/Login">Log in</a></li>
                            </ul>
                        }
                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="~/">Home</a></li>
                            <li><a href="~/About">About</a></li>
                            <li><a href="~/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET Web Page</p>
                </div>
            </div>
        </footer>
        @RenderSection("Scripts", required: false)

        <div id="fb-root"></div>
        <script>
            window.fbAsyncInit = function () {
                //-- init the FB JS SDK
                FB.init({
                    appId: 'XXXXXXXXXXXXXXX',                           //-- App ID from the app dashboard
                    channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html',   //-- Channel file for x-domain comms
                    status: true,                                       //-- Check Facebook Login status
                    xfbml: true                                         //-- Look for social plugins on the page
                });

                //-- Additional initialization code such as adding Event Listeners goes here

                //-- Check if the current user is logged in and has authorized the app
                FB.getLoginStatus(checkLoginStatus);
            };

            //-- Login in the current user via Facebook and ask for email permission
            function authUser() {
                FB.login(checkLoginStatus, { scope: 'email, user_likes, user_birthday, user_photos' });
            }

            //-- Check the result of the user status and display login button if necessary
            function checkLoginStatus(response) {
                if (response && response.status == 'connected') {
                    console.log('User is authorized');
                    console.log('Access Token: ' + response.authResponse.accessToken);

                    //-- Hide the login button
                    //document.getElementById('loginButton').style.display = 'none';

//                    FB.api('/me/picture?width=180&height=180', function (response) {
//                        console.log(response);

//                        $('<img>', {
//                            src: response.data.url
//                        }).appendTo('body');
//                    });

                    //FB.api('/me/photos', { fields: 'tags' }, function (response) {
                    FB.api('/me/photos', function (response) {
                        console.log(response.data.length);
                    })
                } else if (response.status === 'not_authorized') {
                    // the user is logged in to Facebook, but has not authenticated your app
                    console.log('User is not authorized');
                } else {
                    // the user isn't logged in to Facebook.
                    console.log('User is not logged into Facebook');

                    //-- Display the login button
                    //document.getElementById('loginButton').style.display = 'block';
                }
            }

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

        <script>
            $(document).ready(function () {
                $('.fb-login').on('click', function (e) {
                    e.preventDefault();
                    authUser();
                });
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>@Page.Title - My ASP.NET Web Page</title>
	<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
	<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
	<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<script src="~/Scripts/jquery-1.7.1.min.js"></script>
	<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
	<script src="~/Scripts/modernizr-2.5.3.js"></script>
	<meta name="viewport" content="width=device-width" />
	</head>
	<body>

	<button type="button" class="fb-login">Login with Facebook</button>
	<header>
	<div class="content-wrapper">
	<div class="float-left">
	<p class="site-title"><a href="~/">your logo here</a></p>
	</div>
	<div class="float-right">
	<section id="login">
	@if (WebSecurity.IsAuthenticated) {
	<text>
	Hello, <a class="email" href="~/Account/Manage" title="Manage">@WebSecurity.CurrentUserName</a>!
	<form id="logoutForm" action="~/Account/Logout" method="post">
	@AntiForgery.GetHtml()
	<a href="javascript:document.getElementById('logoutForm').submit()">Log out</a>
	</form>
	</text>
	} else {
	<ul>
	<li><a href="~/Account/Register">Register</a></li>
	<li><a href="~/Account/Login">Log in</a></li>
	</ul>
	}
	</section>
	<nav>
	<ul id="menu">
	<li><a href="~/">Home</a></li>
	<li><a href="~/About">About</a></li>
	<li><a href="~/Contact">Contact</a></li>
	</ul>
	</nav>
	</div>
	</div>
	</header>
	<div id="body">
	@RenderSection("featured", required: false)
	<section class="content-wrapper main-content clear-fix">
	@RenderBody()
	</section>
	</div>
	<footer>
	<div class="content-wrapper">
	<div class="float-left">
	<p>© @DateTime.Now.Year - My ASP.NET Web Page</p>
	</div>
	</div>
	</footer>
	@RenderSection("Scripts", required: false)

	<div id="fb-root"></div>
	<script>
	window.fbAsyncInit = function () {
	//-- init the FB JS SDK
	FB.init({
	appId: 'XXXXXXXXXXXXXXX', //-- App ID from the app dashboard
	channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html', //-- Channel file for x-domain comms
	status: true, //-- Check Facebook Login status
	xfbml: true //-- Look for social plugins on the page
	});

	//-- Additional initialization code such as adding Event Listeners goes here

	//-- Check if the current user is logged in and has authorized the app
	FB.getLoginStatus(checkLoginStatus);
	};

	//-- Login in the current user via Facebook and ask for email permission
	function authUser() {
	FB.login(checkLoginStatus, { scope: 'email, user_likes, user_birthday, user_photos' });
	}

	//-- Check the result of the user status and display login button if necessary
	function checkLoginStatus(response) {
	if (response && response.status == 'connected') {
	console.log('User is authorized');
	console.log('Access Token: ' + response.authResponse.accessToken);

	//-- Hide the login button
	//document.getElementById('loginButton').style.display = 'none';

	// FB.api('/me/picture?width=180&height=180', function (response) {
	// console.log(response);

	// $('<img>', {
	// src: response.data.url
	// }).appendTo('body');
	// });

	//FB.api('/me/photos', { fields: 'tags' }, function (response) {
	FB.api('/me/photos', function (response) {
	console.log(response.data.length);
	})
	} else if (response.status === 'not_authorized') {
	// the user is logged in to Facebook, but has not authenticated your app
	console.log('User is not authorized');
	} else {
	// the user isn't logged in to Facebook.
	console.log('User is not logged into Facebook');

	//-- Display the login button
	//document.getElementById('loginButton').style.display = 'block';
	}
	}

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

	<script>
	$(document).ready(function () {
	$('.fb-login').on('click', function (e) {
	e.preventDefault();
	authUser();
	});
	});
	</script>
	</body>
	</html>