Previously, we learned how to display Facebook page events on your website using PHP.
This tutorial will cover the steps to display Facebook page photo albums on your website using PHP. We’ll show you how to easily integrate your Facebook page’s photo albums into your website so your audience can view them without having to navigate away from your site.
By the end of this tutorial, you’ll have a seamless way to showcase your Facebook photo albums to your website visitors, keeping them engaged and up-to-date with your latest content.
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 an awesome image pop-up presentation. This extension is fully responsive and touch-enabled. Good for every mobile device!
Don’t want to code?
By the way, if you realize you do not want to code and need more features, you can use a website plugin called SociableKIT.
You can easily customize the look and feel of your Facebook page photo albums and embed them on your website within a few clicks. Following this tutorial: Embed Facebook page photo albums on website. There’s also an option to embed only one photo album on Facebook.
There’s a free plan that you can use if you don’t need the premium features of SociableKIT. But if you like coding, continue with our tutorial below!
Benefits
Use this code to enjoy the following benefits.
- You save server disk space because the photos don’t reside in your hosting provider.
- You got an instant photo manager which Facebook photos. It becomes awesome and new features are added frequently.
- You save bandwidth since the photos shown on your website are loaded from Facebook’s servers.
- Please add your comment if you know other advantages.
Get your page access token
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.
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>
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']);
?>
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>";
}
}
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";
?>
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>
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">×</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>
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']);
?>
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>";
}
Source code or SociableKIT?
You can choose whether to download our source code or use SociableKIT’s Facebook page photo albums widget.
| FEATURES | Code | SociableKIT |
|---|---|---|
| Manage photos on your Facebook page and website only once | ✔ | ✔ |
| Save time figuring out and coding these features on your website | ✔ | ✔ |
| Display a list of photo albums | ✔ | ✔ |
| Display album cover | ✔ | ✔ |
| Display album description | ✔ | ✔ |
| Display the number of photos inside an album | ✔ | ✔ |
| Link to an actual Facebook album page (opens in new tab) | ✔ | ✔ |
| Clicking a photo album will show a list of photos | ✔ | ✔ |
| Each photo is in a square thumbnail | ✔ | ✔ |
| Clicking a photo will pop a lightbox | ✔ | ✔ |
| Navigate photos using the lightbox’s Next and Prev buttons | ✔ | ✔ |
| Responsive photo albums page | ✔ | ✔ |
| Responsive photos page | ✔ | ✔ |
| Responsive lightbox pop-up window | ✔ | ✔ |
| Touch-enabled lightbox gallery (great for smartphone and tablet devices) | ✔ | ✔ |
| Bootstrap UI enabled | ✔ | ✔ |
| Can show more than 25 photo albums | ✔ | ✔ |
| Can show more than 25 photos inside an album | ✔ | ✔ |
| The photo album cover automatically cropped to a specific size | ✔ | ✔ |
| No need to make each photo album cover the same size | ✔ | ✔ |
| Font awesome icons | ✔ | ✔ |
| Share buttons on the photos page | ✔ | ✔ |
| No coding required | – | ✔ |
| Works with any website builders like WordPress, Squarespace, or Wix | – | ✔ |
| Customize colors, font, layout, texts, and more | – | ✔ |
| Priority chat and email support | – | ✔ |
| Lifetime support and system updates | – | ✔ |
| No need to worry about Facebook API updates | – | ✔ |
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?
[adinserter block=”3″]
Leave a Reply