Make four files in your server, home.html, profile.php, config.php and logout.html
The first thing you need to do is set up your application, a few months ago this was quite a long process, but facebook has made it easier, just head over to the Facebook Connect Wizard and follow the steps. Come back when you get to step 3.
That wasn’t hard at all was it? If you are on step 3 your screen should look similar to the following. We are going to need the facebook connect button to be in home.html so go ahead and put the code in that page.
Now go to home.html, if it all went right you should get a facebook connect button and when you click on it you should get a pop up window like the following.
facebook connect window
Take a look at the FBML (FaceBook Markup Language) code used to render the button.
<fb:login-button v="2" size="medium" onlogin="window.location.reload(true);"> Connect with Facebook </fb:login-button>What we need to do with this code is change the onlogin attribute.
change window.location.reload(true) to window.location='http://yourdomain.com/profile.php'So your new button code should look like the following.
<fb:login-button v="2" size="medium" onlogin="window.location='http://yourdomain.com/profile.php';"> Connect with Facebook </fb:login-button>That’s it for the home.html page, now let’s go the profile.php page where most of the action takes place.
The Profile Page: profile.php
In order to work with facebook’s api you are going to have to download their PHP Client Libraries which you can get from this link.
There are several files inside the folder but you’ll only need to include “facebook.php” in your profile script. Before we begin working in this script though we need to to fill out the config.php file you made. This file will have nothing more than your API Key and secret.
I created an array with these two values in my config.php file.
<php
$facebookConfig=array(
'apiKey'=>'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
'secret'=>'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
);
// now I can use $facebookConfig['apiKey'] and $facebookConfig['secret'] in my app
We are ready to roll! Include the two files ( config.php and facebook.php ) in your profile.php file.<?php require_once 'config.php'; require_once "facebook-platform/php/facebook.php"Now we are going to make an object of the Facebook class, the constructor needs the api key and secret
$facebook= new Facebook($facebookConfig['apiKey'],$facebookConfig['secret']);The next line of code we need to have requires that the user be logged in and it returns the user’s ID with which you can use other functions.
$fbUser=$facebook->require_login();Now that we have an ID we can get the user’s information using a function called “user_getInfo”
Optional: This is where having a powerful text editor
and good documentation of classes comes in handy, with a text editor
like Eclipse you are able to see all the functions that are available
for the facebook object along with a description of what they do.
The user_getInfo method needs a user id(s) and a field(s) of
information you would like to get from the user. I just want to get
their first name and last name. If you would like to get more
information from a user go to Users.getInfo and scroll down to the response section to see the list of all the available fields.So this is what you need to get information from a user.
$fields=array('first_name','last_name');
$userInfo=$facebook->api_client->users_getInfo($fbUser,$fields);
To display the information you would do this. echo $userInfo[0]['first_name']; echo $userInfo[0]['last_name'];Notice that $userInfo is a two dimensional array, that’s because you could get information from more than one person, you would accomplish this by passing an array of user IDs to the getinfo method, in our case we just passed one ID and that’s why we use [0].
You now have an ID, first and last name, what you do with this information is totally up to you, you could store it in a database, cookie, session etc.
Let’s move on to how to log people out of your site.
Logging people out of your site and facebook
When someone logs into your site they also log in to facebook, so let’s make a button that people can click on to log out.We are still working with the file "profile.php"
The function used to log out is a javascript function and it is part of facebook’s framework, when it is executed ( when the users clicks the logout button ) it will log people out of your site and facebook and it will redirect the person to a URL you specify (logout.html).
To make this function work you need to include the javascript you included in home.html
Now add the following code to that script, after the FB.init function.
function logout(){
FB.Connect.logoutAndRedirect('http://yourdomain.com/logout.html');
}
You can make your own image for the logout button or you can use
facebook’s, let’s go ahead and used their button. We are going to make a
link with an onclick attribute that will call logout().<a onclick="logout()"> <img id="fb_logout_image" src="http://static.ak.fbcdn.net/images/fbconnect/logout-buttons/logout_small.gif" alt="Connect"/> </a>The previous code should display the following button.
the log out button
Logout pop up window
<?php
require_once 'config.php';
require_once "facebook-platform/php/facebook.php";
$facebook= new Facebook($facebookConfig['apiKey'],$facebookConfig['secret']);
$fbUser=$facebook->require_login();
$fields=array('first_name','last_name');
$userInfo=$facebook->api_client->users_getInfo($fbUser,$fields);
?>
<html>
<head>
</head>
<body>
<?php
echo $userInfo[0]['first_name'];
echo $userInfo[0]['last_name'];
?>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script><script type="text/javascript">
FB.init("<?php echo $facebookConfig['apiKey'];?>");
function logout(){
FB.Connect.logoutAndRedirect('http://yourdomain.com/logout.php');
}
</script>
<a onclick="logout()"><img id="fb_logout_image" src="http://static.ak.fbcdn.net/images/fbconnect/logout-buttons/logout_small.gif" alt="Connect"/></a>
</body>
</html>
You don’t need any special code in logout.html, I just have a “You have logged out message”.That’s it for today, stay tuned for more Facebook API tutorials.
- How To Make a One Click Sign Up Form
- Make Your Own Social Networking App With tarpipe
- TwitPic-Like Twitter Sign In With PHP and Zend
- Facebook-Like Status Update Effect With JQuery and CSS
- How to Easily Loop Through Form Elements
