Facebook PHP API Applications: Working with User Data

This is the third part of a tutorial series on Facebook PHP API implementation. In this part, you will learn four important aspects of this API application: how to grab profile photos from the API; how to request user permission from the Facebook login to access sensitive profile information; the importance of “Access token” in accessing sensitive profile information; and how to grab sensitive information using Access token verification (for example, the person's birthday, email address, bio, etc.) in PHP.

TABLE OF CONTENTS:

By: Codex-M

Poor Best

Rating:

/ 22

September 14, 2010

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Grabbing profile photos from the Facebook Graph API

Sometimes if you integrate Facebook into your website, you need to display the main user's profile photo.

The URL you need to grab photos in Facebook graph API uses this format:

http://graph.facebook.com/UID/picture

Where: UID is the Facebook user ID number.

In PHP, once the user is logged in and the cookie is set, the script will get contents from the API (file_get_contents):

<?php if ($cookie) {

//###cookie is set, user is logged in

$user = json_decode(file_get_contents('https://graph.facebook.com/'.$cookie['uid']));

And then display the user's main profile photo as in this code:

echo '<img src="http://graph.facebook.com/'.$user->{'id'}.'/picture" alt="'.$user->{'name'}.'"/>';

Below is the complete script, which is similar to the one shown at the following url: http://bit.ly/cLZuIh. It will display the user's Facebook id, name and the profile photo:

<?php
define('FACEBOOK_APP_ID', 'YOUR FACEBOOK APPLICATION ID HERE');
define('FACEBOOK_SECRET', 'YOUR FACEBOOK SECRET HERE');
function get_facebook_cookie($app_id, $application_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 . $application_secret) != $args['sig']) {
    return null;
}
return $args;
}
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($cookie) {
//###cookie is set, user is logged in
$user = json_decode(file_get_contents('https://graph.facebook.com/'.$cookie['uid']));
echo 'Your Facebook ID: '.$user->{'id'};
echo '<br />';
echo 'Your name: '.$user->{'name'};
echo '<br />';
//###display the user profile photo
echo '<img src="http://graph.facebook.com/'.$user->{'id'}.'/picture" alt="'.$user->{'name'}.'"/>';
echo '<fb:login-button perms="email,user_birthday" onlogin="window.location.reload(true);" autologoutlink="true"></fb:login-button>';
}
else
{
//###user is not logged in, display the Facebook login button
echo '<fb:login-button perms="email,user_birthday" autologoutlink="true"></fb:login-button>';
}
?>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
</body>
</html>

Understand the importance of the “Access token” in Facebook Graph

So far our examples are limited to publicly accessing user profile information, such as the main user profile photo, name and id. There are times when your application requires the user's email address and birthday (or even the user's bio or his/her list of friends).

This is where the access token property will be used. But first, as you might have already observed, it asks for user permission before your Facebook application in PHP can retrieve sensitive user information, such as email address and birthday.

The access token URL is in the form of: https://graph.facebook.com/me?access_token=[accesstokenoftheuser]

Where [accesstokenoftheuser] varies for each login user. The value of [accesstokenoftheuser] is equal to the value of:

$cookie['access_token']

You can get that value by echoing the access token in PHP:

echo $cookie['access_token']

In PHP, the file get contents/json_decode statement is changed from $cookie['uid'] to $cookie['access_token']. So the script below will echo the value of $cookie['access_token'] in the browser:

<?php
define('FACEBOOK_APP_ID', 'Your facebook application id');
define('FACEBOOK_SECRET', 'Your facebook secret');
function get_facebook_cookie($app_id, $application_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 . $application_secret) != $args['sig']) {
    return null;
}
return $args;
}
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($cookie) {
//###user is logged in, echo the access token in the browser
$user = json_decode(file_get_contents('https://graph.facebook.com/me?access_token='.$cookie['access_token']));
echo $cookie['access_token'];
die;
}
else
{
//###user is not logged in, display the Facebook login button
echo '<fb:login-button perms="email,user_birthday" autologoutlink="true"></fb:login-button>';
}
?>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
</body>
</html>

So for example, this is the value:
1453286532125478|2.dfwererdfjk878_n43dfsYPzw__.2400.dfsdfs2000-529dfss582|dfs4sdeBe-fdsfd6D8dfsfsdd

You can view a Facebook user's information using a web browser (including the sensitive information, such as birthdate) if you know the access token key by using the syntax: https://graph.facebook.com/me?access_token=[accesstokenoftheuser]

So it will be:
https://graph.facebook.com/me?access_token=1453286532125478|2.
dfwererdfjk878_n43dfsYPzw__.3600.dfsdfs2000-529dfss582|dfs4sdeBe-fdsfd6D8dfsfsdd

If that URL is opened in the browser, it will look like the screen shot below: