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

ENABLE YOUR WEB APPLICATION FOR OPEN ID TO LET YOUR USERS LOG IN WITHOUT HAVING TO REMEMBER YET ANOTHER PASSWORD

Think about the number of username and password combinations you have to remember on a daily basis – bank logins, social networking sites, Flickr, Twitter, Basecamp and so on. The more security-conscious of us will accept that using the same username and password isn’t a great idea, as if you use that combination on an untrusted site, they could use it to log in as you into everywhere else. We would rather be storing more useful things than passwords in our brains, so we’re very happy that Open ID is becoming a popular way for websites to authenticate users. So what is an Open ID? You can get an Open ID by various methods; the simplest is to choose a trusted Open ID provider and sign up with them. You might also find that one of the sites you already sign into is an Open ID provider – AOL, LiveJournal and most recently Yahoo! can all act as your Open ID. You will then be given a username, something like http://yourname.myOpen ID.com. When you log in on an Open ID-enabled site, you simply enter this URL into their login box. The site will then redirect out to your Open ID provider where you will log in and the provider then checks that you are happy to give the other site your details. You will then be sent back to the website and are logged in. The benefits to users are that they don’t need to remember lots of different sets of login details, and can also keep the actual password details on one trusted site. For the site owner, you don’t need to store password details on your site and deal with forgotten passwords and so on. If you have built a password login system for a site before, then enabling Open ID just means a small shift in thinking – for storing a username and password on your site and writing a script to check them, to firing out a request to an external site and getting information back as to whether your user is logged in or not. You can still tie any information specific to your site to a user, by linking that information to their Open ID in your database. So now you know what Open ID is, this tutorial will have a look at how you might enable your site for Open ID logins. We’ll be using PHP and MySQL, although the principles are the same whichever language you choose.

1. Get your Open ID

The first step is to have an Open ID to use to test your sign-on. If you already have an Open ID or are signed up for a site that gives you one, then you are all set. Otherwise, sign up at a provider such as www.myopenid.com and get your own Open ID URL.

2. Download the PHP class

We will use a PHP class in order to simplify the process of communicating with the Open ID provider. The class we are going to use is the Simple Open ID Class that is available from www.phpclasses.org/browse/package/3290.html. The version of the class we have used is available in the code sample, however, if you are going to use this in a live application, check the site for any updates to it. In the zip that you have downloaded, the file you will need is class.openid.v2.php. Save this into your site, naming it anything you like.

3. Create a form

In a new PHP file, add a form; all we need is a field for the user to enter their Open ID URL and a Submit button. Set the form to post back to itself for this example. We’ve also added a link to myopenid.com so the user can go and get an Open ID if they don’t have one yet.

<form action=”index.php” method=”post”>
<h1>Login with your openID</h1>
<div>
<div><label for=”openid”>Your OpenID</label><input
ype=”text” name=”openid_url” id=”openid” class=”text” />
<input type=”submit” name=”login” value=”Login” class=”btn”
/></div>
<p><a href=”http://www.myopenid.com/”>Get an OpenID</a></p>
</div>
</form>

4. Posting the form

We now need to deal with what happens when the user posts the form containing their Open ID. At the very top of this script inside PHP tags, include the class we downloaded earlier and create a new instance of that class.

require(‘class.openid.v2.php’);
if ($_POST) {
$openid = new OpenIDService();

5. Set up the request

In addition to checking whether the user is valid, we can ask the Open ID server to send us back some information about the user, such as their email address, full name and gender. The user needs to have already entered this information into their profile and agree to send it to you when they get to the Open ID site. The following lines of code set the user’s identity (this is the URL they entered into the text box), the site that is asking to be authorised, some required fields that we need and some optional fields.

$openid->SetIdentity($_POST[‘Open ID_url’]);
$openid->SetTrustRoot(‘http://’ . $_SERVER[“HTTP_HOST”]);
$openid->SetRequiredFields(array(‘email’,’fullname’));
$openid->SetOptionalFields(array(‘dob’,’gender’,’country’));