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="http://www.facebook.com/profile.php?id=' + response[0].uid + '">' + 
                                    '<imgid="userPic" src="' + response[0].pic + '"/></a>';
                    var userLink = '<a target="_blank" href="http://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.

Since their introduction, social networking websites such as MySpace, Facebook, Friendster, Orkut and Bebo (among others) have attracted millions of users; many of whom have integrated these websites into their daily routine.

 

There are hundreds of social networking sites that support wide ranging interests and practices. While their key technological features are consistent, the cultures that emerge around these social networking sites are varied. Some facilitate advancing pre-existing social networks and friendships, while others help strangers connect based on shared interests, political views and/or activities, etcetera. Among these websites are those which have incorporated new information and communication tools, such as mobile connectivity, blogging, and photo/video-sharing.

 

As the popularity of of these social networking websites grow, with millions of users all over the world, several innovations have been applied.

 

One of these innovations includes the ability to connect to other social networking sites, thereby allowing users to share friends, interests and likes. Google for instance, has started a drive to connect all social networking sites by building a platform which allows inter-connectivity among social networking websites. The project is dubbed as Google Open Social.

 

The biggest move on the social network front occurred recently, when popular social networking websites such as Friendster, Facebook and mySpace introduced applications which users can choose from and add onto their profiles. These applications may be developed by any developer, as access to APIs are readily available. With these interesting developments in social networking, web developers are learning to embrace such platforms for further development.

 

Web Marketers also have their eyes planted on the social networking phenomenon as these websites have become the foremost marketing tool to reach millions of users world wide. The rise of social networking represents the largest web marketing opportunity since Google.

 

Generating a thumbnail / screenshot of a video has many uses. Many video websites out there, including the ever popular YouTube, use this function to show a static preview of the video through a screen grab or set of screen grabs in image format. You may think it is difficult to create thumbnails from a video file. But I'm here to say 'no, it's not'!

 

To accomplish this task, I made use of this tool: FFmpeg. First a little information about FFmpeg. If you haven't come across this yet then you're missing out on an excellent bit of software to put in your tool kit. It can convert and stream all manner of video and audio files, it is open source (under LGPL, but with some optional GPL bits), and it is constantly being worked on and developed, thus improved.

 

FFmpeg's homepage is where you can grab the latest revision from SVN. If you want it for Windows, then one location I found with quite recent builds is http://ffdshow.faireal.net/mirror/ffmpeg/.

 

Once I had these tools installed, I was ready to begin utilising FFmpeg to convert a specific point in a video file to a thumbnail image. Using the FFmpeg documentation as resources, I eventually arrived at the following command (which should all be on one line) for generating a thumbnail:

 

ffmpeg -y -i /path/to/video.avi -f mjpeg -1 -ss 10 -vframes 1 -s 120x90 -an /path/to/picture.jpg

 

The key components of that command are:

- f mjpeg: specifies that the output should be a JPG
- ss 10: sets that image should be taken from the point 10 seconds from the beginning
- s 120x90: sets the dimension of the image that would be generated

 

You could use Imagemagick to resize or edit the image generated if you wish, as ffmpeg is not really designed for this.

 

A tip to consider if you're taking user input for the video file or output image file, then please remember to escape your variables accordingly! Use something like the escapeshellcmd() PHP function.