Adding uniquely-styled Flickr photo streams to your blog is easy, and it’s just another thing you can leverage to make your blog stand out among the crowd. Today, my goal is simply to walk you through the process of creating your very own photo stream so that you can end up with something like this:
Step one: grabbing your Flickr badge
Alright, I guess now’s a good time to mention that I’ve already assumed a couple of things here:
- First, that you have a Flickr account
- Second, that you have already uploaded some pictures to that account
If you said “yeah…..yeah!” to the above items, then you’re ready to rock.
(1) Go ahead and log in to your Flickr account, and then click on the “Your Photos” link to access the - wait for it - “Your Photos” page. Once there, direct your eyes to the rightmost column and (2) look for the “Flickr badge” link underneath the heading, “Share your photos.” Click on that bad boy, and you’ll be directed to a new page where you can go through the stepwise process of setting up your Flickr badge. So far so good, right?
When you reach the badge setup page, (3) the first thing you need to do is select the option to create “an HTML badge” and then click the “next” button below the pictures. On the next screen (which isn’t worth picturing here), go ahead and use the default configuration, which is set to display “all of your public photos,” and then click “next.”
Now you get to choose your photo layout options. Basically, your choices will determine parameters that will be passed along in a snippet of JavaScript that you’ll have to include in the source code for your site (this may sound bad, but it’s dead simple). Fortunately, all of this is automated for you, so (4) choose your display options and move right along. I’ve included my list of recommended options below. Oh, and make sure that last option is “None!”
Double-check that last option to make sure you selected “None (Because you want to style it yourself)” and then click “next.” 
On the ensuing screen, (5) simply select the two options for “no background” and “no border,” and then scroll down and click “next” once more. You don’t want to choose any colors because you’re going to style everything - the borders around the pictures and the way in which they’re presented - yourself. Stick with me here, and you’ll be a Flickr maven in no time.
Flickr will now display your unstyled badge in vertical format. Underneath the pictures, you’ll find the source code that you will need to snag for your blog. (6) Simply click anywhere inside the box of code, and then copy the selection, as shown below:
Step two: into your blog
If there’s a part that could be considered the least bit tricky, then this is it. I’m going to do a two-part explanation for both WordPress and MovableType users, and if you’re not using one of these platforms, then you ought to be able to infer what needs to be done because the differences between platforms are almost purely semantic.
The starting condition for all of these examples is that you’ve just copied the code from the Flickr badge creator…
WordPress
Venture into your WordPress administration panel and click on the “Presentation” tab. You will then be presented with two “sub tab” options, “Theme,” which is selected, and “Theme Editor.” Choose “Theme Editor,” and then you’ll have to choose the file or files in which you would like to include your Flickr photo stream. In order to help you choose the right file, use this checklist below:
- Do you want the pictures to appear in the sidebar?
- Do you want the pictures to appear somewhere on the main page of your site, either before or after your blog entries?
- Do you want the pictures to appear on a different page altogether?
If #1 is for you, then choose the file “sidebar.php.” If #2 is more your speed, choose “index.php.” If #3, you’re kind of on your own there, but I’m going to assume that you probably know enough to choose the appropriate file.
Once your file is loaded into the WP administration panel, select where you want the pictures to reside within the code, and paste the copied Flickr code in that location. To continue with the tutorial, click here to move on to styling your Flickr badge code.
MovableType
The default MT installation provides you with template files, and I’ll be using those default names as reference points during this tutorial. For the sake of simplicity, let’s assume you would like to display your photos on the main page of your site.
Log in to your MovableType installation and choose the “Templates” option from the navigational menu. Choose the file called “Main Index,” and it will load up in a box that will allow you to edit the source code for that page. You’ll likely have to scroll down a ways to get beneath the header code, and the first thing you should look for are the MovableType entry display tags that look like this:
<MTEntries>
...some code here to cycle through your posts...
</MTEntries>
Now, if you want your photos to appear before your entries, then simply paste the Flickr badge code before the first MTEntries tag. If you’d like the photos to appear after your posts, then paste the code after the closing MTEntries tag. Once you’ve pasted the code in your desired location, you’re ready to begin styling!
Styling up your code
At this point, you should now have a block of code in one of your blog templates that looks like this:
<!-- 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=10&display=latest&size=t&layout=x&source=user&user=18867172%40N00"></script>
</div></div>
<!-- End of Flickr Badge -->
Right now, it looks like a bit of a mess, but you’ll be happy to know that most of that code is totally unnecessary (at least in my opinion). I want you to edit that Flickr badge code so that it ends up looking like this:
<!-- Start of Flickr Badge -->
<style type="text/css">
.flickr_badge { float: left; }
.flickr_badge img { width: auto; height: 100px; padding: 5px; margin: 0 10px 10px 0; border: 1px solid #000; background: #ccc; float: left; }
</style>
<div class="flickr_badge">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=x&source=user&user=18867172%40N00"></script>
</div>
<!-- End of Flickr Badge -->
Looks a little more friendly, doesn’t it? In the above code, the only thing you really need to be worried about is what falls between the two <style> tags. Let me explain what each item does:
.flickr_badge { float: left; }
All that line does is provide for a container within which your pictures will appear, in effect setting that area apart from the rest of the code in your blog template.
.flickr_badge img { width: auto; height: 100px; padding: 5px; margin: 0 10px 10px 0; border: 1px solid #000; background: #ccc; float: left; }
Specifically, the above style declaration determines how your Flickr photos will appear on your site. In my example, your pictures will each appear 100px high with an adjusted width that maintains the original photo’s aspect ratio. In addition, there will be a 1px black border around the photo that surrounds a 5px gray (#ccc) area that will effectively “frame” each picture. Finally, your pictures will be neatly positioned next to one another with 10px between them, as determined by the “margin” declaration and also the “float: left” property. Note: “float: left” merely tells the browser to display the photos next to one another horizontally.
Now, if you would like to style your pictures differently, simply tweak the values in that line of code. Don’t want that 5px “frame” effect? Delete “padding: 5px.” Want a red border with an orange frame? Change “border: 1px solid #000″ to “border: 1px solid #f00″ and “background: #ccc” to “background: #f90.” Want a dotted border around your pictures? Change “border: 1px solid #000″ to “border: 1px dotted #000.” Want your pictures to display vertically instead of horizontally? Just remove the “float: left” property (but leave it in the surrounding “.flickr_badge” declaration). Still hungry for more CSS info? Check out the W3C’s guide to CSS styling.
Hopefully you’ve found this tutorial helpful, because that’s all you get from me! Seriously, though, if you use this technique to pimp your blog, I want to know about it! Send me a link so I can check out your awesomeness!
56 Comments ↓
Very detailed. Youe peeps should like this.
What is the link to your flickr profile?
I recently discovered that attempting to learn html is a complete waste of time.
Find what you want the site to look, find someone that has done something similar and steal it.
You have done one better and explained it in a way that s complete idiot like me could understand.
Thank you so much
Dennis, I thought you could get there by clicking through one of my pictures on the main page of this site…but for clarity’s sake, here it is:
My Profile
Thanks man. The clicker must be busted on the pictures at the top of the post. Peace out!
That was just a .gif…I did that so the post would load faster, knowing that it was going to be so image-heavy to begin with.
Sorry for the confusion - I probably should have mentioned that!
Thank you so much for the information! It was exactly what I was looking for…You are my hero of the day.
Thanks for the tutorial - this is a great idea. Do you have problems with the layout in Firefox? It looks fine in IE, but when I view my sample in Firefox, the pictures “cascade” from upper left to lower right, rather than sitting next to each other horizontally. Any ideas? Tx.
Mine look fine in FF. What version are you running?
Thanks, this was really helpful. One tricky thing - I couldn’t find the badge link where you described it. I did find it under http://www.flickr.com/tools/
They’ve probably changed its location, as it was just as hard to find before.
I need to update this bad boy.
Shucks, I’m completely stumped and don’t actually know how to make the images line up horizontally. Everything I do is all vertical. Any help?
Tom,
You need to apply a float: left CSS property to your images. It’s explained in the tutorial above, though, so you should have no problem.
Thanks for that, I’ve now managed to add Flickr photos to my sidebar. I love what you done with some of the blogs I’ve seen and I will be contacting you as I’d love you to totally pimp my blog!
I even copied your code on the site and still they do not align horizontally
Tom, what browser are you using?
I’m using the latest firefox. I’ve no idea what’s wrong.
Hi, great tutorial. I followed your instructions, but when I got to the sidebar doc in my WordPress, it says (at the bottom, helpfully, so I don’t read it until I’ve finished making my changes) “if this file were writable, you could edit it.” So,,, how do I make it writable?
Sheffner,
Your best bet is to use an FTP client to access your files. That way, you can make any changes you want, and then you can simply upload the updated files to the server instead of relying on WordPress.
On Windows machines, I’m partial to CoffeeCup FTP, which is a free FTP client that has a very intuitive Windows-like interface.
Once you’ve installed an FTP client, you will need to log into your FTP server in order to access the file that you need to change. In just about every case I’ve ever heard of, your Web host either:
has already provided you with details about logging into your FTP server
or you can call your hosting company, and they can provide you with the appropriate details for your FTP server
Assuming you’ve gotten that mess figured out, you need to locate the root folder where your WordPress is installed, and then navigate to the following:
WP_ROOT/wp-content/themes/[your active theme]/sidebar.php
Open that file up, and then make the edits manually using a program like Notepad++ or your XHTML editor of choice. Once you’ve edited the file, upload it to the server again and overwrite the older version.
If you’ve coded it up right, you’ll see the results you were after!
Great post and veryhelpfull.
Any idea how I can upload in Typepad?
My blog just gained +46 sexy from that post. Thanks!
hi chris
i don’t get the ‘theme editor’ option on my wordpress, but i guess that’s because i’m using the free version.
BTW thanks for the pressrow theme, i really love it, the only negative is there is no place for a tagline. Can I put one in somehow?
Classy … !!!
Such a nice blog … love it
Great explanation. Is there a way to split the 10 photos into two vertical columns of five each?
Well, with some research I learned how to split a badge of ten photos into two columns. You can find the directions here: http://www.flickr.com/forums/help/2396/. Tricky stuff!!!
thank you soo much for these!!!!!thank you!
p/s: i don’t think it works in opera. everything is veritcal though. But then again, thank you!
great help, thanks!
i just wonder why it doesn’t show up if I put it in one of the widgets. Im only using a free wordpress blog.
help.
Kars,
For WordPress applications, there is a plugin called FlickrRSS that is far better suited to this task than hard-coding the entire thing like you see in this post.
I’m not sure, but I thought that WordPress.com offered a FlickrRSS widget…
Chris P, theres definitely a FlickRSS plug-in, I’m not sure if its a widget though. On the free wordpress widget guide (http://wordpress.com/features/sidebar-widgets/) the example given is a flickr widget so it must be possible..
I prefer the hardcoding approach myself though, spelt out like this it’s not hard.
Many thanks for writing this article, it was just what I needed!
Emma
[...] How to: Add a Styled Flickr Photo Stream to Your Blog | Pearsonified (tags: blog Blogging flickr wordpress) [...]
Hey - great tutorial, thanks.
I’m trying to update our site, which someone else wrote who has WAY more code know-how than I do.
Anyway, her flickr badge code looks quite a bit different, and I was wondering if anyone had any tips on changing it. Right now we have 6 pics, lined up in 2 vertical columns. I’d like the same layout, but horizontal (in two rows or three.)
Here’s the code now:
Gallery
(from http://www.opirgkingston.org)
Thanks again!
Anyone figure out how to change where the images link to in a Flickr badge? Seems tied up with javascript src URL…
Thank you for cleaning up flickr’s code. I couldn’t figure out what all the styles were and what they do.
After looking at your post, I finally was able to style it the way I wanted.
Thanks! This was just what I was looking for.
Thanks a bunch, very helpful!
Great tutorial. Thanks for taking the time to share with the rest of us.
Flickr’s badge creator offers the option to show photos of yours with a particular tag. It doesn’t seem to be working though. Has anyone else had trouble with this? Any solutions?
Great tutorial, thanks!
This is still very useful. Thanks.
Just wondering.. u know how when you hover your mouse on the image you will get the title of the image you set on flickr? How do you grab that title and display it on your page?
Can someone explane where should i paste the code into? What this mean “website where you’d like your badge to appear”. please answer to me right away so i can do it. thank you very much.
Thanks for this! Finally one I was able to understand enough to put together! thanks!!!!!
how can i paste my badge on my yahoo blog
how to do this for my yahoo blog
got to the last step but cant find wordpress or MT…got the code but dont know where to put it….help~~
[...] Pros: The widget can add a personal touch to your blog, specially if you spend some time customizing the style. Chris Pearson has an article on this topic titled “Add a Styled Flickr Photo Stream to Your Blog.” [...]
how to add this to a website ?
Hi: great idea and i’m almost there! but i’m running into an issue, which im not sure if its my browser of what (FF).. but where exactly on the sidebar.php (wordpress) do i place the code if i want the pics to show after the last thing on the sidebar. i’m placing it in all kinds of different areas and nothing shows..
help!
Thank you so much for this, you really helped me.
Hi, this is eva. My blog’s sidebar is using your styled flickr photo code. But as you can see from my blog, it’s not horizontally positioned. It’s very weird. It’s naturally vertical. Although I delete “float: left” to see if there would be any changes, nothing happens. Then I think maybe it’s because of the height and margin, so i fixed the height to be 70 px and margin to be 5px. The thumbnail is smaller but it’s still vertical. Plz help me out.
Awesome article! Still getting referenced after sooo long! Question: how dow I change the code so that the photo links open in a new window (As opposed to same page)?
Mike — You simply need to add the
target="_blank"attribute to your anchor (<a>) tags.By default the flickr images on the weblog will be clickable. Is it possible to just display the images without the clicking?
[...] http://www.pearsonified.com [...]
Thank you for the tip!
Hoot and/or Holler ↓