In case you don’t know it yet, Flickr is great. It is a lot of fun to upload, tag and caption photos and it is really handy to get a vast network of contacts through it.
Using Flickr photos outside of it is a bit of a problem though. There is a Flickr API, and you can get almost every page as an RSS feed, but in general it is a bit tricky to use Flickr photos inside your blog posts or web sites. You might not want to get into the whole API game or use a server side proxy script as you cannot retrieve RSS with Ajax because of the cross-domain security settings.
However, Flickr also provides an undocumented JSON output, that can be used to hack your own solutions in JavaScript without having to use a server side script.
- If you enter the URL http://flickr.com/photos/tags/panda you get to the flickr page with photos tagged “panda”.
- If you enter the URL http://api.flickr.com/services/feeds/photos_public.gne?tags=panda&format=rss_200 you get the same page as an RSS feed.
- If you enter the URL http://api.flickr.com/services/feeds/photos_public.gne?tags=panda&format=json you get a JavaScript function called
jsonFlickrFeedwith a parameter that contains the same data in JSON format
You can use this to easily hack together your own output by just providing a function with the same name. I wanted to make it easier for you, which is why I created the helper getFlickr for you to download and use.
getFlickr for Non-Scripters
Simply include the javascript file getflickr.js and the style getflickr.css in the head of your document:
<script type="text/javascript" src="getflickr.js"></script><link rel="stylesheet" href="getflickr.css" type="text/css">- Source: /code/flickr-photos-on-demand/links.txt
Once this is done you can add links to Flickr pages anywhere in your document, and when you give them the CSS class getflickrphotos they get turned into gallery links. When a visitor clicks these links they turn into loading messages and show a “popup” gallery with the connected photos once they were loaded. As the JSON returned is very small it won’t take long. You can close the gallery, or click any of the thumbnails to view a photo. Clicking the photo makes it disappear and go back to the thumbnails.
Check out the example page and click the different gallery links to see the results.
Notice that getFlickr works with Unobtrusive JavaScript as when scripting is disabled the links still get to the photos on Flickr.
getFlickr for JavaScript Hackers
If you want to use getFlickr with your own JavaScripts you can use its main method leech():
getFlickr.leech(sTag, sCallback);- Source: /code/flickr-photos-on-demand/leech.txt
sTag- the tag you are looking for
sCallback- an optional function to call when the data was retrieved.
After you called the leech() method you have two strings to use:
getFlickr.html[sTag]- contains an HTML list (without the outer
ULelement) of all the images linked to the correct pages at flickr. The images are the medium size, you can easily change that by replacing _m.jpg with _s.jpg for thumbnails. getFlickr.tags[sTag]- contains a string of all the other tags flickr users added with the tag you searched for(space separated)
You can call getFlickr.leech() several times when the page has loaded to cache several result feeds before the page gets loaded. This’ll make the photos quicker for the end user to show up. If you want to offer a form for people to search for flickr photos and display them immediately you can use the following HTML:
<form onsubmit="getFlickr.leech(document.getElementById('tag').value, 'populate');return false"><label for="tag">Enter Tag</label><input type="text" id="tag" name="tag" /><input type="submit" value="energize" /><h3>Tags:</h3><div id="tags"></div><h3>Photos:</h3><ul id="photos"></ul></form>- Source: /code/flickr-photos-on-demand/form.txt
All the JavaScript you’ll need (for a basic display) is this:
function populate(){var tag = document.getElementById('tag').value;document.getElementById('photos').innerHTML = getFlickr.html[tag].replace(/_m\.jpg/g,'_s.jpg');document.getElementById('tags').innerHTML = getFlickr.tags[tag];return false;}- Source: /code/flickr-photos-on-demand/populate.txt
Easy as pie, enjoy!
Check out the example page and try the form to see the results.
Comments
03/12/2006
Nice … always wanted to integrate flickr into my site … this my provide me with some incentive. and btw good job on the writing …
03/12/2006
Great idea :)
wishes,
Samiha Esha :)
03/12/2006
Pretty neat idea…. I have been wanting to integrate flickr into my own site for a while and recently came across this cool script at http://www.naggle.com/index.php?/articles/comments/flickrbox/ which allows you to display and preview your own flickr photos directly on your own site. I can see that getFlickr would greatly compliment this…. two thumbs up!!
05/12/2006
Chris, this is great. I’m a bit disappointed that Flickr doesn’t offer RSS feeds on sets, so this method can’t be used to pull in sets, only tags – but that’s obviously not under your control (Is it?)
07/12/2006
Christian,
I tried this out on Firefox 1.5.0.8 and Firefox 2.0 under Windows XP, where it worked great.
However, in IE and Opera, I’m getting some delays in display. In Opera 9, the file name of the image displays before the thumbnail appears. In IE6 and IE7, a gray bar appears across the row before the thumbnails are displayed.
27/12/2006
It seems to be a really cool and simple script…good work…But why does only 20 photos get displayed always ? Is there a way to display all the photos for that tag either in multiple pages or on the same page?
29/12/2006
Thanks for another highly useful and succinct tutorial. For people, like me, who are easily confused it would be handy to have a function that communicates a ‘nothing found’ message when no tags are found.
03/01/2007
Have just discovered the site – well impressed :)
Commenting is closed for this article.