Flickr API integration on my (now old) website

We will be using the phpFlickr class which you can download from here. Once uploaded to your web server, you will need find three variables:

1. Your Flickr username – this is usually pretty obvious (mine is “joesmalley” – I know this as the URL to my photos is http://www.flickr.com/photos/joesmalley/).
2. Your Flickr API key – you can get yours from http://www.flickr.com/services/api/key.gne.
3. Your Flickr ‘secret’ – you will be given this when you receive your API key.

Once you have those three things, you just need some of my PHP wizardry to make it all work:

<?php

// Settings
$flickrUsername = "";
$flickrApiKey = "";
$flickrSecret = "";
$photosPerRow = 5;
$totalPhotos = 10;

include_once("phpFlickr-2.3.0.1/phpFlickr.php");

if(class_exists('phpFlickr')){

 $f = new phpFlickr($flickrApiKey, $flickrSecret, false );

 if (!empty($f)) {
 $person = $f->people_findByUsername($flickrUsername);
 $photos_url = $f->urls_getUserPhotos($person['id']);
 $photos = $f->people_getPublicPhotos($person['id'], NULL, 1,$totalPhotos);

 // Get the date
 $lastphoto = $f->photos_getInfo($photos['photos']['photo'][0]['id']);
 echo "<p class=\"flickr-last-updated\">Last updated: ". date("l M j, Y", $lastphoto['dateuploaded']) ."</p>
 <ul id='flickr'>";    

 // Get the photos
 $i = 1;
 foreach ($photos['photos']['photo'] as $photo) {

 echo "<li";
 if ($i % $photosPerRow == 0) {
 echo " class=\"last\"";
 }
 echo "><a href=\"" . $photos_url . $photo['id'] . "\" target=\"_blank\">";
 echo "<img width=\"50\" height=\"50\" src=\"http://farm".$photo['farm'].".static.flickr.com/".$photo['server']."/".$photo['id']."_".$photo['secret']."_s.jpg\" alt=\"\"/></a></li>\n";

 $i++;

 }
 }
 echo "</ul>";

} else {
 echo "Error: phpFlickr has not been imported";
}

?>

And some CSS to get it looking nice:

br.clear {
	clear: both;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
}

p.flickr-last-updated{
	color: #999999;
	font-size: 11px;
	margin-bottom: 6px;
}

ul#flickr li{
	display: block;
	float: left;
	margin: 0 4px 4px 0;
	width: 50px;
	height: 50px;
}

ul#flickr li.last{
	margin-right: 0;
}