O'Reilly logo

Flickr Hacks by Jim Bumgardner, Paul Bausch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hack #7. Feed Your Latest Photos to Your Web Site

Flickr provides a number of ways to syndicate your photos to another web site.

Adding photos to an existing web site can be a complex chore. You have to upload each photo to your site, write some HTML to display each photo on a page, and create duplicate, resized images if you want to show thumbnails of the photos. Fortunately, there are several tools at your disposal that simplify the process of sharing your photos on a remote web site.

Even though you upload your photographs to Flickr—and they're stored on Flickr's servers—your photos aren't locked in at the site. Flickr is an open system that allows you to access your photos in a number of ways and display them anywhere you'd like. One of the easiest ways to show your photos on another site is with a Flickr badge.

Flickr Badges

Though it sounds like something you might wear on your uniform, a Flickr badge is simply a bit of code that displays photos on a remote web site. Figure 1-40 shows a simple Flickr badge with three photos on a remote web site.

A Flickr badge on a remote site

Figure 1-40. A Flickr badge on a remote site

You can create your own Flickr badge in a simple five-step process. Browse to the "Create your own Flickr badge" page (http://www.flickr.com/badge_new.gne), and log in if you haven't already. Creating a Flickr badge is the process of making a number of decisions about the badge. Here are the steps:

Choose the type

You can decide between basic static HTML, or an animated Flash-based badge. The animated badge shows a bit of movement and fades thumbnails in and out. Choosing Flash will mean your visitors will need the Macromedia Flash plug-in installed for their browsers in order to see your photos.

Choose the photos

You can choose to display your latest photos, or any of your photos that are tagged with a specific term. In addition, you can display photos from a group you're a member of, all Public photos with a certain tag, or, if you're feeling generous, all Public photos.

Set the layout (HTML only)

When you're building an HTML badge, you have a number of options for the layout. You can choose to show your personal buddy icon, which links to your Flickr profile page. You can choose the number of photos you'd like to show, the size of the thumbnails, and the orientation of the badge (horizontal or vertical). Finally, you can choose to show the latest photos or a random sampling.

Choose colors

If you want the badge to fit in seamlessly with your remote site's design, you can adjust the background, border, and link colors. The preview at the bottom of the page will show your changes in progress.

Copy and paste code

On the last page, you can preview your badge, and copy the code for your unique badge by highlighting it and clicking Ctrl-C.

The code for a static HTML badge is a combination of CSS, HTML, and JavaScript. It should look something like this:

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; 
    color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; 
    border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#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 {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; 
    font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0">
 <tr>
     <td>
     <a href="http://www.flickr.com" id="flickr_www">
     www.<strong style="color:#3993ff">flick
     <span style="color:#ff1c92">r</span></strong>
     .com</a>
     <table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
       <script type="text/javascript" 
src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=t&layout=v&source=user&user=33853652177%40N01">
       </script>
     </table>
     </td>
 </tr>
</table>
<!-- End of Flickr Badge -->

The Cascading Style Sheet (CSS) style definitions at the top of the code format how the badge looks. You can modify this CSS at any point to change how the badge looks on your site. Immediately after the <style> tags, the standard HTML <table> holds the photos.

The <script> tag does the work of displaying the photos. As you can see in the src attribute, the JavaScript file resides at http://www.flickr.com and displays photos based on the parameters passed in the URL. Many of the decisions you made while running through the badge-creation process are encapsulated in this URL. For example, the count variable will be set to the number of photos you told the badge to display, and the layout variable will be set to v or h, depending on your choice of vertical or horizontal layout.

If you need to change your badge, try studying the fairly self-explanatory variables in the URL and changing their values. That way, you can make changes quickly without running through the whole badge-creation process again.

Flickr Feeds

Another way that Flickr makes photos available for use on other sites is through standard XML syndication formats [Hack #17] . You'll find news feeds at the bottom of many Flickr pages that relate to the content you see on those pages.

Each Flickr feed contains the 10 most recently added photos for a particular user, group, or tag. The item nodes in the feed contain all of the details you need to display the photo on a remote site: the title, a link to the photo on Flickr, and a bit of HTML for displaying a thumbnail and caption. Here's a look at an item in a Flickr RSS feed (this example has been formatted for readability; the actual feed includes escaped HTML, with tags such as <p> rendered as the escaped &lt;p&gt;):

<item>
    <title>Ultimate Championships</title>
    <link>http://www.flickr.com/photos/pb/16469233/</link>
    <description>
        <p><a href="http://www.flickr.com/people/pb/">pb</a> posted a photo:</p>
        <p><a href="http://www.flickr.com/photos/pb/16469233/" 
            title="Ultimate Championships">
            <img src="http://photos10.flickr.com/16447365_40ac8021f5_m.jpg" 
            width="240" height="161" alt="Ultimate Championships" 
            style="border: 1px solid #000000;" /></a></p>
        <p>the women's championship game was washington vs. stanford</p>
    </description>
    <pubDate>Mon, 30 May 2005 11:01:15 -0700</pubDate>
    <author>nobody@flickr.com (pb)</author>
    <guid isPermaLink="false">tag:flickr.com,2004:/photo/16469233</guid>
</item>

The <title> and <link> elements hold the title of the photo and a link to the photo, as you'd expect. The <description> element holds the block of HTML that you can use on a remote site.

The most common use of RSS is viewing new items in a newsreader, but there's no reason you can't use this same feed to create a custom Flickr badge. Parsing XML is the perfect job for Perl, and with a few lines of code, you can build your own badge.

The code

This Perl script uses the LWP::Simple module to fetch a Flickr feed and the XML::RSS module to parse the feed and display its contents. Make sure you have these modules on your server, and then add this code to a file called flickr_feed.pl. Be sure to include a valid Flickr feed URL that contains the photos you want to syndicate.

#!/usr/bin/perl
# flickr_feed.pl
# Transforms a Flickr Feed into HTML
# Usage: flickr_feed.pl

use strict;
use XML::RSS;
use LWP::Simple;

# Grab the feed.
my $flickr_feed = 'insert Flickr feed URL';
my $feed = get($flickr_feed);

# Start RSS Parser
my $rss = new XML::RSS;

# parse the feed
$rss->parse($feed);

# initialize item counter
my $i;

# print the title, link, and description of each RSS item
foreach my $item (@{$rss->{'items'}}) {
    $i++;
    my $desc = "$item->{'description'}\n";

    # remove the "posted by" text
    $desc =~ s!<p>.*?posted a photo:</p>!!;

    # use thumbnails instead of medium images
    $desc =~ s!_m!_t!;

    # remove the width and height attributes from image tags
    $desc =~ s!width=".*?" height=".*?"!!;

    # remove the paragraph tags
    $desc =~ s!</?p>!!g;

    # print the item
    print "$desc<br />";
    print "<a href=\"$item->{'link'}\">";
    print "$item->{'title'}</a><br /><br />";
    
    # set the number of photos
    last if ($i == 3);
}

This code downloads the Flickr feed and massages the HTML in the <description> tag, removing some text. It then prints each item in the feed, until it hits the number specified in the last line of the script.

Running the hack

You can run this code from the command line by calling the script like this:

perl flickr_feed.pl

You'll probably want to set the script to run on a regular schedule with the Windows Task Scheduler, or cron on Unix-based systems.

Using an XML feed instead of a preprogrammed Flickr badge requires a bit more work, but it gives you more control over the presentation. You can create your own CSS styles and classes to make the photos appear exactly as you want them to. Figure 1-41 shows a custom Flickr badge created with the script provided in this hack, viewed on a remote site.

A custom Flickr badge

Figure 1-41. A custom Flickr badge

Hacking the Hack

Even though the Flickr feeds contain most of the information associated with each photo, you can still do more with the Flickr API. The API provides programmatic access to anything at Flickr, not just photos. (You can read the full documentation at http://www.flickr.com/services/api/.)

In addition to titles and captions, you can get access to everything from the number of comments people have left about a photo to notes left by others to technical data (EXIF tags) from the camera that took the photo. Building a custom badge with the API will be more technically complex than parsing an RSS feed, but if you really want access to all of the data you have stored at Flickr, it's available!

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required