Facebook (Login) Integration to Web Applications

Guys here is Simple steps to integrate facebook login to your web app through javascript SDK

1.) Register new app to your official account and fill basic detail like namespace and contact mail with their criteria.(contact mail is necessary for make app public).  It genrate App ID and App Secret .

2.) Toggles Status and Review to YES.

3.) Include javascript SDK to your application.


 
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
        testAPI();
    } else if (response.status === 'not_authorized') {
        document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.';
    }
  }

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

  window.fbAsyncInit = function() {
  FB.init({
    appId      : '************',
    cookie     : true,
    xfbml      : true,
    version    : 'v2.2'
  });
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });

  };  (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'));
 
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.email+ '!';
    });

}

•  This method print response of fb on console 
• { user name:' ###' ,first_name:'###',email:'###',last_name:'###',.....}

  FB.api('/me', function(response) {

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

4.)  Integrate fbLogin Button to your Web Page:

 <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">

</fb:login-button>

<div id="status">

</div>