Home / Facebook /

Display Facebook PHOTOS on Website using PHP and Graph API

Display Facebook Photos On WordPress or Any 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 if 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)! We can make it run on websites in any type of plaform – 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 Final Output Demo
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?
6.1 From Blog Comments
6.2 From Emails
6.3 From Facebook Messages
7.0 Download Source Code
8.0 Related Source Codes
9.0 You Don’t Like Coding? I’m Your Man!

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 Final Output Demo

It is important to know where we are going. You can view output of our step by step tutorial here:

More improvements were provided after the step by step tutorial. If you need more features, refer to the PRO version on section 7.1 below, or see the pro live demo first:

4.0 Step by Step Programming

Now here’s the fun part!

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>";

$fb_page_id = "221167777906963";

$json_link = "http://graph.facebook.com/{$fb_page_id}/albums?fields=id,name,description,link,cover_photo,count";
$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 use can view the photos inside the album.

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

	$id = $obj['data'][$x]['id'];
	$name = $obj['data'][$x]['name'];
	$description = $obj['data'][$x]['description'];
	$link = $obj['data'][$x]['link'];
	$cover_photo = $obj['data'][$x]['cover_photo'];
	$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/{$cover_photo}/picture' 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 the 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]-->

</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>";

$json_link = "http://graph.facebook.com/{$album_id}/photos?fields=source";
$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 = $obj['data'][$x]['source'];

	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?

Coming soon on PRO 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!

6.1 From Blog Comments

jdogfantastic said:
comment testimonial #1

Handy said:
comment testimonial #2

Konstantinos said:
comment testimonial #3

Paul said:
comment testimonial #4

Doe said:
comment testimonial #5

6.2 From Emails

Will said:
display fb photos testimonial #1

Clinton said:
display fb photos testimonial #2

6.3 From Facebook Messages

Horatio said:
display fb photos testimonial in fb message #1

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.

FEATURES BASIC PRO
Manage photos on your Facebook page and website only once Yes Yes
Save time figuring out and coding these features on your website Yes Yes
Display list of photo albums Yes Yes
Display album cover Yes Yes
Display album description Yes Yes
Display number of photos inside an album Yes Yes
Link to actual Facebook album page (opens in new tab) Yes Yes
Clicking a photo album will show list of photos Yes Yes
Each photo are in a square thumbnail Yes Yes
Clicking a photo will pop a lightbox Yes Yes
Navigate photos using the lightbox’s Next and Prev buttons Yes Yes
Responsive photo albums page Yes Yes
Responsive photos page Yes Yes
Responsive lightbox pop up window Yes Yes
Touch-enabled lighbox gallery (great for smartphone and tablet devices) Yes Yes
Bootstrap UI enabled Yes Yes
Can show more than 25 photo albums No Yes
Can show more than 25 photos No Yes
Load more photo albums automatically when scrolling No Yes
Load more photos automatically when scrolling No Yes
Will say “All photo albums were loaded.” if no albums to be shown. No Yes
Will say “All photos were loaded.” if no photos to be shown. No Yes
Photo album cover automatically cropped to certain size No Yes
No need to make each photo album cover the same size No Yes
Free source code updates Yes Yes
Free email support Yes Yes
MORE REASONS TO GET IT
Buy only once, use on unlimited number of websites and Facebook pages! Yes Yes
No different kind of licenses. Yes Yes
No many different pricing schemes. Yes Yes
No monthly or any recurring fees. Yes Yes
No need to rely on another website to render Facebook photo albums and photos. Yes Yes
No need for codes from other websites. Yes Yes
You can learn more how to code, I love teaching and can give you free tips! Yes Yes
Familiarize yourself with the Facebook Graph API. Yes Yes
Features are constantly improving, and you get it for free. Yes Yes
Completely customizable. Yes Yes
BASIC: BUY AND DOWNLOAD NOW USING
OR
PRO: BUY AND DOWNLOAD NOW USING
OR

Thank you for supporting our projects here at codeofaninja.com!

7.2 Do You Want a Demo?

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

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

7.3 How To Use It with WordPress?

If you’re using it in a widget, you can just put the source code in a wp-fb folder, and use iframe to load it in your page.

You can also play around with your page.php, more details coming soon.

7.4 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: ninjazhai30@gmail.com, thanks a lot!!!

Thanks for your support, it keeps this website alive!

8.0 Related Source Codes

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

8.1 Display Facebook EVENTS on Website

8.2 Display Facebook FEED on Website

8.3 Display Facebook VIDEOS on Website

8.4 Display Instagram FEED On Your Website

9.0 You Don’t Like Coding? I’m Your Man!

If you don’t like coding but wanna make it work on your website, even with any customization, don’t worry, I’m always here to help you!

Just contact me by sending a message on our official Facebook page, or via my email ninjazhai30@gmail.com, I’m more than willing to help you!

Thanks for visiting our tutorial on how to display Facebook PHOTOS on website using PHP and Facebook Graph API!

Important note:

If you have any other issue with this code, I usually reply faster via Email or FB message, please send me a message via email ninjazhai30@gmail.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide your test URL and FB page URL. Thanks!

Loading comments...