[jQuery] Gadżet Blogger'a z fotkami z Flickr'a

Stworzyłem mały gadżet do bloggera, za pomocą którego można tutaj obejrzeć moje fotki z galerii flickr'owej. Skorzystałem z ogólnodostępnych dobrodziejstw: API Flickr'a, jQuery'ego no i możliwości tworzenia własnych gadżetów na bloggerze.

Gadżety mają bardzo prostą konstrukcję:

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="hello world example" /> 
  <Content type="html">
     <![CDATA[ 
       Hello, world!
     ]]>
  </Content> 
</Module>

Więcej na ten temat można poczytać na Gadgets API. Gadżety można tworzyć przy użyciu HTML'a i JavaScript'u - tak więc z jQuery'ego również można skorzystać. ;)

Za pomocą jQuery'ego do API Flickr'a można się dostać w prosty sposób:

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=xxx&user_id=xxx&format=json&jsoncallback=?", function (data) {});

Gdzie xxx to klucz za pomocą, którego korzystamy z API (można go wygenerować na stronach Flickr'a) i nazwa konta w galerii (np.: 7555853@N02).

Wyciągnięcie 6 ostatnich fotek z galerii użytkownika 7555853@N02 wyglądać może w ten sposób:

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=xxx&user_id=7555853@N02&extras=views%2Curl_sq&page=1&per_page=6&format=json&jsoncallback=?", function (data) {
     var div_fl_photos = $("<div class='fl_photos'></div>");
     $.each(data.photos.photo, function (i, p) {
     var img = $("<img/>").attr("src",p.url_sq).attr("height",p.height_sq).attr("width",p.width_sq).attr("class","fl_photo")
         var link = $("<a/>").attr("title", p.title + " (odwiedzin: " + p.views + ")").attr("target", "_blank").attr("href", "http://www.flickr.com/photos/" + p.owner + "/" + p.id).append(img);
     $(div_fl_photos).append(link);
     });
     $("#fl").text("");
   $("#fl").append(div_fl_photos);
});

Za pomocą tego krótkiego kodu jQuery łączymy się z Flickr'em, pobieramy dane o sześciu ostatnich fotkach danego użytkownika (za pomocą metody flickr.people.getPublicPhotos)i wrzucamy wszystko w div'y. :)

W API Flickra znaleźć można wiele innych ciekawych metod, dzięki którym można wyciągnąć różne ciekawe informacje.