Integrating Facebook Login system in our own Web

Integrating Facebook Login system in our own Web

Writtenby

MohammedShirajum Monir

Dhaka,Bangladesh

Web:msmonir.webs.com

---

A lot of people ask me to know the process to use thefacebook login into their website or application. Hence I am writing thistutorial.

Facebook Login makes it easy to connect with people usingyour app or website. The Facebook SDK for Javascript provides a simple path tointegrating login with your websites and mobile web apps. This guide shows youthe way for your app to make API calls on behalf of a person using it.

Just follow these steps:

1.       Create aFacebook app: You will need a Facebook App ID before you start using the SDK. Thiscan be done through this link: https://developers.facebook.com/apps/.Once you've created the app, note the app ID shown at the top of the dashboardpage.

2.        Add the Facebook SDK for JavaScript: Insertthe Javascript SDK initialization snippet after the opening   tag in yourHTML page. This code will load and initialize the JavaScript SDK in your HTMLpage. Replace YOUR_APP_ID with the app ID noted in Step 1 above andmsmonir.webs.com with yourown domain. The best place to put this code is right after the opening   tag. Samplecode is:

  // Additional JS functions here

  window.fbAsyncInit = function() {

    FB.init({

      appId     : 'YOUR_APP_ID', // App ID

      channelUrl : '//msmonir.webs.com/channel.html',

      status    : true,

      cookie    : true,

      xfbml     : true 

    });

  };

  (function(d){ // this function loads the SDKasynchronously

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

The channel file addresses someissues with cross-domain communications in certain browsers. The contents ofthe channel.html file can be just a single line:

3.       Add thelogin code: Add the login handling to your HTML to end up with the code below:

  window.fbAsyncInit = function() {  

FB.init({    appId      : 'YOUR_APP_ID', // App ID    

channelUrl : '//msmonir.webs.com/channel.html',    

status     : true,     cookie     : true,     xfbml      : true    });   

FB.Event.subscribe('auth.authResponseChange', function(response) {    

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

 testAPI();    

} 

else if (response.status === 'not_authorized') {      

FB.login();    

} else {      

FB.login();    

}  });  

};   // Load the SDK asynchronously  (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));    function testAPI() {    console.log('Welcome from Mohammed Shirajum Monir.');    FB.api('/me', function(response) {      console.log('Good to see you, ' + response.name + '.');    });  } 

Now you can test your app by going to the URL where youuploaded this HTML. Open your JavaScript console, and you'll see the testAPI() function displaya message with your name in the console log.

I hope this would help you a lot.

Thank you for reading this tutorial.