In order to attract a lot of users to your web application, you can have them use their Facebook account by creating a single sign-on page. With the single sign-on feature added to your web application, there's no need for your users to register on your site. They just need to logon to your web application using their Facebook login details then you can access the user's Facebook account details. The account details that will be provided to you are based on what the Facebook user has authorized to share (e.g. email address, public information such as name, profile picture and list of friends, and profile information such as birthday and age).Before we start, you must first register your web application with Facebook in order to get an app ID. Once you are provided with an app ID, display the Facebook image button by copying this image tag in the body part of your html:

<img id="loginBtn" onclick="FB.login()" style="cursor: pointer;" src="https://s-static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif"/>

After that, copy and paste this code at the end part of the body:

    
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({appId: 'your_application_id', status: true,
                   cookie: true, xfbml: true});
                   
        FB.getLoginStatus(function(response) {
             onStatus(response);
             FB.Event.subscribe('auth.statusChange', onStatus);	
             FB.Event.subscribe ('auth.login', reloadPage);
        });
        
        function onStatus(response) {
             if (response.session) { 
                showAccountInfo();   
            } else {
                showLoginButton();
            }
        }

        function reloadPage(response){
            if (response.session) {
                    window.location.reload();
            } else {
                  showLoginButton();
            }
        }
        
        function showAccountInfo() {
            FB.api(
            {
                method: 'fql.query',
                query: 'SELECT uid,name, pic FROM user WHERE uid='+FB.getSession().uid
            },
                function(response) {
                    var imageLink = '<a id="userImage" target="_blank" href="https://www.facebook.com/profile.php?id=' + response[0].uid + '">' + 
                                    '<imgid="userPic" src="' + response[0].pic + '"/></a>';
                    var userLink = '<a target="_blank" href="https://www.facebook.com/profile.php?id=' + response[0].uid + '">' + response[0].name + '</a>';
                    document.getElementById('account-info').innerHTML = (
                        imageLink + '<div id="userInfo"><span id="userName">' +
                        userLink + '</span>' + ' <img onclick="logout()" style="cursor:pointer;float:right;padding:0pt 25px 0pt  0pt;"' + 
                        'src="https://s-static.ak.fbcdn.net/rsrc.php/z2Y31/hash/cxrz4k7j.gif"/></div>'
                    );
                }
            );
        }
        
        function showLoginButton() {      
            document.getElementById('account-info').innerHTML = (
                '<img id="loginBtn" onclick="FB.login()" style="cursor: pointer;"' +
                'src="https://s-static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">'
            );
        }
        
        function logout(){
            FB.logout();
            alert('You just logged out!');
            window.location.reload();
        }
    </script>

The FB.init() function initializes the API with your app ID. After initializing the API, we will determine the user's login status by calling the onStatus() function once on page loads. In our case, we are not yet logged in so we are expecting a Facebook image button to be displayed.

Once the user clicks the Facebook image button, a pop-up window will be displayed prompting the user to login to the web site through Facebook. On the first login of the user to the web site, an authorization dialog will appear requesting the user for permission to access his/her account details.

auth.login callback is called once the user logs in to the site. In our script, we reload the page once the user is logged in to our site. Since the user login status has changed, auth.statusChange is called. Now that the user is logged in to our site, the Facebook user's name, profile picture and a Facebook logout image button will be displayed.

Now, how we can access the user's Facebook account details' Once the user is logged in to our website, his/her account info are stored in a signed cookie named fbs_appID. So if you're website's app ID is 141094192572697, user's Facebook account info is stored in fbs_141094192572697 cookie. We will use server-side coding in order to fetch data from the cookie. Here is a sample PHP script:

 $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
    }
    if (md5($payload . $application_secret) != $args['sig']) {
    return null;
    }
    return $args;
}

public function getUserInfo($cookie)
{
    $user = array();
    $user['fb_uid'] = json_decode(file_get_contents(
            'https://graph.facebook.com/me?access_token=' .
            $cookie['access_token']))->id;
    $first_name = json_decode(file_get_contents(
            'https://graph.facebook.com/me?access_token=' .
            $cookie['access_token']))->first_name;
    $last_name = json_decode(file_get_contents(
            'https://graph.facebook.com/me?access_token=' .
            $cookie['access_token']))->last_name;
    $name = json_decode(file_get_contents(
            'https://graph.facebook.com/me?access_token=' .
            $cookie['access_token']))->name;
    $user_link = json_decode(file_get_contents(
            'https://graph.facebook.com/me?access_token=' .
            $cookie['access_token']))->link;
    $email = json_decode(file_get_contents(
            'https://graph.facebook.com/me?access_token=' .
            $cookie['access_token']))->email;        
    return $user;
}

?>

In the sample PHP script above, we are able fetch the user's Facebook ID, firstname, lastname, name, user's URL and email address.