Flickr badge solved
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!!