fun with flickr badges

maybe you've seen 'em on other sites. or maybe you've only just noticed the new one on my blog, and it's the first you've ever seen. it's a little box, usually a sidebar element, often titled something like "my latest photos". inside it are automatically generated thumbnails of the latest photos from that blogger's flickr photostream. in flickr terminology this is called a badge.

for users who don't know a lick of html, flickr has a tool that will generate code for you to paste into your website or blog template. but if you know html, css, and ideally javascript, you can customize them quite a bit.

there are two types of flickr badges: static html badges, like the one that i currently have in my sidebar, and flash badges, which are animated and fancier. eliot swan documented the html badge API here. using eliot's documentation, i had no trouble setting up the badge in my sidebar, stripping out all of flickr's css and writing my own so that my thumbnails are two across rather than purely horizontal or vertical. (i've also set the number of thumbnails to 6, which is not an option in the flickr badge creator.)

update!!!! the following does not appear to be a viable solution, as some of the values (like magisterLudi) change daily. this might be fun to play around with, but it's not a good way to implement a flickr badge.

but dj empirical emailed me about getting a flickr badge for his myspace page. unfortunately, the default flickr badges don't work on myspace. this is because the badge code depends on javascript, and apparently myspace now blocks javascript. fortunately, there is a solution, as discovered by user gothcandy.

gothcandy looked at the code for the flash badge and located the url for the iframe, which will have a format like this (with no spaces):

http://www.flickr.com/apps/badge/badge_iframe.gne? zg_bg_color=000000&zg_person_id=12978266%40N00

zq_person_id will be your flickr user id number. your "friendly name" will not work here. if you enter this url into the address bar, hit enter, and the view your source—and if you can read javascript syntax—you can piece together your own custom code to embed a flickr flash badge onto your myspace (or other page) without using javascript. and even better, you can customize it quite a bit more than you can using the flickr badge creator.

note: the original javascript includes a section that checks the user's operating system and browser version, and if the browser is too old to support flash, the flash code will not be sent to the browser. obviously, if we don't use the script, this browser-checking won't happen. this could result in people who are using super-old browsers getting a bunch of ugly code or other weirdness when they view your myspace page. if you're a "serious" web designer, you probably care about such things, but for the sake of this post, screw those people with old browsers. they should upgrade.

after you pick apart the pieces of the script, the format for the url for the SWF file goes something like this (of course, it should all be on one line, with no spaces or breaks):

http://www.flickr.com/apps/badge/flashbadge.swf?host=http://www.flickr.com
&bg_color=ffffff [this is a hex value. don't use a #. this is not the color of the line in between thumbnails; this is the background color outside of that. if you do your math right, you won't even see this color... unless you want to. this can be safely left out.]
&cols=3 [this is the number of columns.]
&rows=4 [this is the number of rows.]
&wh=37 [this is both the width and height settings for the thumbnails, in pixels. thumbnails are square. i don't know if these can be set independently.]
&swapInterv=3 [swap interval. this sets how frequently thumbnails are replaced. default is 3. a setting like 0 or 1 is very fast.]
&loadInterv=120 [load interval. i haven't figured out what this does.]
&transition=bigThenSmall [default is bigThenSmall, so you would thinkg smallThenBig would also work, but it doesn't seem to do anything. beyond that, who knows if there are any other values?]
&nsid=stallio [if you want the thumbnails pulled from your photos (rather than from a group, or from everyone), put your user id here. your "friendly name" will work here, if you have one. ]
&scope=0 [not sure what this does.]
&favorites=0 [not sure what this does.]
&tags=databending [if you want your badge to only display photos using a certain tag, that goes here. i'm using my databending tag here. if you don't want to use this feature, you can safely leave this part out.]
&tag_mode=any [if you use the previous feature, this will be any. if not, it will be all. but if you're not using it, you can actually leave it out.]
&group_id=52241691728@N01 [if you want your badge to show photos from one of your groups, the group id goes here. if not, you can leave this out. the group's "friendly name" will not work here. the group id here is for the glitch art pool.]
&text= [i don't know what this is for. it is blank by default, and can be safely left out. but if you put something here, maybe something would happen.]
&set_id= [if you want your badge to only show thumbnails from one of your sets, the set id goes here.]
&context=in/pool-glitches/ [you'll need to use this setting if you're pulling photos from a group. replace the in/pool- name as necessary. again, this value is for the glitch art pool.]
&v=1.13 [no idea. this can be safely left out, but since i'm not sure what it does, you should probably leave it in.]
&magisterLudi=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx [this is a 32-bit hex value. i don't know what it means, but its value seems to expire every 24 hours. i've x'ed out the value here. i've you're savvy enough to use this information, you can retrieve this value yourself... but you'll have to fix this value often to get much use out of this.]
&auth_token= [for some reason, this has no value. but don't take it out or the code will break. it's important.]
&auth_hash=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx [another 32-bit hex value. this can be safely left out.]
&flickr_secret=xxxxxxxxxxxxxxxx [a 16-bit hex value. this too can be safely left out.]

knowing all this, let's have some fun. i haven't had time to play around with the intervals or transitions. but we do know how to change the layout: columns, rows, and the width/height of the thumbnails. there is a 1px margin in between photos, so the width of the box will be [(wh+1)*cols]-1 and height will be [(wh+1)*rows]-1.

here's a 5x5 badge of 100px thumbnails from the glitch art pool. overall width/height is 504px.

kind of blurry at that size, but you get the idea.

here is a 10x4 badge (50px each) of my photos tagged databending. swap interval has been set to 1, and load interval to 20:

and just to get really silly, here is a 20x6 block of 20px thumbnails of all public photos tagged with the tag dada (swap interval 5, load interval 180):

if you decipher any of the properties here that i haven't explained, please leave a comment for the edification of any future readers.

final note: of course, once you have a properly formed url for the swf file, you still need to embed that swf into something. but if you're savvy enough to understand the above, you can probably do this on your own. on myspace i used use <param> and <embed> tags, but here on my blog i used iframes, because those params mess up my blog design.

update: the bottom two badges don't seem to work in IE. i'm not sure why... it could be something related to all those hex values. i don't know at this point. all i know is at the time of this writing (5am!), all three work in firefox, but only the top one works in IE. i'm going to bed. maybe i'll figure it out tomorrow. these now work in IE. the problem was that i had a # in the bg_color field.

update: these had seemingly stopped working by 11pm. i've entered a new value for magisterLudi, which fixed them. it could be a coincidence, just bad timing. or it could be a sign that these magisterLudi keys expire quickly. so i don't know how quickly they expire, but if they expire daily (or even weekly/monthly), then this isn't a very viable solution.

update: yet again, these were dead by 10pm. it seems magisterLudi values expire within 24 hours or so, which means that the knowledge here isn't particularly useful in itself (unless you feel like fixing your code everyday). shucks. though perhaps someone with more knowledge than me could find a workaround.¶