How To Display Facebook Page Photo Albums on Website Using PHP?

Before we start coding, you might be someone NOT interested in coding. If that's the case, you should use a website plugin like SociableKIT. Watch the following video.

Need to embed a single Facebook page photo album on your website? Watch this tutorial.

What's next? You can try SociableKIT now, view a live demo here and here or continue with the code tutorial below.

Let's code!

Do you have a photo manager on your website? Do you upload photos on your Facebook page as well?

If your answer is both YES, you're wasting a lot of time managing your brand's photos online.

What if there's a way to upload your photo albums ONCE, and then let it appear both on your Website and Facebook page?

Will you be happy saving your precious time?

Our code for today will make you happy then, just like we are!

Today we're gonna display Facebook Page photos on your website (publicly available photos, without any kind of restrictions)!

Our source code is useful if you want your Facebook pictures to be shown in your website in a synchronized way.

Once you uploaded an image in your fan page, it will be seen automatically in your website too.

This post will cover the following content:

1.0 Source Code Overview
2.0 Advantages and Risks
3.0 Source Code Output
4.0 Get your page access token
5.0 Create index.php with Basic HTML Code
6.0 Build and Decode Photo Albums JSON link
7.0 Retrieve Photo Albums
8.0 Create photos.php with GET request
9.0 Basic HTML Code for photos.php
10.0 Enable Image Gallery Lightbox
11.0 Build and Decode Photos JSON link
12.0 Retrieve Photos
13.0 How to Display Likes and Comments?
14.0 What People Say About This Code?
15.0 Download Source Code
16.0 SociableKIT
17.0 What's Next?
18.0 Related Source Codes
19.0 Some Notes

Let's get started!

1.0 Source Code Overview

Today we’re going to do a code that:

1. Gets photo albums and photos of a Facebook fan page (using Facebook Graph API).

2. Display these photos to a webpage (assuming it is your website) beautifully with Bootstrap. It is also responsive so it's one advantage for mobile devices. If you're not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.

3. Use Bootstrap Image Gallery extension to make awesome image pop up presentation. This extension is fully responsive and touch enabled. Good for every mobile device!

2.0 Advantages and Risks

This technique has the following advantages and risks.

2.1 Advantages

1. You save server disk space because the photos don't reside in your hosting provider.
2. You got instant photo manager which Facebook photos. It become's awesome and new features are added frequently.
3. You save bandwidth since the photos shown in your website are loaded from Facebook’s repository.
4. Please add your comment if you know other advantages.

2.2 Risks

1. When Facebook is down, your website with this feature will be down as well. But I almost never encounter Facebook was down.
2. Facebook is not responsible if you lost your data or any disruptions on it Read section 16.3 of their legal terms.
3. Please add your comment if you know other disadvantages or risks.

3.0 Display Facebook Photos on Website - Output

It is important to know where we are going. The output of our step by step code tutorial will look like the the BASIC source code. See output preview below.

3.1 BASIC Source Code - Output Preview

3.2 PRO Source Code - Output Preview

The PRO source code outputs proves that you can add and customize more features. It’s easier and faster if you will learn by following our tutorial below.

Downloading our source codes is your huge advantage as well. For now, let’s proceed to the step by step tutorial of our BASIC source code. Enjoy!

4.0 Get your page access token

Before you can get any data from your Facebook page via the graph API, you need a "page" access token.

Follow this detailed tutorial about how to get a page access token: How to get a Facebook page access token?

Replace YOUR_ACCESS_TOKEN with your page access token.

5.0 Create index.php with Basic HTML Code

Create index.php and with the following basic HTML code.

<?php
$page_title = "Photo Albums";
?>
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php echo $page_title; ?></title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<style>
	.col-md-4{
		margin: 0 0 2em 0;
	}
	</style>
</head>
<body>

<div class="container">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</body>
</html>

6.0 Build and Decode Photo Albums JSON link

Inside the DIV with a "container" class, put the page title, specify the Facebook page ID and decode the JSON string from a graph API URL.

<?php

echo "<div class='col-lg-12'>";
	echo "<h1 class='page-header'>{$page_title}</h1>";
echo "</div>";

$access_token="YOUR_ACCESS_TOKEN";

$fields="id,name,description,link,cover_photo,count";
$fb_page_id = "221167777906963";

$json_link = "https://graph.facebook.com/v2.8/{$fb_page_id}/albums?fields={$fields}&access_token={$access_token}";
$json = file_get_contents($json_link);

$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

$album_count = count($obj['data']);
?>

