Update 2012-01-13: For OAuth 2.0 implementation, please refer to the new post.
Facebook Javascript SDK – A Simple Login Page with OAuth 2.0
Update 2011-12-19: Since Facebook has updated their authentication system and HTTP to OAuth 2.0 and HTTPS. The following example will not work any more. i will update the post later. For more information, you can refer to Jerry Cain – Updated JavaScript SDK and OAuth 2.0 Roadmap
Facebook API allows your website to interact with the Facebook content. A very common usage is to authenticate a Facebook user to your website. Let’s try it now.
1. Create the a Facebook App @ Facebook Developers.
2. Enter the website URL under Select how your app integrates with Facebook.
3. Upload the following file to your web server. This file should be located at the URL which we enter in step 2.
fb-login.php
<?php
// Enter the app id and secret below
define('YOUR_APP_ID', '<facebook app id>');
define('YOUR_APP_SECRET', 'facebook app secret');
function get_facebook_cookie($app_id, $app_secret) {
$args = array();
parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
ksort($args);
$payload = '';
foreach ($args as $key => $value) {
if ($key != 'sig') {
$payload .= $key . '=' . $value;
}
}
if (md5($payload . $app_secret) != $args['sig']) {
return null;
}
return $args;
}
$cookie = get_facebook_cookie(YOUR_APP_ID, YOUR_APP_SECRET);
$user = json_decode(file_get_contents('https://graph.facebook.com/me?access_token='.$cookie['access_token']));
?>
<html>
<head>
<title>Eureka! - My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<?php if ($user->id) { ?>
<p>Welcome <?= $user->name ?></p>
<?php } else { ?>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:<?php print YOUR_APP_ID; ?>, cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login to Eureka!</fb:login-button>
<?php } ?>
</body>
</html>
4. Go to the above file URL, you could find the login button.
5. Enter your Facebook login in the popup window.
6. A confirmation box will then appear and ask you to authorize the permission of the Facebook App.
7. The login process is completed after you clicked the allow button. Refresh the page and see what you get.
8. The Facebook user has authorize the Facebook App, so the permission box will be skipped until the user remove the Facebook App @ the Facebook Account Settings page.
Done =)
Next: Facebook Javascript SDK – Reload/Redirect URL after Facebook Login
Reference: Facebook Developers – Facebook for Websites
Eureka! 
Great tutorial… thanks a lot !
LikeLike
you are welcome. =)
LikeLike
Can u tell me how to retrieve user details after login and store into mysql database
LikeLike
you could modified the fb login button to get more access permissions. ex.
Here is the list of available permissions.
Facebook API reference – Permissions
LikeLike
DO you have an updated version of this example, using the graph 2.1 ?
LikeLike
I haven’t tried that. You should be able to find similar example on the official facebook documentation.
LikeLike
Can you tell me how to get Facebook User Id along with user name.? plz
LikeLike
This is deprecated. Please refer to Facebook Javascript SDK – A Simple Login Page with OAuth 2.0
LikeLike