Add a Facebook image gallery to your site
Deliver a dynamic photo gallery with this social network-powered solution
tools | tech | trends: Dreamweaver, PHP, Lightbox
expert: Pete Simmons
(This article originally appeared in Web Designer issue 183, authored by Pete Simmons (aka ‘Terrorfall’). You can download the associated CD project files by clicking here)
Following on from the Facebook news feed tutorial found in issue 181, we’ll be showing you how to use Facebook to drive a dynamic photo gallery. The gallery will update as you add photos through Facebook, and will display image comments.
If you missed the previous tutorial, we’ll start from the beginning, showing you how to get your Facebook ID and get the page set up correctly. As before, you won’t need to authenticate a website visitor, as all data retrieved is publicly accessible. However, it is worth noting that you may need to authenticate if you are pulling data from a personal page, rather than a fan page.
This tutorial assumes that you have a PHP environment set up that is capable of reading JSON objects. JSON functionality comes pre-packaged with PHP version 5.2.0 and higher, but if you find that you are getting “Fatal error: Call to undefined function json_decode()”, see the following forum post: http://bit.ly/noJSON. It may also be worth switching hosting provider, or downloading and installing the latest version of XAMPP from http://bit.ly/getXAMPP.
This tutorial will not cover adding CSS or any images, but the project contain a basic template.
01 Facebook page setup
It is important to ensure your Facebook page is set up correctly, so that your website can view the data. Go to your page on Facebook, select Edit Page and ensure that there are no age or country restrictions listed under the Manage Permissions tab. Also, ensure the ‘Only admins can see this Page’ box is unchecked.
02 Your page ID
If you’ve set up a brand new Facebook page, you won’t be able to shorten the URL yet and you will need to use the ID of your page. The easiest way to get hold of this is to click on your page’s profile picture and make a note of the numbers listed after “&id=” in your address bar.
03 View page data
Go to https://graph.facebook.com/terrorfall/albums and you’ll see a JSON-encoded list of all photo albums on the terrorfall Facebook page. These are arranged from newest to oldest by default and show links to individual albums, as well as album comments. Replace “terrorfall” with your own page name or page ID to see your own.
04 Page character setup
Open the template file or create a new PHP document in Dreamweaver. This is required to prevent character errors as we progress through the tutorial. By default Dreamweaver will add this in, but ensure you have the following line of code in the head section of your PHP page.
001 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”/>
05 Import Facebook data
Drop down to the body section of your PHP document and open up a new section of PHP code.
The following lines of code set out the page that you want to get the data from. Add this in, along with some tidy comments, replacing ‘terrorfall’ with your page name or ID.
002 //Set the page name or ID
003 $FBid = ‘terrorfall’;
004 //Get the contents of a Facebook page
005 $FBpage = file_get_contents(‘https://graph.facebook.com/’.$FBid.’/albums’);
006 //Interpret data with JSON
007 $photoData= json_decode($FBpage);