How to: Add a Styled Flickr Photo Stream to Your Blog

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…

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:

  1. Do you want the pictures to appear in the sidebar?
  2. Do you want the pictures to appear somewhere on the main page of your site, either before or after your blog entries?
  3. 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.

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:

...some code here to cycle through your posts...

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;}
<div id="flickr_badge_uber_wrapper"><a href="" 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=""></script>
<!-- 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; }
<div class="flickr_badge">
<script type="text/javascript" src=""></script>
<!-- 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!

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:

90 comments… read them below or add one

Dennis March 27, 2006

Very detailed. Youe peeps should like this.


Dennis March 30, 2006

What is the link to your flickr profile?


eamon March 30, 2006

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


Chris P. March 30, 2006

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


Bullock March 30, 2006

Thanks man. The clicker must be busted on the pictures at the top of the post. Peace out!


Chris P. March 30, 2006

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!


Alisa June 21, 2006

Thank you so much for the information! It was exactly what I was looking for…You are my hero of the day.


Nathan Dunn August 14, 2006

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.


Chris P. August 15, 2006

Mine look fine in FF. What version are you running?


Zoe August 24, 2006

Thanks, this was really helpful. One tricky thing – I couldn’t find the badge link where you described it. I did find it under


Chris P. August 24, 2006

They’ve probably changed its location, as it was just as hard to find before.

I need to update this bad boy.


Tom August 25, 2006

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?


Chris P. August 26, 2006


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.


Russell James August 26, 2006

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!


Tom Barrett August 28, 2006

I even copied your code on the site and still they do not align horizontally :(


Chris P. August 28, 2006

Tom, what browser are you using?


Tom August 28, 2006

I’m using the latest firefox. I’ve no idea what’s wrong. :(


sheffner August 31, 2006

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?


Chris P. September 1, 2006


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!


Dennis Goedegebuure September 2, 2006

Great post and veryhelpfull.
Any idea how I can upload in Typepad?


miltownkid September 9, 2006

My blog just gained +46 sexy from that post. Thanks!


sue September 12, 2006

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?


Asma September 20, 2006

Classy … !!!

Such a nice blog … love it :)


CBP September 27, 2006

Great explanation. Is there a way to split the 10 photos into two vertical columns of five each?


CBP September 29, 2006

Well, with some research I learned how to split a badge of ten photos into two columns. You can find the directions here: Tricky stuff!!!


farah October 1, 2006

thank you soo much for these!!!!!thank you!


farah October 1, 2006

p/s: i don’t think it works in opera. everything is veritcal though. But then again, thank you! :)


MrC October 7, 2006

great help, thanks!


kars October 25, 2006

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.



Chris P. October 25, 2006


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 offered a FlickrRSS widget…


David A Rogers January 3, 2011

This plugin allows up to 20 images to be pulled AND open them with lightbox. Easy to configure. Limiting because its a widget.


Emma November 10, 2006

Chris P, theres definitely a FlickRSS plug-in, I’m not sure if its a widget though. On the free wordpress widget guide ( 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!



Tracey February 28, 2007

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:



Thanks again!


CFman April 20, 2007

Anyone figure out how to change where the images link to in a Flickr badge? Seems tied up with javascript src URL…


Iris Kao June 30, 2007

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.


Nichole July 10, 2007

Thanks! This was just what I was looking for.


Andrew July 24, 2007

Thanks a bunch, very helpful!


theCoup July 26, 2007

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?


Jay August 8, 2007

Great tutorial, thanks!


Nick August 25, 2007

This is still very useful. Thanks.


Chris August 28, 2007

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?


tiff September 15, 2007

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.


Justine September 16, 2007

Thanks for this! Finally one I was able to understand enough to put together! thanks!!!!!


anh duc October 3, 2007

how can i paste my badge on my yahoo blog


anh duc October 3, 2007

how to do this for my yahoo blog


Angela October 30, 2007

got to the last step but cant find wordpress or MT…got the code but dont know where to put it….help~~


Arkadas Arama January 14, 2008

how to add this to a website ?


marikeeler March 10, 2008

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..



chantel March 23, 2008

Thank you so much for this, you really helped me.


caixiaoeva March 30, 2008

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.


mike May 29, 2008

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)?


Chris P. June 4, 2008

Mike — You simply need to add the target="_blank" attribute to your anchor (<a>) tags.


berend June 11, 2008

By default the flickr images on the weblog will be clickable. Is it possible to just display the images without the clicking?


Henrik July 8, 2008

Thank you for the tip!


D. July 28, 2008

Hi there, love the details but I have 3 questions:

1- where do I add the code, the CSS style sheet? Because my pages are in PHP, I’d have to set in Sidebar3.php and would mess up…

2- I’m a newbie at PHP, was hell to create the website, I’m still confused and I’d like something to work as lightbox or slimbox. The creators so far were an a** not explaining step by step how to install. Lots of information are missing including which is compatible with v.26 Wordpress. Your way seems far easier but I don’t know if I’ll have the effect I want.

3 – Do you know where can I find a photo stream with lightbox effect for php coding please? With or no plugin, I’ll take anything.



Gina August 11, 2008

Thanks so much for the information! I am not sure if this code is usable just in a normal website in Dreamweaver? I know this tutorial is for blogs, but can it be used in websites, too?


Chris Pearson August 13, 2008

Gina — This code will work on any type of Website.


luis August 26, 2008

thank you, that was great, i really thank you for taking the time to write this tutorial.


Owen September 26, 2008

Don’t work in firefox 3.02 platform movable type 4.02


Ishrath December 12, 2008

Thank Chris! I am going to incorporate this on my blog soon, which uses your PressRow theme. I was searching everywhere for tips and tricks. Hope it clicks. Thanks so much for the detailed writeup. Cheers!


grant December 17, 2008

Still very useful at the end of 2008 :)


Sarah Van Elzen January 13, 2009

You can also just go here.


Ameya January 23, 2009

Thank you so much for this! :D


Renata February 1, 2009

I just upgraded to WP 2.8.

Not sure there is a “Your photos” option and was unable to use.
Please notify of where to start…

Thanks !!


fat-mossie June 15, 2009


Does anyone know how I can insert the badge to a selective post?


thanks for the tutorial. excellent stuff


iierma August 5, 2009

I tried to add flickr photo to wordpress but unable,it doesn’t appear at all.


Maru August 27, 2009

Does anyone know if it’s possible to do something like this but only for my Favorite photos?



Felicia February 12, 2010

Thanks for writing this, I have just started to learn HTML and now you’ve given me code I can work on. I would like to get a block of 6 photos but so far stuck in a column. I also rotate only between 10 photos, is it possible to get the badge to pull from the whole set I selected? Thanks for any help you might have!


Mike Fiorillo April 4, 2010

Just set up on my thesis site… thanks for the guide. It’s annoying how flickr forces you to only use even numbers (5 or 10 photos), as it’d be nice to have a 3×3 grid of photos. I guess I could hide the last one with CSS. Thanks!


David A Rogers January 3, 2011

Change the count= number to 9. Adjust the width of the uberwrapper accordingly


Paula April 27, 2010

Hi. Wondering if anyone knows what the deal is with the Flickr badge (Flash) not showing up on a Wordpress blog when being viewed through the Firefox browser?


izzy May 18, 2010

lets say I just want 7 or 6 photos to show, how would i go about doing that?


David A Rogers January 3, 2011

Change the count= number to 6 or 7

Id like to now how to get more than 10!


joan July 24, 2013

I would like MORE THAN 10.


joby June 9, 2010

very usefull! thx a lot


Ardianzzz June 20, 2010

owh thats cool.. thank you! :)


Dariela August 3, 2010

Such a great tutorial!! I followed it and I was able to change mine. THANKS SO MUCH, this I was looking for this and had to click way too many inks before yours, it really helped me o it was worth it!!


David A Rogers January 3, 2011

Does anyone know how to
a) get more than 10 images to show. Simply changing the count= to anything more than 10 doesnt work.
b) get the images to open in a Lightbox and not go to


crossknight February 10, 2011

How do you style the Javascript so that the photos display in block format. The script says “layout=x” but how do add the “y” axis too, so that it shows up as a block of thumbnail photos?


Bram February 15, 2011

Somebody already knows how to get more then 10 pics in there?

@crossknight, you can just delete the layout=x totally. then it just goes from left to right and continues on the next line when the width is reached.

good luck.. and let me know when we can get more then 10! .. or open them in a lightbox. good questions David!


Joyce Triezenbeg April 23, 2011

You lost me at “Venture into your WordPress administration panel and click on the “Presentation” tab”. Where the heck is the “administration panel?” Do you mean the dashboard? Argh!


Chris Pearson April 25, 2011

Joyce, technically, the Dashboard is one page of your WordPress administration panel, but ultimately, we’re talking about the same thing :D


alex August 6, 2011

i tried to follow our steps for introducing a fickr badge into my blog, but I couldnt :( could this be possible due to the theme I am using?
thank you


kittee August 14, 2011

Thanks for this! I did it!


Pam September 15, 2011

Great article and just what I was looking for. Thank you :)


Daniel February 8, 2012

Thanks for this great tutorial!


Eldraïd February 21, 2012

That was very helpful, many thanks!!!


Asana April 11, 2012

i’m trying to find theme editor but couldn’t find it.
Here’s the menu under Appearance. is it probably i need to update my regular wordpress to ‘pro’ by buying some features??
Theme Options
Custom Design

Thanks in advance


Anabela Salvador George May 3, 2012

Thank you so much. I was very frustrated when I could no longer display my Flickr photos on my blog. I could not figure out how to do it. At last, I can now display my photos again!


Raj November 30, 2013


Can we show more than 10 images in my website? How?


Hoot and/or Holler

Previous post:

Next post: