Monday, August 19, 2013

Integrate Facebook Login authentication to website

Introduction: In this article I will explain how we can Integrate Facebook Login authentication to website.
Facebook Login authentication

To integrate Facebook authentication in website firstly we have to create Facebook App Id. For this open the link If you are already loged in than you will redirect to Create App other you redirect to login page. After login to Facebook a pop up will open as shown in snapshot:
Facebook Login authentication

Enter App name and click on Continue button. Here I Enter App name Test. After that captcha window will be open and enter the text as shown in attached snapshot:
Facebook Login authentication

Now you will redirect to your App page and see the structure as attached snapshot:

Facebook Login authentication

Enter URL of your website in Site URL field (e.g. and click on save changes button.
Note: if you want to check it on localhost than enter your localhost project URL (e.g. http://localhost:1750 ) here number is your local port number, add this to Site URL field and test it. Enter the updated URL of your application because the port number of your local site can changed any time.

Add a new webform to project. After that add the Facebook Javascript SDK in between body Tag of .aspx page as mention below:

    <form id="form1" runat="server">
    <div id="fb-root"></div>
    window.fbAsyncInit = function () {
            appId: '636863302999119', // App ID
            channelUrl: '//' + window.location.hostname + '/channel', // Channel File
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true  // parse XFBML

        FB.Event.subscribe('auth.authResponseChange', function (response) {
            // Here we specify what we do with the response anytime this event occurs.
            if (response.status === 'connected') {
                // The response object is returned with a status field that lets the app know the current
                // login status of the person. In this case, we're handling the situation where they
                // have logged in to the app.
                document.getElementById('auth-displayname').innerHTML =;
            } else if (response.status === 'not_authorized') {
                // In this case, the person is logged into Facebook, but not into the app, so we call
                // FB.login() to prompt them to do so.
                // In real-life usage, you wouldn't want to immediately prompt someone to login
                // like this, for two reasons:
            } else {
                // In this case, the person is not logged into Facebook, so we call the 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'); = id; js.async = true;
        js.src = "//";
        ref.parentNode.insertBefore(js, ref);
    } (document));

  Below we include the Login Button social plugin. This button uses the JavaScript SDK to
  present a graphical Login button that triggers the FB.login() function when clicked.

  Learn more about options for the login button plugin:
  /docs/reference/plugins/login/ -->

<table align="center">
<div id="auth-status">
<div class="fb-login-button" show-faces="true" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>
<div id="auth-loggedout">

Run the project an check out the result.


  1. hey ya, its really helpful stuff .. nice work keep it up :)