In this "Web 2.0" world we live in more and more sites are popping up which somehow combine two different sites together to create a new site or idea. For example, Google maps has an API which allows you to use their basic maps to overlay your own information into it. Like if you owned a shop and you wanted to give customers a map showing them where all your stores were then you could use Google maps as the base and then add your own logo to each location of a shop.
So in short, an API is something a site has setup to allow you to use their services elsewhere and possibly manipulate that data in a way they do not to suit your own needs.
In this tutorial I want to look at how to use the Flickr API to import your Flickr photos into a gallery on your own website.
This allows you to have a Flickr account and use them for hosting, editing, uploading etc, and at the same time includes the photos on your site without it being obvious you actually use Flickr.
For this tutorial I will assume that you already have a working copy PHP running (at least version 4) with PEAR on your site and a Flickr account with some images in it already. In this tutorial I will be using my own account and API.
You will also need some form of database module running (prefereably MySQL) if you wish to take this tutorial further and include caching, although personally I recomend against this as that puts more load on your site
The next thing you require is an API key. This is a set of codes that you have to apply for on Flickr which state what you want to do with the information you are getting from their site and also autheiticate your requests on their server
Applying for an API is very simple, to do so click here and follow the instructions
In this tutorial we are going to use the PHPFlickr library which is officially recomended by Flickr. To get that you can download it by clicking here
Unzip the file you download and open up the folder
Upload the PEAR folder and phpFlickr.php to a folder on your site called "phpflickr"
You then need to include that file in your code. Using an include statement like this (remember to change this to work for your site):
require_once("/home/craigk/public_html/code/flickr_gallery/code/phpFlickr/phpFlickr.php");
And then to start a new instance of a flickr connection and get a few of the details we need to get your photos we use the following:
$f = new phpFlickr("<Your API Key>");
$person = $f->people_findByUsername("<Your username>");
Click here to see how that looks
Now that we are connected to Flickr we can make API calls from it. However, before we start getting photos we need the base url of the image so we can show them. To do this we use run the following:
$photos_url = $f->urls_getUserPhotos($person['id']);
Flickr has built in pagination into the calls you can make, so what we want to do is work out how manay photos we want back and what page we want. The page will be set in the URL like so: /?page=1.
$photos_url = $f->urls_getUserPhotos($person['id']);
$photos_per_page = 16;
if($_GET['page'])
{
$page = $_GET['page'];
}else{
$page = 1;
}
Click here to see how the code looks now
This next bit of code makes a call to Flickr with the variables we have specified and then takes the results and loops them out with the image titles. Here I have made the image link to its page on Flickr, but you could just as easily make it link to another file on your server which could then make another call to the API and get the full size image along with comments etc.
$photos = $f->people_getPublicPhotos($person['id'], NULL, $photos_per_page, $page);
foreach ((array)$photos['photo'] as $photo)
{
//Now for an item.
$photo_html .= '<div class="left"><a href="' . $photos_url . $photo[id] . '"><img border="0" alt="' . $photo[title] . '" src="
' . $f->buildPhotoURL($photo, "square") . '" /></a><br /><p>' . $photo[title] . '</p></div>';
}
?>
Click here to see how the code looks now
The final part of the logical code is that to make the links for the different pages. Here we are taking the number of pages Flickr can return for the photo set specified and looping that number of times creating links as we go. The IF test is just to make sure the page we are is not linked as we are already on it.
for($i=1;$i<$photos['pages']+1;$i++)
{
if($page!=$i)
{
$pages_html .= '<a href="?page=' . $i . '">' . $i . '</a> ';
}else{
$pages_html .= $i . ' ';
}
}
Click here to see how the code looks now
OK, thats all the code in place, now all we need to do is add the HTML for the page and the CSS we need to make it show nicely. Clearly at this point anything will work, although you are welcome to use this code. If you want to see the CSS used then just click here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flickr gallery of <?php echo $user; ?></title>
<link href="gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<h1>My Flickr gallery</h1>
<?php echo $photo_html; ?>
<p class="clear">Pages: <?php echo $pages_html; ?></p>
</div>
</body>
</html>
Click here to see how all the whole code looks now it's done. And to see it working just click here
The Flickr API is very large and very powerfull. It gives you access to almost every feature they have so there is a vast scope for adding more features to your gallery. For example, with the following code you could get a large version of a single photo
$photo = $f->people_getPublicPhotos($person['id'], NULL, 1, 1);
$photo = $photos[0];
$f->buildPhotoURL($photo, "large");
?>
There are also functions to bring back a photos comments, tags, EXIF data (things like camera details from the photo like shutterspeed and camera type. You can even pull back just photos from a set on Flick and then bring back your list of sets on your gallery, so make an almost complete copy of Flickr but with the opertunity to change the style and information to only that which you want.
If you feel this has got you interested but want to know more then I suggest the following as the places to go to get more