Most photosharing websites like Flickr, PhotoBucket, or Picassa offer xml “feeds”. With PHP 5’s SimpleXML and Flickr’s XML Photostream is is easy to pipe a photo gallery onto your website.
For example, The Willamette Valley Dog & Cat Motel takes pictures of all their “guests” at play, and they wanted a way to show all the latest photos from their Flickr gallery on their home page. We
This tutorial assumes you have a basic understanding of PHP and XML, and a photo sharing account. Here, we are using Flickr, but most other photo sharing sites can be parsed with the same method. Downloadable source code and an example are available at the conclusion of the article.
Leashing Up
Before immortalizing our furry friends, we uploaded photos of Mini, Ceaser, Snorkles and the rest of the pack to a Flickr photostream. Flickr offers single and bulk uploading capabilities for larger batches.
Be sure to peek at the footer of the gallery once everything is uploaded. Here you will find links for various feeds—including our latest XML feed:
Go Get it Boy!
First, we get the contents of the XML page from Flikr with the “file_get_contents” function. Then, we use PHP 5’s “SimpleXMLElement” function to turn the contents of the XML file into a simple object that we can parse with ease. Simply replace the URL below with your Flickr XML feed.
$xmlFileData = file_get_contents
("http://api.flickr.com/services/feeds/photos_public.gne?id=YOUR_FLICKR_FEED_ID_HERE&lang=en-us&format=rss_200");
$xmlData = new SimpleXMLElement($xmlFileData);
print_r($xmlData); // Returns human readable version of SimpleXML object
Upon viewing the results, we see a bunch of scrambled data sprinkled around our photos. To get a better look at what is returned, view the source and see a highly organized tree-like object. The real kibbles and bits of most SimpleXML objects are usually stored in an “item” array (show example).
Chasing One’s Tail
If you refer back to our simple xml object, you may notice that the structure is somewhat similar to regular XML. Each entry in the object is a “Node”, and this particular object has both parent and children nodes. There is link, title, description, pubDate, author, and Guid. The data we really want come from the first 3 nodes.
We start by building a loop that will iterate through all the items in our array. Using PHP’s arrow operator (->) we can traverse trough our file structure as easily as snorkles mushes through the arctic praries. Use the syntax $object->parent->child to get to the data you are looking for.
foreach($xmlData->channel->item as $item){literal} { // Starts loop
Next, we will parse our XML nodes with the arrow operator and store them as variables.
// Define variables
$title = $item->title;
$link = $item->link;
$description = $item->description;
Finally, we output the results with a little HTML to make our heroes look presentable.
// Build and output photos
$k9 = "<h2>" . $title . "</h2>";
$k9 .= "<a href=\"" . $link . "\" target=\"_blank\">View on Flickr</a><br />";
$k9 .= $description . "<br />";
echo $k9 ;
} // End loop
Never say Lie!
Of course we are still lacking the features that make any ameateur pet lover website complete:
- An extremely loud tiling background to overwhelm the page
- Comic Sans MS as headline and body font
- Repeating animated gifs
- An uninitiated midi song
Put all this together and every dog has it’s day! Download source file.
{/literal}