In this tutorial, I have covered how to use Facebook Javascript SDK. Using this SDK, you can get the full functionality of Facebook OAuth at client-side.
i.e., Getting User Information/Posting to Wall/Reading Messages can be done with pure JavaScript, It doesn’t require any server-side programming.

You can login with your facebook account without reloading your page. Let's see step by step how its will work.

Demo | Download

Step1: Create facebook App

First of all you need to create facebook app to get facebook YOUR APP ID. Click here to create facebook app.

Step2: Create channel file

Once you have created facebook app, Add a Channel file in your website. Channel file is optional but it improves the Facebook Javascript SDK performance by addressing cross-domain issues in certain browsers. Add following code in your channel file.

<script src="//connect.facebook.net/en_US/all.js"></script>

Step3: Facebook SDK initialization. Add the below code to your HTML file.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : 'YOUR_WEBSITE_CHANNEL_URL',
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    };
 
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
 
</script>

Step4: Write a Method for Login

Use Fb.login() method for asking user authorization.If you want extra information from user, you need to provide the necessary scope list.

for email : – {scope: ‘email’}
for Friends List – {scope: ‘read_friendlists’}
For Photos,Videos – {scope: ‘user_photos,user_videos’}

function Login()
{

    FB.login(function(response) {
       if (response.authResponse) 
       {
            getUserInfo(); // Get User Information.

        } else
        {
         console.log('Authorization failed.');
        }
     },{scope: 'email'});

}

Step5: Get User Information by making API call to Graph API

function getUserInfo() {
FB.api('/me?fields=id,name,email', function(response) {

 //response.name       - User Full name
 //response.link       - User Facebook URL
 //response.username   - User name
 //response.id         - id
 //response.email      - User email

 });
}

Step6: Add callback handler for authResponseChange events. This is optional.

FB.Event.subscribe('auth.authResponseChange', function(response) 
{
     if (response.status === 'connected') 
     {
        //SUCCESS
     }   
     else if (response.status === 'not_authorized') 
    {
        //FAILED
    } else
    {
        //UNKNOWN ERROR. Logged Out
    }
});

Step7: Write a Method for Logout

function Logout()
{
    FB.logout(function(){document.location.reload();});
 
}

Demo | Download