How To Display Facebook PHOTOS on Website? Step By Step Guide!

display-facebook-photos-on-website-1

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 Prepare your 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 Social Media Scripts – LEVEL 3 – PRO PACK
17.0 DSM Facebook Photos Website Plugin
18.0 What’s Next?
19.0 Related Source Codes
20.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 following:

3.1 LEVEL 1 Source Code – Output Preview


3.2 LEVEL 2 Source Code – Output Preview


3.3 LEVEL 3 Source Code – Output Preview


The LEVEL 2 and LEVEL 3 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 LEVEL 1 source code. Enjoy!

4.0 Prepare your access token.

You have to create an app to get the app ID and secret keys. This link can give you an idea how to do it.

Then you use the following URL format to get your access token:

https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials

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']) ? $obj['data'][$x]['cover_photo'] : "";
	// use this for newer access tokens:
	// $cover_photo = isset($obj['data'][$x]['cover_photo']['id']) ? $obj['data'][$x]['cover_photo']['id'] : "";
	$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 are now included in our LEVEL 2 source code. The display of actual comments from users are now included in our LEVEL 3 source code. You may check our live demos in sections 3.1 to 3.3 above.

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 the LEVEL 1 Source Code

FEATURESLEVEL 1
Manage photos on your Facebook page and website only onceYes
Save time figuring out and coding these features on your websiteYes
Display list of photo albumsYes
Display album coverYes
Display album descriptionYes
Display number of photos inside an albumYes
Link to actual Facebook album page (opens in new tab)Yes
Clicking a photo album will show list of photosYes
Each photo are in a square thumbnailYes
Clicking a photo will pop a lightboxYes
Navigate photos using the lightbox’s Next and Prev buttonsYes
Responsive photo albums pageYes
Responsive photos pageYes
Responsive lightbox pop up windowYes
Touch-enabled lighbox gallery (great for smartphone and tablet devices)Yes
Bootstrap UI enabledYes
Free source code updates for 6 monthsYes
Fast and friendly email support for 6 monthsYes
LEVEL 1: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

15.2 Download the LEVEL 2 Source Code

FEATURESLEVEL 2
All features of the LEVEL 1 source codeYes
Can show more than 25 photo albumsYes
Can show more than 25 photosYes
Load more photo albums automatically when scrollingYes
Load more photos automatically when scrollingYes
Will say “All photo albums were loaded.” if no albums to be shown.Yes
Will say “All photos were loaded.” if no photos to be shown.Yes
Photo album cover automatically cropped to certain sizeYes
No need to make each photo album cover the same sizeYes
Font awesome iconsYes
Share buttons on photos pageYes
LEVEL 2: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

15.3 Download the LEVEL 3 Source Code

FEATURESLEVEL 3
All features of the LEVEL 2 source codeYES
Object-oriented programmingYES
Display comments of photo albumsYES
Load more comments of photo albumsYES
Display comments of photosYES
Load more comments of photosYES
Count number of comments of each personYES
Display image commentsYES
Useful variables you can change in /libs/php/dsm_facebook_photos.php
$fb_graph_api_version
to easily change Facebook Graph API version.
YES
$limit
to easily change default number of photo albums and photos shown
YES
$hidden_albums
to easily hide photo albums.
YES
$access_token
to easily change to your own access token
YES
How to display PHOTO ALBUMS using the LEVEL 3 source code?
1. Once you extracted the files,
copy the folder ‘display-facebook-photos-level-3’ in your root directory.
YES
2. Put the following code at the beginning of you PHP file.

include_once 
"display-facebook-photos-level-3/libs/php/dsm_facebook_photos.php";
$dsm_facebook_photos = new DsmFacebookPhotos();
YES
3. Put the following code inside head section.

echo $dsm_facebook_photos->printCSS_DsmPhotoAlbums();
YES
4. Put the following code where you want the feed to appear.

echo $dsm_facebook_photos->readContents_DsmFacebookPhotoAlbums();
YES
5. Put the following code before the closing body tag.

echo $dsm_facebook_photos->printJavaScript_DsmPhotoAlbums();
YES
How to display PHOTOS using the LEVEL 3 source code?
1. Once you extracted the files,
copy the folder ‘display-facebook-photos-level-3’ in your root directory.
YES
2. Put the following code at the beginning of you PHP file.

include_once 
"display-facebook-photos-level-3/libs/php/dsm_facebook_photos.php";
$dsm_facebook_photos = new DsmFacebookPhotos();
YES
3. Get parameter values. Put the following code next.

$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";
YES
4. Set parameter values as properties. Put the following code next.

$dsm_facebook_photos->album_id=$album_id;
$dsm_facebook_photos->fb_page_id=$fb_page_id;
YES
5. Get album details. Put the following code next.

$album_details=$dsm_facebook_photos->readAlbumDetails_Dsm();
YES
6. Set page title. Put the following code next.

$page_title = "{$album_details['name']}";
YES
7. Put page title inside title tags.

<?php echo $page_title; ?>
YES
8. Put the following before the closing head tag.

echo $dsm_facebook_photos->printCSS_DsmPhotos();
YES
9. Display photos inside album.
Put the following code anywhere in the body.

echo $dsm_facebook_photos->readContents_DsmFacebookPhotos();
YES
10. Put the following codes before the closing body tag.

echo $dsm_facebook_photos->printJavaScript_DsmPhotos();
YES
LEVEL 3: BUY TO DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

Do you need more reasons to download it?

MORE REASONS TO GET IT
Buy only once, use up to 10 websites and Facebook pages!Yes
No different kind of licenses.Yes
No many different pricing schemes.Yes
No monthly or any recurring fees.Yes
No need to rely on another website to render Facebook photo albums and photos.Yes
No need for codes from other websites.Yes
You can learn more how to code, I love teaching and can give you free tips!Yes
Familiarize yourself with the Facebook Graph API.Yes
Features are constantly improving, and you get it for free.Yes
Completely customizable.Yes

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 Social Media Scripts – LEVEL 3 – PRO PACK

17.0 DSM Facebook Photos Website Plugin

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. 

18.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?

19.0 Related Source Codes

Did you know that you can also display other social media data on your website? I’ve created tutorials on them too, see the following:

Social Media Script Tutorials
Display Facebook EVENTS on Website
Display Facebook PHOTOS on Website
Display Facebook VIDEOS on Website
Display Facebook TIMELINE on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

20.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

  • 1. Subscribe to social media scripts tutorial news and updates.
  • 2. Be updated about what works and what does not work on social media APIs.
  • 3. Be notified for any related social media API updates.
100% Privacy. We will never spam you!

#3 Thank You!

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