Sunday (08/6/06)
Custom Flickr Badge API Documentation 11:00 pm
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. 
I eat food. I listen to music. I sleep. Sometimes. I drink lots of coffee. I make pretty pictures. I talk to people. I believe in things. I write stuff. I take photographs. I have a laughing addiction. I am human. 
Ah. I was looking for something like this a while ago. I just skimmed over it now, but when I get some spare time, I’ll take a look at this in detail and maybe use it. Thanks for posting this!
Glad somebody found it useful.
[…] FlickrBlog just gave some link love to my Flickr Badge API Docs. Sure they spelled my name “Elliot Swat,” but they got the link right, so I suppose that’s still good. […]
Excellent documentation Elliot. This is highly useful for playing with mashups. At the same time I have a hard time squirting badge code into my personal websites - it almost seems inherently wrong. I still prefer (in my old fashion ways) to grab public feeds and doing my own parsing on the backend. However none of this is to take away your most excellent description and documentation skills you have done here. Will you be my personal JSDoc application assistant for any future widgets that I might write?
@Dustin: Thanks.
Something about dropping a script in there to get some photos does come as a little odd, but sometimes you just can’t beat simplicity.
As for your future widgets…we’ll see once you write ‘em. ;P
Flickr Badge + Lightbox2 Sample here.
http://feeds.feedburner.com/~r/emotion/~3/10038662/11
[…] Elliot Swan | Custom Flickr Badge API Documentation “ere 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.” (tags: flickr javascript api css badge) […]
[…] Yesterday I posted about my Custom Flick Badge. Today Elliot Swan had to go one better and post a documentation for the whole API! The documentation is awesomely useful, I intend to have a good read later tonight and then use it here. […]
[…] Custom Flickr Badge API Documentation (tags: web design) […]
[…] Elliot Swan | Custom Flickr Badge API Documentation […]
[…] Elliot Swan | Custom Flickr Badge API Documentation (tags: javascript flickr) […]
am i an idiot or something? i can’t seem to get my css to latch onto the outputted javascript. Is there a trick?
[…] So I’d got a wordpress theme working quite happily - but now I wanted photos, books and ma.gnolia links. Implementing the Flickr badge was quite easy, thanks to Elliot Swan’s Custom Flickr Badge API Documentation, the ma.gnolia links were much more straightforward once I’d found the linkroll output html, and the Librarything widget was more of a challenge, but I got there in the end. I also customised my own feed icon for the bottom right hand corner - I didn’t think orange would ‘go’. […]
ab.fab! thanks so much.
do they let you put in &l=cc or &s=int ?
that would be good - to have creative commons pictures and interesting too, like in the search box ..
Cool. Really helpful. What I’ve also been looking for is a tutorial on how to put your own background behind each photo thumbnail rther than the standard border. Probably easy but i’m not technically minded!
[…] Elliot Swan | Custom Flickr Badge API Documentation (tags: blog cool css javascript tips WebDesign flickr api badge Design) […]
This is awesome! Very mice tutorial.
[…] If you’re not satisfied with the typical “badge” photo display options offered by Flickr, check out Elliot Swan’s guide to customization. […]
Write a comment here.
Also, I want to show more than 10 photos at a time.. isn’t there a way?
Excellent tutorial. Thanks for sharing the info!
Thanks for the info. Exactly what I was looking for, but unfortunately, I have yet to get it to work with the tag parameter. I have added the user and tag to the parameter string, but cannot get the photos for the tag to display.
I checked the Flickr forums, and discovered many other Flickr users have been unable to display photos by tag using the “tag” parameter.
url
[…] Slidoo Ama senin sağ sütündaki galerin farklı diyorsanız bu sitede en üstteki scripti kullanabilirsiniz. İnce ayarlar içinse buradaki tabloya bir göz atın. Kategori: Fotoğraf | Saat: 8:44 am | del.icio.us |digg | […]
Nice tutorial but how the heck do you use a user set? I’ve tried 20 ways and nothing works.
Here’s what I have, I get to source and…
source=user_set now what? do I add _id=the set number or what?
[…] Custom Flickr Badge API Documentation | Elliot Swan (tags: flickr photography api) Posted by roedward Filed in Uncategorized […]
I managed to get two rows of photos by floating them, but I’m sure there are other ways to do this. It would have been nice if flickr offered blocks of photos, 3×3 for example. Their list of attributes is even cryptic.
Here’s where I put my badge:
http://www.geocities.com/naukeagstudio/flickr.htm
Thanks for the tutorial, though.
Damn! I was about to write something like this when I saw the link to this in a Help Forum topic.
At least I get to add a new link to my collection.