Flickr Feed auf Webseite anzeigen

In diesem Artikel werden zwei einfache Möglichkeiten vorgestellt, wie Flickr Bilderstreams auf einer Webseite angezeigt werden können. Für die beiden Beispielen kommt Javascript zum Einsatz (es ist keine Serverseitige Programmierung notwendig), wobei für das zweite Beispiel jQuery als Engine für den Ajax-Request verwendet wird.

Beispiel 1

Fügen Sie lediglich die folgende Zeile an der Stelle ein, wo Sie die Bilder anzeigen möchten, ersetzen Sie die [User ID] und passen Sie ggf. Parameter wie count oder display an.

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=[User ID]"></script>

Beispiel 2 – mit jQuery

Um den Feed zu Ihren Bilder zu finden, müssen Sie sich bei Flickr einloggen und auf den RSS FEED Button auf der Hauptseite klicken. Die Url sollte wie die folgende aussehen:

http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=rss_200

!Wichtig: Sie müssen das Format des Feeds auf JSON ändern. Dazu müssen Sie einfach das Ende der Url von “=rss_200″ auf “=json&jsoncallback=?” umbenennen. Der neue Link müsst dann so aussehen:

http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=json&jsoncallback=?

Fügen Sie das folgende Script in den Head Ihrer Webseite ein und passen Sie die User ID an. In der CSS Datei muss die Klasse .flickr_image und das Element #flickr_images definiert werden.

jQuery(document).ready(function() {
  jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=json&jsoncallback=?", function(data){
    jQuery.each(data.items, function(i,item){
      if(i<6){ // Ändern Sie diese Nummer um mehr oder weniger Bilder anzuzeigen
        jQuery("#flickr_images").append('<div class="flickr_image" id="flickr_image'+i+'"><a href="'+item.link+'"><img src="'+item.media.m+'" alt="A photo on Flickr" title="'+item.title+'" height="75" width="75"></a></div>');
      }
    });
  });
});

Fügen Sie die folgende Zeile dort ein, wo die Bilder erscheinen sollen.

<div id="flickr_images"></div>

Fazit

Die zweite Möglichkeit ist meiner Meinung nach die effizientere, denn durch den Ajax-Request wird die Ladezeit der Webseite nicht erhöht.