Notes on a web journey

posted on: 20 April 2008

Flickr badge solved

filed under: @ 10:31:41

After almost three weeks I found the solution to the Javascript Flickr badge...

After Roger Johansson's help I kept looking around and ended up checking out
the Flickr API (I knew about it but I didn't think of it as the logical solution until then..). Anyway, I soon found out that I could get an XML document back with all the info needed to build a flickr badge. But...XMLHttpRequest cannot do cross scripting (XSS) because of security reasons and my php set up did not allow me to parse XML or send a call with XML-RPC. I still didn't want to have to change much to attain the result I was looking for.

Then I found an article on Vitamin by Cameron Adams of The Man in Blue.

I could get a response in JSON, no XSS problems and still be able to parse it with plain old Javascript.

I still had some problems and Cameron (thanks again) answered a question I asked him which pointed me in the right direction (code lines that shouldn't be broken marked with >>) :

function jsonFlickrApi(rsp){
if (rsp.stat != 'ok') return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
for (var i=0; i<rsp.photos.photo.length; i++){
var p = rsp.photos.photo[i];
var a = document.createElement('a');
a.setAttribute('href','http://www.flickr.com/photos/13067897@N00/'+p.id+'/');
a.setAttribute('title',p.title);
var img = document.createElement('img');
img.setAttribute('src','http://farm' +p.farm+'.static.flickr.com/'+p.server+'/' >>
+p.id+'_'+p.secret+'_t.jpg');
img.setAttribute('alt',p.title);
a.appendChild(img);
div2.appendChild(a);
}
var target = document.getElementById('badge');
if(!target) return;
div.appendChild(div2);
target.appendChild(div);
}
function call_flickr(){
var newScript = document.createElement('script');
newScript.setAttribute('src','http://api.flickr.com/services/rest/?method >>
=flickr.people.getPublicPhotos&api_key=xxxx& >>
user_id=idididi&per_page=8& >>
page=1&format=json&callback=jsonFlickrApi');
var obj = document.getElementById('write');
if(!obj) return;
obj.appendChild(newScript);
}

On the page I now have two empty, unstyled divs. The first has an ID of write and the other of badge. I build the container divs with Javascript and then append the result inside the badge div.

It validates and now, if Javascript is disabled, I just get nothing which is exactly as it should be!!

tags:

CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
MiniSite
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript