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.
001 <?php
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);
008 ?>
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Great tutorial Mark- this is something I never even knew was possible!
Thanks for sharing.
Hello. Nice script, but for me dont work. I have download the project for test, but I get following error:
Warning: file_get_contents(https://graph.facebook.com//photos) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 500 Internal Server Error in C:\wamp\www\TEST\Facebook Gallery\finished_template.php on line 29
Warning: Invalid argument supplied for foreach() in C:\wamp\www\TEST\Facebook Gallery\finished_template.php on line 47
line 29 -> $FBpage = file_get_contents(“https://graph.facebook.com/”.$_GET['album_id'].’/photos’);
line 47 -> foreach ( $photoData->data as $data )
Some steps from tutorial works Step_10 show pictures, Step_11 error above
I have try wamp and xamp server on localhost, same result.
Tryed on web server without error, but no pictures and no comments from facebook…. :-(
Any solution?
MY NAME IS UDAY.
Bonjour,
Marche pas pour moi non plus, impossible d’afficher les images d’un album.
J’ai bien vérifié ma config fb.
Ce tuto devrait être hyper basic puisque pour qu’il fonctionne il suffit de rentré son id facebook
sur seulement la ligne 20 et 33 du fichier template.php idem dans getphotos.php.
J’ai oublié quelque chose ?
Merci pour votre aide, j’aimerai tellement réussir ce tuto !
Jerome
Great tutorial, worked right away. Saved me hours of work! Just what I needed… :)
Great tut, thanks for this
Does this have a limit on number of pictures displayed per album? I have a client that uploaded 250 images to their facebook but only 25 are showing up. Yes I know that 250 is a tremendous amount of photos to have on one site but that’s what they want. Any thoughts?
Great tutorial. Thanks for sharing this.
ads
great post. This is really helpful. thanks!
Great tutorial.
Can you confirm or not that the comments box below the images links to the comments on Facebook?
So if I visitor comments on the images their comment also appears on their facebook wall and also on the comments box of the source of the photos on my Facebook page..
Thanks
James
Looks great, however im struggling with the Facebook Developer page, trying to sort out the feed.
Your guide indicates that you simply “edit page” and “manage permissions”. I get teh feeling FB may have changed the route to these settings as i cannot easily see them in my page setup (the business page is louisejameshealthandbeauty ). Im not stuck in an FB world of Access Tokens and SDK.
Any suggestions as to how to get FB to properly send News Feeds easily ?
Thanks
nice tutorial thanks for sharing :)
thaanks alot this is really helpful cause a friend asked me about something similar to this fb gallery I can help him indeed
Hi! Great tutorial!
Is there a way to display picture caption. Like when someone adds a picture together with a status update?
also, is there a way to exclude certain fb albums?
Cannot get this code to work. I also found a few reference errors with the code. Finally got it to work and when I uploaded it to my server, it stopped. Went in to check it again in Dreamweaver testing with MAMP and now it will not show any pictures. Has Facebook stopped this from working? Can you please help me?
Thank You,
You realize thus considerably when it comes to this topic, produced me in my view imagine it from a lot of numerous angles. Its like men and women are not interested unless it is one thing to do with Woman gaga! Your own stuffs outstanding. Always maintain it up!
What i do not realize is in truth how you are now not actually much more neatly-appreciated than you may be right now.
You are so intelligent. You know therefore significantly in terms of
this subject, made me in my view believe it from numerous numerous angles.
Its like men and women aren’t fascinated until it’s something to
accomplish with Woman gaga! Your own stuffs nice.
At all times maintain it up!
Having read this I thought it was rather enlightening.
I appreciate you taking the time and energy to put this article together.
I once again find myself personally spending a significant amount of time both
reading and leaving comments. But so what, it was still
worthwhile!
I am extremely impressed together with your writing skills and also with the format to your weblog. Is this a paid subject matter or did you customize it your self? Anyway stay up the excellent quality writing, it is uncommon to look a nice weblog like this one nowadays..