We were building a site where we wanted a strip of flickr images from a specific flickr group, or with specific tags, to show up in the footer, and to update automatically as new images became available on the flickr group or with those keywords.

The best solution seemed to be FlickrRSS, and we gave it a chance for a good few weeks. But it was very unstable – some days the pictures would show up, and some days they wouldn’t. We tried fiddling around with all the settings, but nothing seemed to work.

It became apparent that we needed another solution. After testing out a whole bunch of plugins, we discovered a simple way to display the flickr images in the way we wanted: the flickr badge!

Here’s how you do it:

  1. Go to the main flickr badge page.
  2. In Step 1, select An HTML Badge. Click on Next: Choose Photos.
  3. In Step 2, select where you want the pictures to come from. The available options are: Yours, From a Group, Everyone’s. Let’s say you want the pictures to come From a Group. Select that, and in the drop-down box, select the group. You need to be a member of the group in order for it to appear there. Click Next: Layout.
  4. In Step 3, you have the following options:
    1. Would you like to include the group icon & a link to the group? Select No.
    2. How many photos would you like to show? Select whatever number you want. We found 10 worked well across the width of our 940px wide site.
    3. Which ones? You can choose either Most recent, or A random selection.
    4. What size? You can choose Square, Thumbnail, or Mid-size. Select Square – it looks the nicest because it is even.
    5. Which orientation would you like? You can choose Vertical, Horizontal or None – None being where you wan to style the layout yourself. I chose Horizontal for displaying the photos in the footer. If you want to display them in a sidebar, you would probably select Vertical.
  5. Click Next: Colors.
  6. In Step 4, select the colors you want to appear in the background, border, links, and text. You can select to have No background, and No border. Click Next: Preview & Get Code.
  7. Copy and paste the code into your WordPress template file.

You may need to style it a bit to match your theme, or get rid of some quirky things. For example, we got rid of the flickr.com link, added a blue border to each image that matches the blue on the site, and centered the whole thing with a div since it was skewed to the left.

Here’s the code with our changes (it may not be pretty, but it works):

<!-- 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 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 3px solid #103B5A !important; margin: 0 5px;}
#flickr_www {display:block; padding:0 !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 align="center">
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="0" border="0"><tr><td><table cellpadding="0" cellspacing="0" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=s&layout=h&context=in%2Fpool-israel%2F&source=group&group=73319449%40N00"></script>
</tr>
</table>
</td></tr></table></div>
<!-- End of Flickr Badge -->

Wanna see how it turned out? Check it out on our new site, israelplug – scroll down to the bottom where is says FlickrIsrael.