How To: Create A User Photo Albums Browser Using Facebook Graph API

After learning how to “create” objects on Facebook (let it be upload an image, create a post or an event) it’s time to learn how to “retrieve” objects from the social graph.

So today, you will learn how to create a simple browser of the user’s Facebook albums. You can have a look at our demo page while you are reading the tutorial.

The Requirements

• The Facebook PHP-SDK (it’s require '../src/313/facebook.php'; in our code)
• jQuery
• Fancy Box
• Permissions: user_photos

The Concept

• We will have a main page index.php where we will be retrieving and listing all the user’s albums in
• Clicking any of these albums will direct you to the album’s page album.php where we will be listing the photos this time
• We are going to take care of the paging through query strings
• Following Facebook’s recommendation, we will be checking for a valid session before making graph api calls

Our Code

We won’t be listing the whole code in here, but only snippets and comments. You can view the whole project in the “Demo & Source Code” section.

<?php
require '../src/313/facebook.php';
$facebook = new Facebook(array(
	'appId'  => 'APP_ID',
	'secret' => 'APP_SECRET',
	'cookie' => true,
));

$user = $facebook->getUser();
if ($user) {
	try {
		$user_albums = $facebook->api('/me/albums');
		$albums = array();
		if(!empty($user_albums['data'])) {
			foreach($user_albums['data'] as $album) {
				$temp = array();
				$temp['id'] = $album['id'];
				$temp['name'] = $album['name'];
				$temp['thumb'] = "https://graph.facebook.com/{$album['id']}/picture?type=album&access_token={$facebook->getAccessToken()}";
				$temp['count'] = (!empty($album['count'])) ? $album['count']:0;
				if($temp['count']>1 || $temp['count'] == 0)
					$temp['count'] = $temp['count'] . " photos";
				else
					$temp['count'] = $temp['count'] . " photo";
				$albums[] = $temp;
			}
		}
	} catch (FacebookApiException $e) {
		error_log($e);
		var_dump($e);
		$user = null;
	}
}

if ($user) {
	$logoutUrl = $facebook->getLogoutUrl();
} else {
	$loginUrl = $facebook->getLoginUrl(array(
		'scope' => 'user_photos'
	));
}
?>

So here, we are doing the following:

1. Including the Facebook PHP library
2. Initialize the Facebook class to start communicating with Facebook
3. Get the current connected user
4. If we found one, retrieve the user’s albums and prepare our data array for presentation and our logout link
5. Otherwise, create the login link with the proper permission

Now for the album page:

<?php
if( !isset($_GET['id']) )
	die("No direct access allowed!");
require '../src/313/facebook.php';
$facebook = new Facebook(array(
	'appId'  => 'APP_ID',
	'secret' => 'APP_SECRET',
	'cookie' => true,
));

$user = $facebook->getUser();
if ($user) {
	try {
		$logoutUrl = $facebook->getLogoutUrl();
		
		$params = array();
		if( isset($_GET['offset']) )
			$params['offset'] = $_GET['offset'];
		if( isset($_GET['limit']) )
			$params['limit'] = $_GET['limit'];
		$params['fields'] = 'name,source,images';
		$params = http_build_query($params, null, '&');
		$album_photos = $facebook->api("/{$_GET['id']}/photos?$params");
		if( isset($album_photos['paging']) ) {
			if( isset($album_photos['paging']['next']) ) {
				$next_url = parse_url($album_photos['paging']['next'], PHP_URL_QUERY) . "&id=" . $_GET['id'];
			}
			if( isset($album_photos['paging']['previous']) ) {
				$pre_url = parse_url($album_photos['paging']['previous'], PHP_URL_QUERY) . "&id=" . $_GET['id'];
			}
		}
		$photos = array();
		if(!empty($album_photos['data'])) {
			foreach($album_photos['data'] as $photo) {
				$temp = array();
				$temp['id'] = $photo['id'];
				$temp['name'] = (isset($photo['name'])) ? $photo['name']:'';
				$temp['picture'] = $photo['images'][1]['source'];
				$temp['source'] = $photo['source'];
				$photos[] = $temp;
			}
		}
	} catch (FacebookApiException $e) {
		error_log($e);
		$user = null;
	}
} else {
	header("Location: index.php");
}
?>

1. Checking if the page were requested properly
2. Initialize the Facebook Class and check for a valid user before retrieving the album’s photos
3. Retrieve the album’s photos with custom offset/limit if applicable
4. Check for the paging parameters and prepare the paging links if necessary
5. Prepare the photos array for presentation

The rest of the code should be trivial, where we are building the HTML of the main and albums pages based on the data we’ve collected and organized.

Demo & Source Code

You can test the application yourself in our demo page or you can download the source code from the link below:

Facebook Albums Browser (1338)