Blogs

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.

Today, the IT world is swamped with applications and programs, and the internet is everywhere.

Applications, be they standalone desktop applications or web applications, can now interface with web services over standard network protocols, which raises a question: Which type is better?

The answer is there is no clear answer, but we may be approaching one. Read on...

Standalone (or desktop) apps traditionally performed a lot faster and had far more User Interface (UI) capabilities than web apps.

They are natively supported by the underlying operating system, which makes them dependent of the platform they run upon. The industry calls these Rich client apps.

Web apps were traditionally limited to the out-of-the-box UI capabilities, but they could and can be run without any specific requirements from users' operating systems. The industry calls these Thin client apps.

During recent years, a lot of initiatives have surfaces to somehow bridge the capability gap between Rich and Thin client applications. Some have been more successful than others.

There's specifically one that grabs attention - the EXT JavaScript library, which amazingly transforms the web experience into rich experience.

Now... having web apps covering wider and wider IT areas than ever before, will standalone apps become history someday?

I think so...

 

To get started in creating your own chart, just open a browser and paste in address bar our sample URL below:

 

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

In our sample URL, the text “http://chart.apis.google.com/chart” is the source address of our chart.

Then after the question mark (?) are the parameters and their corresponding values that you will provide in order to generate our chart. The parameters are separated by the ampersand (&). So the parameters based from our sample are:

 

• cht – specifies the chart type like bar, line, pie and others. In our sample, we are displaying a pie chart (p3). For other types of chart and their corresponding value, just click here.
• chd – specifies the data that will be plotted in our chart in x, y format. You can also customize the data format of your chart.
• chs – specifies the size of the chart image in width x height format. In our sample, the size of our chart image is 250x100.
• chl – specifies the labeling of our chart separated by pipe (|). The labels are displayed along the x-axis. To customize the labeling of each axes, use chxl instead.

Now that we have our URL string, it is now time to embed this in our web page. Just open your favorite html editor and paste the following html code:

<html>
<head>
<title>Sample Chart </title>
</head>
<body>
<img src=”http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
” alt=”Sample Chart”/>
</body>
</html>

There, we have just created our very simple chart.

Of course, if you want to add more customisation (e.g. legends, line markers and colors, visible axes, axis label styles, data scaling, data formatting, etc.) to your chart, just go to the Google Chart API site.