The Flickr web services were great, but just a little annoying in that to make them work in a web page I would always have to create wrappers on the server to perform the web service calls. I had to do this as if you’re in JavaScript you have no permission to perform a cross-domain XmlHttp call, and because if you’re not doing it in JavaScript you were on the server anyway.
The two biggest reasons I disliked this are that it added load to my server, and it added a dependency on the responsiveness of my server on the responsiveness of the Flickr servers.
That is now a thing of the past.
JSON is JavaScript Object Notation. It is a way of encapsulating within JavaScript a hierarchical object model and of populating that with properties, values and content.
It is documented here: http://www.json.org/ and is simply a joy to use.
All you need do is add a HTML script tag to your page with the SRC of that being the JSON web service that you wish to call, once the web service returns you have a JavaScript object that you can act on.
Because you can pull in JavaScript from across domains, this works across domains.
So I played around with it for half an hour last night and knocked out a demo. What the demo does is takes a username of a Flickr user (I’m “the boy on the bike”), looks up their Flickr Id, and then queries the most recent public photographs for that user and renders the thumbnails of them.
Here is a demonstration (right click to download the source).
Here is the code that I used, remember to change the flickApiKey to use it on your site:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var totalThumbs = 16;
var thumbsPerRow = 4;
var flickrApiKey = '73cd571dac7cb8390a8e848ed7ab5c09';
var flickrUsername = '';
function jsonFlickrApi(rsp) {
if (rsp.stat != "ok") {
document.getElementById('flickrContainer').appendChild(
document.createTextNode('Flickr Error: ' + rsp.message)
);
return;
} else if (rsp.user) {
var flickrPhotoScript = document.createElement('script');
flickrPhotoScript.type = 'text/javascript';
flickrPhotoScript.src =
'http://www.flickr.com/services/rest/?format=json&api_key=' + flickrApiKey +
'&method=flickr.people.getPublicPhotos&per_page=' + totalThumbs +
'&user_id=' + rsp.user.id;
flickrUsername = rsp.user.username._content;
document.getElementById('flickrContainer').appendChild(flickrPhotoScript);
} else if (rsp.photos) {
for (var ii = 0; ii < rsp.photos.photo.length; ii++) {
var photo = rsp.photos.photo[ii];
if (!ii) {
var userAnchor = document.createElement('a');
userAnchor.href = 'http://www.flickr.com/photos/' + photo.owner + '/';
userAnchor.appendChild(document.createTextNode(flickrUsername));
document.getElementById('flickrContainer').appendChild(
document.createTextNode(totalThumbs + ' Most recent photos from ')
);
document.getElementById('flickrContainer').appendChild(userAnchor);
document.getElementById('flickrContainer').appendChild(
document.createTextNode('.')
);
document.getElementById('flickrContainer').appendChild(
document.createElement('br')
);
}
var anchor = document.createElement('a');
anchor.href = 'http://www.flickr.com/photos/' + photo.owner + '/' + photo.id + '/';
var img = document.createElement('img');
img.height = 75;
img.width = 75;
img.border = 0;
img.alt = photo.title;
img.src = 'http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_s.jpg';
anchor.appendChild(img);
document.getElementById('flickrContainer').appendChild(anchor);
if (ii % thumbsPerRow == thumbsPerRow - 1) {
document.getElementById('flickrContainer').appendChild(
document.createElement('br')
);
}
}
}
}
function flickrLoad() {
var flickrUserScript = document.createElement('script');
flickrUserScript.type = 'text/javascript';
flickrUserScript.src = 'http://www.flickr.com/services/rest/?format=json&api_key=' + flickrApiKey +
'&method=flickr.people.findByUsername&username=' + escape('the boy on the bike');
document.getElementById('flickrContainer').appendChild(flickrUserScript);
}
if (document.attachEvent) {
window.attachEvent('onload', flickrLoad);
} else if (document.addEventListener) {
window.addEventListener('load', flickrLoad, false);
}
</script>
<div id='flickrContainer' class='smallfont'></div>
</body>
</html>
Recent Comments