Login with facebook using facebook javascript sdk

In this tutorial we are going to learn how to add login with facebook feature in our website.
Now a days we all know that users doesn’t have time to manually fill all the details and register themself.

So using this feature user can make login with his/her facebook account and fetch his/her public & private information to create registration.

First of all you need to create facebook app by this you can get your App Id and App Secret which will use to authenticate your requests you are going to send to facebook .



Click below link to create your first facebook app.
https://developers.facebook.com/

Login into facebook developer account and click on myapp tab after that you’ll see add new app link.
loginfb-1

Now you’ll see multiple options, you can select them as per your need but this time i am choosing website because i am creating login with facebook feature for my website.
loginfb-2

Finally enter your app name and click on create.
loginfb-3

After doing all the above steps successfully you can see you App Id and App Secret.
loginfb-4

Now time to create javascript program for your website.
create a file index.html

index.html

<!DOCTYPE html>
<html>
<head>
<title>Login with facebook using facebook javascript sdk</title>
<meta charset="UTF-8">
</head>
<body>
<script>
 
 
  (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      : 'YOUR_APP_ID',
      cookie     : true,  
      xfbml      : true,  
      version    : 'v2.2' 
    });
 
     FB.getLoginStatus(function(response) {
         console.log(response);
     });
  };
 
   function fblogin() {
     FB.getLoginStatus(function(response) {
        if(response.status == 'connected') {
          getUserProfile();
        } else {
          $("#status").empty().text("Please login with facebook.");
        }
    });
  }
 
  function getUserProfile() {
     console.log('Fetching user information.... ');
      FB.api('/me', function(response) {
      console.log(response);
      var profilePic = "http://graph.facebook.com/"+response.id+"/picture?type=large";
      var userInfo = "<img src='"+profilePic+"'><br/>";
          userInfo += response.name+" ("+response.gender+")<br/>";
          userInfo += response.email+"<br/>"
      $("#status").empty().html(userInfo);
     });
   }
 
</script>
 
<fb:login-button scope="public_profile,email" onlogin="fblogin();" data-size="xlarge">
</fb:login-button>
<div id="fb-root"></div>
 
<div id="status">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

Where scope=”public_profile,email” is the parameter to access a subset of that user’s data stored on Facebook.




We use scope parameter to set permissions
Permissions are strings that are passed along with a login request or an API call. Here are two examples of permissions:

email – Access to a person’s primary email address.
user_likes – Access to the list of things a person likes.
For example, if you add the login button to a web app and ask for email and user_likes via the scope parameter, a person would be prompted with this dialog when logging in for the first time:
loginfb-5

See the working demo and download source code.

Hope this tutorial will help you to add login with facebook feature in your website.

If you like this post please don’t forget to subscribe My Public Notebook for more useful stuff.