7.0 Retrieve Photo Albums

Loop through the retrieved content. Put the following code under $album_count variable on step 2 above. It links to another PHP file called photos.php where the user can view the photos inside the album.

for($x=0; $x<$album_count; $x++){

	$id = isset($obj['data'][$x]['id']) ? $obj['data'][$x]['id'] : "";
	$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";
	$url_name=urlencode($name);
	$description = isset($obj['data'][$x]['description']) ? $obj['data'][$x]['description'] : "";
	$link = isset($obj['data'][$x]['link']) ? $obj['data'][$x]['link'] : "";

	$cover_photo = isset($obj['data'][$x]['cover_photo']['id']) ? $obj['data'][$x]['cover_photo']['id'] : "";

	// use this for older access tokens:
	// $cover_photo = isset($obj['data'][$x]['cover_photo']) ? $obj['data'][$x]['cover_photo'] : "";
	
	$count = isset($obj['data'][$x]['count']) ? $obj['data'][$x]['count'] : "";

	// if you want to exclude an album, just add the name on the if statement
	if(
		$name!="Profile Pictures" &&
		$name!="Cover Photos" &&
		$name!="Timeline Photos"
	){

		$show_pictures_link = "photos.php?album_id={$id}&album_name={$name}";

		echo "<div class='col-md-4'>";
			echo "<a href='{$show_pictures_link}'>";
				echo "<img class='img-responsive' src='https://graph.facebook.com/v2.3/{$cover_photo}/picture?access_token={$access_token}' alt=''>";
			echo "</a>";
			echo "<h3>";
				echo "<a href='{$show_pictures_link}'>{$name}</a>";
			echo "</h3>";

			$count_text="Photo";
			if($count>1){ $count_text="Photos"; }

			echo "<p>";
				echo "<div style='color:#888;'>{$count} {$count_text} / <a href='{$link}' target='_blank'>View on Facebook</a></div>";
				echo $description;
			echo "</p>";
		echo "</div>";
	}
}

8.0 Create photos.php with GET request

Create photos.php with the following PHP code the retrieves value from a GET request. We'll get the album ID and Name that can be used to the page title.

<?php
$album_id = isset($_GET['album_id']) ? $_GET['album_id'] : die('Album ID not specified.');
$album_name = isset($_GET['album_name']) ? $_GET['album_name'] : die('Album name not specified.');

$page_title = "{$album_name} Photos";
?>

9.0 Basic HTML Code for photos.php

Under the code on step 4 above, put the following basic HTML code.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php echo $page_title; ?></title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>
<body>

<div class="container">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</body>
</html>

10.0 Enable Image Gallery Lightbox

We'll include the Blueimp gallery extension so we can view our photos beautifully. Our basic HTML code will look like the following code.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php echo $page_title; ?></title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

	<!-- blue imp gallery -->
	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
	<link rel="stylesheet" href="Bootstrap-Image-Gallery-3.1.1/css/bootstrap-image-gallery.min.css">

	<style>
	.photo-thumb{
		width:214px;
		height:214px;
		float:left;
		border: thin solid #d1d1d1;
		margin:0 1em 1em 0;
	}

	div#blueimp-gallery div.modal {
		overflow: visible;
	}
	</style>
</head>
<body>

<div class="container">

</div>

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="Bootstrap-Image-Gallery-3.1.1/js/bootstrap-image-gallery.min.js"></script>

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- to make photos full view -->
<script>
$('#blueimp-gallery').data('useBootstrapModal', false);
$('#blueimp-gallery').toggleClass('blueimp-gallery-controls', true);
</script>

</body>
</html>

11.0 Build and Decode Photos JSON link

Inside the DIV tag with a "container" class, put the page title HTML, specify the JSON url and decode the JSON string.

<?php
echo "<h1 class='page-header'>";
	echo "<a href='index.php'>Albums</a> / {$page_title}";
echo "</h1>";

$access_token="your access token";
$json_link = "https://graph.facebook.com/v2.3/{$album_id}/photos?fields=source,images,name&access_token={$access_token}";
$json = file_get_contents($json_link);

$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

$photo_count = count($obj['data']);
?>

12.0 Retrieve Photos

After the $photo_count variable on the code above, loop through the values using the code below:

for($x=0; $x<$photo_count; $x++){

	// $source = isset($obj['data'][$x]['source']) ? $obj['data'][$x]['source'] : "";
	$source = isset($obj['data'][$x]['images'][0]['source']) ? $obj['data'][$x]['images'][0]['source'] : ""; //hd image
	$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";

	echo "<a href='{$source}' data-gallery>";
		echo "<div class='photo-thumb' style='background: url({$source}) 50% 50% no-repeat;'>";

		echo "</div>";
	echo "</a>";

}

