Blog

I’ll be using this blog to give a number of web design and development tutorials and tips. Today i’m going to explain how to pull your photos from Flickr onto your website, like on my homepage. If you already have a WordPress website you can use the Flickr Widget to do the hard work for you. If you don’t, or wish to customise how your Flickr photos are displayed, read on…

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;
}