SOS

Shane O'Sullivan's technical blog… really ties the room together

Specifying the callback function with the Flickr JSON APIs

Posted by Shane O'Sullivan on September 13, 2007

Flickr is a photo sharing website that has a very flexible set of APIs that other applications and websites can use to access the photos it stores. This post shows you how to specify a callback function that Flickr can call to pass your web application information on photos it stores.

Quite a while ago I looked into the Flickr APIs for a website I was writing. Looking at the service that returns photo data in JSON (Javascript Object Notation), I noticed that it did so by calling a predefined function, jsonFlickrApi, passing in the data to that function. This seemed to be an obvious weak spot, since if more than one widget on a page were accessing the Flickr REST services, they would clash with each other, possibly receiving each others data. Obviously not a good thing.

Cut to today. I’ve been working on a JavaScript data store that operates against the Flickr REST services for the Dojo Ajax Toolkit, and had another look at the Flickr APIs. Now, whether I missed it before (doubtful, as I looked specifically for it), or the fine Flickr folk have listened to complaints (very likely), but there is now a parameter that can be passed to the Flickr API that specifies the callback function to use when the data is retrieved from Flickr.

All you have to do is pass a parameter jsoncallback to Flickr, with the name of the function you want to be called with the data, and thats it.

E.g. if I had a function:

function myCallbackFunction(data) {

alert(“I received ” + data.photos.photo.length +” photos”);

}

I could then specify a <script> element in my HTML page to retrieve the data in a cross site manner (since you can’t make cross site XmlHttpRequest calls), like so:

<SCRIPT type=”text/javascript” src=”http://www.flickr.com/services/rest/?format=json&amp;jsoncallback=myCallbackFunction
&method=flickr.people.getPublicPhotos
&api_key=8c6803164dbc395fb7131c9d54843627
&user_id=44153025%40N00&per_page=1″>

</SCRIPT>

Note the jsoncallback parameter in the src attribute. This results in JavaScript similar to:

myCallbackFunction({“photos”:{“page”:1, “pages”:489, “perpage”:1, “total”:”489″, “photo”:[{“id”:”1352049918″, “owner”:”44153025@N00″, “secret”:”5636009306″, “server”:”1111″, “farm”:2, “title”:”The Liffey Panorama”, “ispublic”:1, “isfriend”:0, “isfamily”:0}]}, “stat”:”ok”});

being called.

Thanks Flickr! Nice to see them listening, and continually improving. This will make web applications built on Flickr much more robust, without the need of ridiculous hackery to get around unnecessarily difficult APIs. See http://www.flickr.com/services/api/response.json.html for the offical info on JSON responses.

Keep an eye out for my dojox.data.FlickrRestStore being release some day soon!!
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

About these ads

5 Responses to “Specifying the callback function with the Flickr JSON APIs”

  1. Eamon said

    gift! thanks for the info. I’ve been looking for something like this as I am cooking something up with jQuery Moodle and flickr at the moment.
    Using javascript to access the flickr api is unbelievably simple! Goodbye SOAP XML ect.

  2. Hi Eamon,

    You’re welcome, glad to help a fellow Irishman :-)

    Shane

  3. I Love JQuery :)

    $(function(){
    $(‘#ajaxer’)
    .click(function(){
    $.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=any&format=json&jsoncallback=?”,
    function(data){
    $.each(data.items, function(i,item){
    $(“”).attr(“src”, item.media.m).appendTo(“#images”).css(“margin”, “1em”);
    if ( i == 14 ) return false;
    });
    });
    $(‘#throbber’).append(”).css(‘text-align’, ‘center’);
    });
    $(‘#images’).ajaxComplete(function(){
    $(‘#loading’).replaceWith(‘ Go Back ‘);
    $(‘#state, #ajaxer’).css(‘display’, ‘none’);
    });
    });

     

    JSON Ajax Flickr Stuff Get Pics
    :)

  4.  

    JSON Ajax Flickr Stuff Get Pics

  5. Sorry for the mucho posting … Let me try this with <code> tags … :P

     

    JSON Ajax Flickr Stuff Get Pics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: