Display Facebook Albums and Photos on the Website using PHP

Facebook Graph API makes it easy to embed Facebook albums to the website. You can easily create a photo gallery with Facebook photo albums using PHP and Graph API. In this tutorial, we’ll show you how to display albums and photos of a Facebook page in the website with PHP.

Do you want to get all the photos from the Facebook page and show on your website? There’s a way to upload a photo once on the Facebook page, and then let it available for both your Facebook page and website.

Here we’ll build a simple PHP script to get photos from Facebook and display Facebook albums and photos on the website using Graph API. The best part of this functionality is that the photo gallery can be customized as per your needs. Also, when you upload an image to your facebook fan page, it will be shown automatically on your website.

Before you get started, a Facebook App need to be created to get App ID and App Secret. You can get an idea to create Facebook App from here.

Retrieve Photo Albums from Facebook using PHP

In the index.php file, we’ll retrieve photo albums from the Facebook page that are publicly available without any restrictions and display in the webpage.

At first, specify your Facebook App ID ($appId) and App Secret ($appSecret) to generate access token using Graph API. Now specify the Facebook page ID ($fb_page_id) from which want to get all albums data.

<?php
if(!session_id()){
    session_start();
}

/*
 * Get access token using Facebook Graph API
 */
if(isset($_SESSION['facebook_access_token'])){
    // Get access token from session
    $access_token = $_SESSION['facebook_access_token'];
}else{
    // Facebook app id & app secret 
    $appId = 'InsertAppID'; 
    $appSecret = 'InsertAppSecret';
    
    // Generate access token
    $graphActLink = "https://graph.facebook.com/oauth/access_token?client_id={$appId}&client_secret={$appSecret}&grant_type=client_credentials";
    
    // Retrieve access token
    $accessTokenJson = file_get_contents($graphActLink);
    $accessTokenObj = json_decode($accessTokenJson);
    $access_token = $accessTokenObj->access_token;
    
    // Store access token in session
    $_SESSION['facebook_access_token'] = $access_token;
}

// Get photo albums of Facebook page using Facebook Graph API
$fields = "id,name,description,link,cover_photo,count";
$fb_page_id = "Insert_Facebook_Page_ID";
$graphAlbLink = "https://graph.facebook.com/v2.9/{$fb_page_id}/albums?fields={$fields}&access_token={$access_token}";

$jsonData = file_get_contents($graphAlbLink);
$fbAlbumObj = json_decode($jsonData, true, 512, JSON_BIGINT_AS_STRING);

// Facebook albums content
$fbAlbumData = $fbAlbumObj['data'];
?>

Loop through the retrieved album’s content of the Facebook page and list all the albums with the cover photo, name, and description.

<?php
// Render all photo albums
foreach($fbAlbumData as $data){
    $id = isset($data['id'])?$data['id']:'';
    $name = isset($data['name'])?$data['name']:'';
    $description = isset($data['description'])?$data['description']:'';
    $link = isset($data['link'])?$data['link']:'';
    $cover_photo_id = isset($data['cover_photo']['id'])?$data['cover_photo']['id']:'';
    $count = isset($data['count'])?$data['count']:'';
    
    $pictureLink = "photos.php?album_id={$id}&album_name={$name}";
    
    echo "<div class='fb-album'>";
    echo "<a href='{$pictureLink}'>";
    echo "<img src='https://graph.facebook.com/v2.9/{$cover_photo_id}/picture?access_token={$access_token}' alt=''>";
    echo "</a>";
    echo "<h3>{$name}</h3>";

    $photoCount = ($count > 1)?$count. 'Photos':$count. 'Photo';
    
    echo "<p><span style='color:#888;'>{$photoCount} / <a href='{$link}' target='_blank'>View on Facebook</a></span></p>";
    echo "<p>{$description}</p>";
    echo "</div>";
}
?>

A link is associated with each album which redirects to the photos.php page for showing all the images of the respective album.

Retrieve Photos from Facebook Album using PHP

In the photos.php file, we’ll fetch all the photos from an album and display those Facebook photos as a gallery.

At first, retrieve album_id and album_name from the query string of the URL and access token from the session. Now fetch all the photos of a particular album using Facebook Graph API.

<?php
if(!session_id()){
    session_start();
}

// Get album id from url
$album_id = isset($_GET['album_id'])?$_GET['album_id']:header("Location: index.php");
$album_name = isset($_GET['album_name'])?$_GET['album_name']:header("Location: index.php");

// Get access token from session
$access_token = $_SESSION['facebook_access_token'];

// Get photos of Facebook page album using Facebook Graph API
$graphPhoLink = "https://graph.facebook.com/v2.9/{$album_id}/photos?fields=source,images,name&access_token={$access_token}";
$jsonData = file_get_contents($graphPhoLink);
$fbPhotoObj = json_decode($jsonData, true, 512, JSON_BIGINT_AS_STRING);

// Facebook photos content
$fbPhotoData = $fbPhotoObj['data'];
?>

Loop through the content of the retrieved photo of the Facebook page and list all the photos with the name.

<?php
// Render all photos
foreach($fbPhotoData as $data){
    $imageData = end($data['images']);
    $imgSource = isset($imageData['source'])?$imageData['source']:'';
    $name = isset($data['name'])?$data['name']:'';
    
    echo "<div class='fb-album'>";
    echo "<img src='{$imgSource}' alt=''>";
    echo "<h3>{$name}</h3>";
    echo "</div>";
}
?>