I put this page together to keep track of all the cool JavaScript nonsense I've put together recently.

JavaScript Flickr API

For the internal Yahoo hack day, I wrote a hack that allows you to use the Flickr webservices API from JavaScript, with no backend scripting, such as PHP. Initially, I took the XML returned by the raw Flickr API and converted it to JSON manually. Since I wrote the hack, Flickr has released an option in the API to get JSON results back, rather than stupid XML. I've since updated my JavaScript API to handle such a situation, and I'm going to post it here.

Before I link to the code, it's important to note that unless you're the Flickr team using this API on the flickr.com domain, the script won't work immediately - this is because of browser security settings pertaining to cross-domain XMLHttpRequest calls, that is, you cannot open an XMLHttpRequest to any domain other than the one serving the page you currently have open.

For more info on this, see the Yahoo Developer Network documentation. I handled the cross domain problem using Premshree's hack, (using Apache mod_proxy and mod_rewrite), but there are other ways to handle it, such as a PHP proxy script or dynamic JavaScript embedding.

As I said, there are two ways to do it:

• Use a proxy script on the domain serving the page
• Use mod_rewrite/mod_proxy on the apache server on the domain serving the page

• flickr.proxy.js - for the proxy way to do it
• flickr.js - for the mod_rewrite way to do it

  So here's an example of how to use the API:

  //the first param is your Flickr developer key
  //please substitute your own key here
  var flickr = new FlickrAPI('cf0fca0cd8c6058a2d625f50c42ba08d', ''); 
  var params = new Array();
  params['per_page'] = 15; 
  params['api_key'] = 'cf0fca0cd8c6058a2d625f50c42ba08d'; 
  var json = flickr.callMethodJSON('flickr.interestingness.getList', params); 
  var obj = eval('(' + json + ')');     
  var photos = obj.photos.photo;   
  for(i = 0; i < photos.length; i++){    
      url = flickr.getPhotoURL(photos[i]);     
      document.write('<img src=' + url + '>my pic</img>'); 
  }
  

  Example w/ PHP Proxy

  This is the easiest way to get things working. Instead of using the other flickr.js file, use this one flickr.proxy.js that points us to a PHP proxy script, instead. You'll need a proxy script, which I have an example of below.

  So the exact recipe is:

  • use this javascript file in the client
  • have the proxy sitting on your server (it's just gonna pass thru http requests). I have provided an example one, which you can find here. Remember, you probably want this file to have a .php extension on it.

  Here is a working example:

  <script type=text/javascript>
  var flickr = new FlickrAPI('cf0fca0cd8c6058a2d625f50c42ba08d', '');
  var params = new Array();
  params['per_page'] = 15;
  params['api_key'] = 'cf0fca0cd8c6058a2d625f50c42ba08d';
  var json = flickr.callMethodJSON('flickr.interestingness.getList', params);
  var obj = eval('(' + json + ')');
  var photos = obj.photos.photo;
  for(i = 0; i < photos.length; i++){
      url = flickr.getPhotoURL(photos[i]);
          document.write('<img src=' + url + '></img>');
  	}
  </script>
  

  That code will show these images in your page:

  Example w/ mod_rewrite & mod_proxy

  First, you can use the code above in your client page. Make sure to switch on the api key (first arg to FlickrAPI constructor.) Next, you'll need to use any of the domain-security workarounds I linked to above. If you want to use the one that uses mod_rewrite and mod_proxy, which I think is the quickiest and easiest way, then you'll need to make the following changes.

  First, create a mod_rewrite entry in your .htaccess file, that looks a little something like this:

  RewriteEngine on
  RewriteRule ^\/rest\/(.*)$ http://api.flickr.com/services/rest/$1 [P]
  

  What does all this mean?

  • RewriteEngine on - turn on mod_rewrite
  • RewriteRule ^\/rest\/(.*)$ http://api.flickr.com/services/rest/$1 [P] - This is the most important thing. This says, match the HTTP request coming in, starting with "/rest/", and capture everything after that. Then, rewrite the url to "http://api.flickr.com/services/rest/(everything we just captured after the "/rest" part of the request. Essentially, this will pass thru the request for "/rest/xyz" to api.flickr.com/services/rest/xyz. The most important part is he [P], which tells mod_proxy to come in and act as a pass-thru for this url, rather than actually sending you to it. We want this because we just want to fetch contents from api.flickr.com/..., not actually do any redirects or anything like that.

  Unfortunately, I can't show you this working at the moment because Dreamhost doesn't enable mod_proxy for me. But trust me, this works! However, as I mentioned above, you can use a PHP proxy script to do this too. To accomplish this, read the section below.

  So, I've also been messing around with Scriptaculous and Prototype. Here's some examples of how to use them.