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

display-facebook-photos-on-website

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)!

A lot of people requested a WordPress plugin version of this code. Now it is available. We call it “DSM Facebook Photos PRO”. You can download it in section 7.4 below. Thank you!

We can make it run on websites in any type of platform – WordPress, Joomla, Wix, etc. There’s always a way!

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 Display Facebook Photos on Website – Output
4.0 Step by Step Programming (Steps 1-8)
5.0 How to Display Likes and Comments?
6.0 What People Say About This Code?
7.0 Download Source Code
8.0 What’s Next?
9.0 Related Source Codes
10.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:

Display Facebook Photos on Website - Demo Screenshot

More improvements were provided after the step by step tutorial. If you need more features, you might need the LEVEL 2 version. It has the following output:

See the full list of features in section 7.0 below. It has all the details of these features.

4.0 Step by Step Programming

Now here’s the fun part!

Step 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

Step 1: 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>

Step 2: 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 = "http://graph.facebook.com/v2.3/{$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']);
?>

Step 3: 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>";
	}
}

Step 4: 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";
?>

Step 5: 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>

Step 6: 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>

Step 7: 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']);
?>

Step 8: 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>";

}

5.0 How to Display Likes and Comments?

NOW on LEVEL 2 version below.

6.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

7.0 Download Source Code

7.1 Getting the 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.

7.1 Download the LEVEL 1 Source Code

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

7.2 Download the LEVEL 2 Source Code

FEATURES LEVEL 2
All features of the LEVEL 1 source code Yes
Can show more than 25 photo albums Yes
Can show more than 25 photos Yes
Load more photo albums automatically when scrolling Yes
Load more photos automatically when scrolling Yes
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 size Yes
No need to make each photo album cover the same size Yes
Font awesome icons Yes
Share buttons on photos page Yes
LEVEL 2: BUY AND 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 on unlimited number of 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

7.3 Download Our Social Media Scripts LEVEL 2 Pack!

This pack contains all the 7 social media scripts (LEVEL 2) we have. If you will buy them all one by one, it will cost you $210. But, if you will download this pack, it will be $119 only. You just saved $90!

Social Media Scripts - LEVEL 2 PRO PACK
ITEM VIEW LEVEL 2 PRO PACK
Display Facebook EVENTS on Website YES
Display Facebook PHOTOS on Website YES
Display Facebook VIDEOS on Website YES
Display Facebook TIMELINE on Website YES
Display Instagram FEED On Your Website YES
Display Twitter FEED on Website YES
Display Google+ FEED on Website YES
BUY PRO PACK NOW USING
* You can use your debit or credit card with PayPal.

7.4 Download the DSM Facebook Photos WordPress Plugin

You demanded it, we built it. Our WordPress plugin has all the features of our pro source code above.

Our WordPress plugin is super easy to install and use. To learn more, please go to the DSM Facebook Photos official plugin page.

Click the green button below.

7.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 [email protected], or via our official Facebook page!

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

7.6 Want To Donate More?

For those people who ask how to donate more for my works here at codeofaninja.com, send it to my PayPal ID: [email protected], thanks a lot!!!

Thank you so much for supporting our site!

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

9.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

10.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 [email protected], 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 Need Web Hosting?

Do you need a web host for your PHP projects? This will enable your project to be accessible online.

I can provide one for you for a very affordable price of $3 per month. I will give you access to FTP, PhpMyAdmin and other things you need for development.

Send me a message on our official Facebook page, or via my email [email protected], we will set up your server and URL!

#3 Need A Coder?

If you don’t like coding but wanna make it work on your website, even with any customization, don’t worry, I'll help you with the best I can!

Just contact me by sending a message on our official Facebook page, or via my email [email protected], I’m more than willing to help you!

#4 Web Resources

If you need Bootstrap website themes, Bootstrap dashboard theme, my highly recommended books and other very useful resource for developers, please visit this page.

#5 Thank You!

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