Using YUI Get Utility to consume Flickr API

I wanted to pull photos from a Flickr account onto a site. The Flickr API is awesome and there’s a ton of libraries out there for using it. Unfortunately, cURL isn’t currently installed on the server, so the PHP libraries won’t work for this case.

So I figured I’d give the YUI Get Utility a try. The Get Utility provides a mechanism for attaching script and css resources – including cross-domain resources – to the DOM after the page has loaded. And this has worked really well.

Here’s what I did:

  1. Included the following YUI scripts:
    <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"><!--mce:0--></script>
    <script src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js" type="text/javascript"><!--mce:1--></script>
  2. Then fetch the Flickr feed in JSON format using the Get Utility.var
    objTransaction = YAHOO.util.Get.script(<url goes here>);

    Be sure that the Flickr REST call is set to output to JSON so that the Get Utility can consume it properly.  Append &format=json

  3. Then write a function to act on the JSON response from Flickr.  Here’s an example of taking the JSON response and outputting thumbnails of photos with links to the larger view:
    function jsonFlickrApi(rsp){ 
     
        if (rsp.stat != "ok"){
     
         alert('no data returned');
     
         return;
     
        }
     
        for (var i=0; i<rsp.photoset.photo.length; i++){
     
    		var photo = rsp.photoset.photo[i];
     
    		var container = document.getElementById('container');
    		var photosList = container.getElementsByTagName('ul');
     
    		// create elements
    		var photoItem = document.createElement('li');
     
    		var photoAnchor = document.createElement('a');
    		var photoImg = document.createElement('img');
     
    		// set attributes
    		photoAnchor.setAttribute('href', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg');
    		photoImg.setAttribute('src', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_s.jpg');
    		photoImg.setAttribute('width', '75');
    		photoImg.setAttribute('height', '75');
    		photoImg.setAttribute('alt', photo.title);
     
    		// append to DOM
    		photoAnchor.appendChild(photoImg);
    		photoItem.appendChild(photoAnchor);
     
    		photosList[0].appendChild(photoItem); 
     
    		}
     
        }
     
        var objTransaction = YAHOO.util.Get.script("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=<insert_your_api_key>&photoset_id=72157594235977414+&format=json&per_page=60");

View an example

Comments (2)