facebook login button

Facebook login in website using javascript SDK

Download full program

Facebook api gives facility to login on single click. In todays fast life, very less people want to fill credential everytime on any website. So now a days, social login generates maximum market.


Facebook make it very simple to use. To create facebook login in your website, we must have facebook developer account. After it you have to create an app in facebook. In app dashboard you will get an appId, it will be used for facebook login code.


Previously, facebook donot have review policy so whenever your works gets completed, you can make it live, but now facebook has many restrictions. When you give facebook login, you have to set permission for your app. If you ask for basic permission, you can make it live without review. Basic permission includes public profile, email and user_friends. But if you ask for more permission, you have to send it for review to facebook. You can see list of permissions.


Here we use facebook javascript sdk for facebook login through its button

Note: Generally this code will not work with localhost. You need to have server, to test this code.


Follow following steps to implement it.

1. Firstly we load facebook javascript asynchronously, after body tag in html file


<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'));

2. Provide facebook appId to use particular app permissions

 window.fbAsyncInit = function() {

  FB.init({

   appId : '201794826616225', //Your appId comes here

   cookie : true, // enable cookies to allow the server to access the session

   xfbml : true, // parse social plugins on this page

   version : 'v2.5' // use graph api version 2.5

  });

3. We have already initialized javascript sdk. We need to know the login status of person visiting our website. Following function give its details

 FB.getLoginStatus(function(response) {

  statusChangeCallback(response);

 });

 

4. On button click, check for login, whether it is already logged in or not.

 function checkLoginState() {

  FB.getLoginStatus(function(response) {

   statusChangeCallback(response);

  });

 }

 

5. Function used in login status. It can be

 i. Logged into your app ('connected')

 ii. Logged into Facebook, but not your app ('not_authorized')

 iii. Not logged into Facebook and can't tell if they are logged into your app or not.

 

 //This is called with the results from from FB.getLoginStatus().

 function statusChangeCallback(response) {

  console.log(response);

  // The response object is returned with a status field that lets the app know the current login status of the person.

  if (response.status === 'connected') {

   // Logged into your app and Facebook.

   testAPI();

  } 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.';

  }

  }

 }

 

6. Fetch information and put it in db

// Here we run a very simple test of the Graph API after login is successful. See statusChangeCallback() for when this call is made.

function testAPI() {

 console.log('Welcome! Fetching your information.... ');

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

  console.log('Successful login for: ' + response.name);

  document.getElementById('status').innerHTML ='Thanks for logging in, ' + response.name + '!';

 });

}

</script>


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

<div id="status"></div>


Facebook provide different login button. You can find more buttons on https://developers.facebook.com/docs/facebook-login/web/login-button

Download full program

Name
Email
Comments
Back
Funding

We need your support to operate it properly. We have lots of ideas but less fund, so help us with your funding.

Thoughts for the day

If a country is to be corruption free and become a nation of beautiful minds, I strongly feel there are three key societal members who can make a difference. They are the father, the mother and the teacher.

Dr. A.P.J. Abdul Kalam
Polls
Which device you use most for facebook application?
Laptop/PC
20%

 


Android
53%

 


IOS
13%

 


Blackberry
14%

 


Tutorial On Request
Q. Ask us for any tutorial or any thing which helps to build your career better.
Email:
Query: