While Flickr has a nice little tool for making Flickr badges, sometimes you just need more flexibility. Here I’ve documented the Flickr badge API and what HTML is being outputted so that you can seriously customize the way your photos are being displayed.

Starting Out

Regardless of what you’re going to be doing, you’ll always have this:

<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?user=[The ID]">

You’ll want to replace the value for user with your own ID which you can obtain from idgettr. You may want to replace the @ sign with %40.

The JavaScript Parameters

There are several more parameters, which I will attempt to cover and document in the following table:

Parameter Type Values Definition
count integer A whole number between 1 and 10. The number of photos to be shown. Defaults to 10.
display string latest, random Whether the badge shows the latest uploads or random photos. Defaults to latest.
layout string h, v, x Whether the photos are listed horizontally, vertically, or not styled at all. Defaults to horizontal.
source string user, user_tag, user_set, group, group_tag, all, all_tag Where the photos are pulled from. After choosing one of these, you must then declare up to two more parameters specifying the tag(s) and/or the IDs of the group or set. These parameters are tag (string), group (integer value that can be found at idgettr), and set (integer that is found in the url of the specific set–i.e., when the url is …/sets/1632467/ the set ID is 1632467), respectively.
size string s, t, m The size of the photo. s stands for square, t for thumbnail, and m for medium. (Note that the medium size here is actually the small size when looking at the “available sizes” on a photo.) Defaults to thumbnail.

Styling the Output

Once we include the JavaScript in our page, it will output some HTML for browsers to display. Since this is all about customizability, we need to know what this code is in order to style it. Here’s what is basically outputted by the JavaScript:


<div id="flickr_badge_image1" class="flickr_badge_image">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>
<div id="flickr_badge_image2" class="flickr_badge_image">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>
<div id="flickr_badge_image3" class="flickr_badge_image">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>

And so on. For each image, the ID will change by one integer.

This can now easily be styled with some fancy CSS to look however you want. swan