projects
recommending
reviewing
events
Subscribe...
Posts
Flickr / Yahoo! Mail API beta Photo Postcard Hack
- created
- 10/5 6:26 PM
- content
tags:
Last Friday Leah IM'd me at the last minute and "tastefully hinted" (her words) that she was looking for help with transit directions from the East Bay over to Yahoo Hack Day. It turned out that I was driving down, despite having just flown in earlier that day from a wonderful trip to Japan where I had the honor of speaking at the New Context 2006 conference organized by Joi Ito and Digital Garage (much thanks to Fumi and Yuki as well!), and could use a carpool partner.
Suffice it to say we got to Yahoo's main campus in Sunnyvale in short order, registered, made the rounds saying hello to all the familiar friendly faces and stuffed our faces with the extra pizza in the cafeteria. After settling into the VIP coding area squatted by the Ruby Red Labs folks and wondering what the heck we were going to do, Leah exclaimed, wouldn't it be cool if you could see a Flickr photo that you like and send it to someone like an eCard. In fact, we couldn't figure out why Flickr hadn't already done this, except for the obvious only 24 hours in a day problem. I knew Greasemonkey could modify any webpage, like add a "Send Postcard" button to Flickr, even though I'd never written a user script. We also found out that the Yahoo Mail team had just released a beta version of their API so we realized all the pieces existed to build this.
Friday night we totally got the user interface working, and thanks Leslie's graphic design skillz, with icons that perfectly matched the rest of Flickr's cute little buttons on top of a photo (note the new "POST CARD" button on the far right):
Check out the cute pink highlights in the hover state:
Thanks to Firefox's built-in "View Selection Source" control-click menu command, I was able to reverse engineer the markup and HTML class names that Flickr uses for their drop down dialogs and thus immitate their look and feel. Leah wrote javascript (user script) to both create the button on the page, and create the script to create the "Send photo postcard:" dropdown dialog as well:
Sometime in the early AM hours we code completed the user interface and decided to catch a few hours of sleep before building out the back end.
Saturday morning Leah found out that there were actual prizes at stake for Yahoo Mail API hacks (iPods!), and so we got serious. Thanks to immeasurable help from Ryan Kennedy of the Yahoo Mail team, we got the backend piece barely working on Saturday and added little bits like an alert letting the user know that their photo had been sent:
We signed up just as we got everything working as #45 on the Hack Day contest submission wiki page. Then we anxiously waited our turn.
Leah spoke while I ran the demo. The network was reaaaaalllllllllyyyyy slow.
We had timed our demo for 60 seconds, and barely got it done in the allotted 120 seconds.
Phew. We were so relieved to have successfully finished and demonstrated a hack: our first Greasemonkey hack, first Flickr DOM walking/scraping, and first Yahoo Mail API app, that we just sat back and enjoyed watching the rest of the demos. But surprise surprise, our simple little hack was deemed worthy of 2nd place Yahoo Mail API hack! Look at us and our shiny new shared-custody 30 gigabyte iPod!
We've posted the hack at Leah's website and have open sourced it under a Creative Commons Attribution 2.5 license. Note that in the interest of showing what actually won, what's posted at that URL is raw and unchanged from what we demonstrated. We know it is suboptimal, we know it could use cleanup and improvement. We plan to do a cleanup pass and also put out the PHP used for the Mail API piece.
Instructions / requirements / caveats:
- Get Firefox 1.5 or later
- Greasemonkey - download, install, and relaunch Firefox
- Go http://leahculver.com/hacks/photopostcard.user.js and click the INSTALL button in the header that drops down just above the page.
- Be logged into your Yahoo! Mail account (currently you must have a premium Yahoo! Mail account, and for the moment your account must be on the one server that is supporting the Yahoo! Mail API - I'll update this when that restriction is removed).
- Go to Flickr and find an interesting photo.
- Click the "POST CARD" button, enter a friend's email address, a short message and click "Send".
- That's it!
Thanks again Yahoo for throwing an awesome event. We had a blast. See my photos, and everyone's photos.
P.S. Hey Flickr team, it would be really cool if you could add this feature natively and just have it work with your built-in email system. You're welcome to use any/all of our art/code however you wish (if CC-by-2.5 is not enough for your lawyers) - all Leah and I ask for in exchange are "lifetime/neverending" Flickr Pro and Yahoo! Mail premium accounts. :)
- Leah Culver on Flickr and "leah.culver" at Yahoo.
- Tantek Çelik on Flickr and "tantek" at Yahoo
Thanks!
- View blog reactions
identity facets
people
news filters
badges
- © 1996-2006,
Tantek Çelik
(add to address book), All Rights Reserved.
- Valid: