Tyler Hall @ Chattablogs

Getting info from flickr

The first step is finding the web address of the flickr javascript that produces your recent photos. We can get this url from the badge that flickr generates for us. You can make your badge by going here and following the instructions. (You'll need to be signed into flickr. Also, make sure you pick a javascript badge, not a Flash one.)

The html that flickr gives you should look something like this:

<!-- Start of Flickr Badge --> <!-- Start of Flickr Badge --> <style type="text/css"> /* Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started! */ #flickr_badge_uber_wrapper {text-align:center; width:150px;} #flickr_badge_wrapper {padding:10px 0 10px 0;} .flickr_badge_image {margin:0 10px 10px 10px;} .flickr_badge_image img {border: 1px solid black !important;} #flickr_badge_source {text-align:left; margin:0 10px 0 10px;} #flickr_badge_icon {float:left; margin-right:5px;} #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;} #flickr_badge_wrapper {} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} </style> <div id="flickr_badge_uber_wrapper"><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><div id="flickr_badge_wrapper"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=t&layout=x&source=user&user=50226652%40N00"></script> </div></div> <!-- End of Flickr Badge -->

If you scroll all the way down through that big mess-o-code, you'll see near the bottom:

This is where the javascript actually includes your pictures. Everything else above that is just layout code. Since we're going to be styling this ourselves, we don't need that part. In fact, all we need is the URL.

If you go to that page, you can see exactly what flickr inserts into your webpage. Click here. (Of course, this link will show you my pictures, so don't be confused when you see random strangers.)

View the source of that page in your browser. You'll see that it's a little bit of random javascript (which we can ignore) and a <div> for each of your pictures. Each <div> has all the information we need.

• The picture's source.
• The link to the picture's flickr page.
• And the picture's title.

All we have to do is extract it, and spit it back out in the format we want.

PHP is your friend

This is where PHP comes in to play. Our script will be broken down into the following parts:

1. Grab the information from flickr.
2. Pull out the pieces we need (throw away the rest).
3. Put it back together for our visitors.

First things first, we can grab flickr's HTML like so:

We store our flickr address into the $url variable and then download the contents of that url into $html using the file_get_contents() function.

Next, we need to pull out only the <divs>, ignoring everything else.

preg_match_all() uses regular expressions to search through our html and extract only the <div>...</div> parts. Regular expressions are a great way to proccess text, but they're too complicated for the scope of this article. To learn more about them, visit http://www.regular-expressions.info

PHP will grab all the <divs> and store them into the array $matches.

Our last step is to loop through the first element in $matches and send its contents to the browser.

Voila! We're practically done.

If we leave everything like it is, the script will work fine. Unforunately, it's not standards compliant because flickr doesn't put a trailing slash "/" on their <img> tag. XHTML requires that all tags be closed. Not to worry, it's an easy fix. We can modify the code above to make the change for us.

str_replace() searches through $div and replaces the incorrect "></a>" piece with "/></a>". (Notice the extra slash that was added.) Now we're finished.

Here's the completed code. Or you can download it here.

Making it better

As it stands, the script works fine. However, for a high traffic site, having to pull data from flickr and process it each time could be a real bottleneck. One solution would be to use disk caching.

The basic logic would be "If the we haven't checked for new photos in over an hour, do so now. Otherwise, just send the visitor what we got last time."

Here's the code. I'll leave explaining it as an exercise for the reader ;-)

what a great tutorial! thanks for sharing... can't wait to see what else you have in store...