Adding A Flickr Photo Stream To My Blog

When I first launched my
personal blog, I meant to have a few photos at the top
rotating in. I didn’t use Flickr then, nor did I ever get photos in place by
uploading them to my own server. I finally got picturelicious tonight,
thanks to Chris Person’s great tutorial,

Add a Styled Flickr Photo Stream to Your Blog.

I came across his guide when I was looking for some new designs for my blog
here and for the Daily SearchCast,
plus a few other little projects I’m doing. I thought of blogs with looks I
liked, and Aaron’s SEO Book was one of
them. Chris did Aaron’s blog, I
learned, so I headed over to Chris’s
place and found the tutorial.

Here are a few tips from my experience tonight, if you decide to dive in.

In Step 2, Chris tells you to get your Flickr badge using a link that’s
pretty prominent in the screenshot he shows. That link seems to have done in the
wake of Flickr’s "gamma" redesign in
May.

Hunting through the help files, I finally found the
Flickr Badge page. Then I
continued on with his steps. When I got to the style part, it sort of freaked me
out, even with him simplifying stuff. Part of the problem is that Flickr throws
a bunch of styles at you that actually are commented out and not used, as best I
can tell. You can use them, if you
know what to do. If you don’t, it’s just scary crud.

I’ll get back to that, but I found myself more interested in the process of
choosing what to feed to the stream than styling it up. Using the badge maker,
you can decide to show ALL your public photos, just some that are tagged in
certain categories or those from a specific set.

At first, I just grabbed photos from my
SES San
Jose 2006 set. Then I wanted more. I didn’t want all my public photos,
however. Some of them are pictures I’ve put up to illustrate things, rather than
fun ones of people. As a solution, I created a new tag:
photostream.
Anything I thought would be cool to show in my photostream got tagged this way.
Flickr’s rocking Organize feature that
Dave Naylor turned me on to made it easy to quickly add this tag to a bunch
of my photos.

Down the line, this also means it’s possible to easily make photo streams for
different pages. Next time I do a post on a topic where I also have a lot of
photos, I’ll create a stream just for pictures tagged with that topic.

When you make the stream, Flickr lets you choose 1, 3, 5 or 10 pictures.
Well, I wanted 7. No problem. It was pretty easy to figure out the coding.
You’ve got one key line like this, which I’ve broken into the key elements.

http://www.flickr.com/badge_code_v2.gne?
count=7
&display=random
&size=s
&layout=h
&source=user_tag
&user=26286356%40N00
&tag=photostream

I used the badge maker to generate it initially with 5 photos, then I changed
the number next to count= to 7, and that was it. It doesn’t look like you can
have more than 10 pictures, but by changing the number, you should be able to
get whatever count you want between 1 and 10.

I originally went with thumbnails, like this:

Then I changed my mind. The problem was that it looked great when everything
was horizontal. But the vertical pictures made it hard to fit neatly alongside
my logo (if you don’t see any, try refreshing this page. Pictures are randomly
selected each time).

That’s why I shifted over to a square display. It made everything nice and
neat (Frank Gruber at Somewhat Frank does
this as well — another site with a nice design I like, especially that big fat
feed icon and subscribe box in the right-hand corner).

Of course, what would be great is if Flickr had a way to let me quickly sort
and only show horizontal photos automatically. Looking quickly, I didn’t seen an
option to do this. Moreover, the batch editing in the Organizer makes everything
into squares. It’s impossible to use that to quickly remove any vertical pics out
of your photostream. Here’s wishing for the feature in the future.

The last step of the badge maker lets you do some customization of the box
holding your pictures. Annoyingly, you can’t drop the Flickr logo as part of
this. Hey, I went Pro. Don’t make me have to remove it manually!

OK, so you have to. It’s pretty easy. In fact, like Chris (but far less
skillfully and knowledgably), I dumped a ton of the crud coming out of the
generator.

The pictures in this post above basically rely on this old fashioned table
and one style element:

<style type="text/css">
.flickr_badge_image img {border: 1px solid black !important;}
</style>
<table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<td>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
count=5&display=random&size=t&layout=h&source=user_tag&user=26286356%40N00
&tag=photostream"></script>
<td>
</tr>
</table>

Maybe there’s more that could go, and yes yes, I know I should
be making tableless tables with CSS. CSS rocks. It awesome. And someday, I’ll
have time to play with it more. Until then, I’ll hire Chris — if he wasn’t so
damn busy!