13.0 How to Display Likes and Comments?

The feature of displaying number of likes and comments and actual comments are now included in our PRO source code. Checkout the live demo of our PRO source code above in section 3.2

14.0 What People Say About This Code?

I’m so glad that other people are delighted by this code, here are some of them!

★★★★★ "The code works beautifully. I had no problems... Great code. DONATE TO THIS SITE!" ~ jdogfantastic

★★★★★ "Ninja Mike, this wonderful tutorial has allowed me to do something totally over my head. Thank you!" ~ Handy

★★★★★ "Hey this is a great and useful script! I've managed to change some stuff around as I wanted to show photos from a specific album..." ~ Konstantinos

★★★★★ "Hi Mike, this is really... really... great work dude. You really helped me out today. I added my own twist of incorporating it into AJAX as well. I will post my version of the code." ~ Paul

★★★★★ "THANK YOU SO MUCH! I've been searching and struggling to create a new way for my web customers to organize their own photos on their websites, and this is perfect!!!" ~ Little Doe

★★★★★ "Hi, I"m doing a website for an NGO that helps cancer patients and I've used part of your script to display Facebook photos. Great work, btw." ~ Will

★★★★★ "Hi Mr. Dalisay, My name is Clinton and I'm a front-end designer. I purchased two scripts from you today. Thank you for your time and what a great tutorial and was happy to support your projects." ~ Clinton

★★★★★ "Thanks for the excellent support..." ~ Horatio

15.0 Download Source Code

You can get the source code by following the whole, step by step tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the value and skill upgrade it can bring you, or income you can get from your website project or business.

For a limited time only, I will give you the source code for a low price. Download the source code by clicking the green buy button below.

15.1 Download BASIC Source Code

15.2 Download PRO Source Code

include_once 
"display-facebook-photos-pro/libs/php/dsm_facebook_photos.php";
$dsm_facebook_photos = new DsmFacebookPhotos();

echo $dsm_facebook_photos->printCSS_DsmPhotoAlbums();

echo $dsm_facebook_photos->readPhotoAlbums_Dsm();

echo $dsm_facebook_photos->printJavaScript_DsmPhotoAlbums();

include_once 
"display-facebook-photos-pro/libs/php/dsm_facebook_photos.php";
$dsm_facebook_photos = new DsmFacebookPhotos();

$album_id = isset($_GET['album_id']) ? $_GET['album_id'] 
            : die('Album ID not specified.');
$fb_page_id = isset($_GET['fb_page_id']) ? $_GET['fb_page_id'] 
            : "221167777906963";

$dsm_facebook_photos->album_id=$album_id;
$dsm_facebook_photos->fb_page_id=$fb_page_id;

$album_details=$dsm_facebook_photos->readAlbumDetails_Dsm();

$page_title = "{$album_details['name']}";

<?php echo $page_title; ?>

echo $dsm_facebook_photos->printCSS_DsmPhotos();

echo $dsm_facebook_photos->readContents_DsmFacebookPhotos();

echo $dsm_facebook_photos->printJavaScript_DsmPhotos();

Do you need more reasons to download it?

15.5 Do You Want a Demo?

If you want a demo (Facebook photos) to see if this will work with your own Facebook page, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please provide your Facebook page URL on the message, thanks!

16.0 SociableKIT

You demanded it, we built it. A lot of people requested a website plugin version of this Facebook gallery code. Now it is available. It works no matter what website platform you use. We have tried it in WordPress, Squarespace, Wix and more.

Do you use a Content Management System or CMS like WordPress, Squarespace, Weebly or Wix?

Your Problem: You need to display your Facebook page's photo album on your website. But YOU DON'T LIKE TO CODE.

Solution For You: Use SociableKIT. Why?

1. Remove your worries about coding and API updates that can break your site.

2. Fully customize the look and feel of your Facebook photo album instantly.

3. Show photos from your Facebook page album to your website automatically and in real-time.

CLICK HERE TO LEARN MORE.

17.0 What's Next?

Today we have learned how to show your Facebook photo albums and photos on your website.

Did you know that you can also display Facebook videos on your website?

Let us go to the next tutorial: How To Display Facebook VIDEOS on Website?

18.0 Related Source Codes

19.0 Some Notes

Thank you for reading our tutorial on how to display Facebook photos on website using PHP!