Flickr mit Composite C1 nutzen

Nachdem wir im letzen Artikel die Einbindung von Facebook-Alben gezeigt haben, geht es in diesem Post um die Nutzung von Flickr in Composite C1.

Composite HQ hat zu diesem Zweck ein Package entwickelt, welches wir hier nutzen werden.

Wie beim Facebook-Package auch, installieren wir vorab das Slimbox-Package, welches die automatische Galeriedarstellung der Bilder auf unserer Website ermöglicht:

Anschließend installieren wir nun das eigentliche Flickr-Package ‚Composite.Media.ImageGallery.Flickr‚:

Für die Nutzung von Flickr ist ein sogenannter API Key notwendig, den wir im Bereich Inhalt / Website-Elemente mit einem Namen hinterlegen, um ihn später im Funktionsaufruf als Parameter nutzen zu können:

Der API Key selbst kann unter http://www.flickr.com/services/apps/create/apply/ generiert werden.

Für unsere Flickr-Galerie legen wir im Backend eine neue Seite an, auf der die Bilder später erscheinen sollen:

Nun können wir mit der Einbindung der einzelnen Funktionen des Packages beginnen:

Photostream

Um uns den sogenannten Photostream, also die neuesten Bilder eines Nutzers anzuzeigen, fügen wir auf der neu angelegten Seite die Funktion ‚Composite.Media.Flickr.Photostream‘ ein:

Als Parameter für diese Funktion übergeben wir zunächst den zuvor unter Website-Elemente definierten API Key:

Weiterhin benötigen wir die Flickr User ID als Parameter. Diese muss jedoch zuvor für den entsprechenden Account ermittelt werden.

Ich empfehle zu diesem Zweck die Website http://idgettr.com, mit deren Hilfe wir aus der Adresse unseres öffentlichen Photostreams die User ID ermitteln können:

Anschließend übergeben wir die Flickr User ID an unsere Funktion:

Nachdem die Funktion eingefügt und die Seite gespeichert und veröffentlicht wurde, erscheint der Photostream des Flickr-Nutzers in Form einer anklickbaren Galerie auf unserer Website:

Favoriten

Die nächste Funktion ermöglicht das Anzeigen der sogenannten Favoriten, also der als solche markierten Fotos eines Flickr-Users.

Wir fügen dazu die Funktion ‚Composite.Media.Flickr.Favorites‘ auf unserer Seite ein:

Wieder übergeben wir API Key und User ID als Parameter an die Funktion, fügen diese ein und veröffentlichen die Seite erneut:

Jetzt sehen wir die Favorites meines Flickr-Accounts auf unserer Seite – da ich bislang noch keine angelegt hatte, habe ich beispielhaft einige Fotos anderer User zum Thema Fahrräder als Favoriten in meinem Flickr-Account markiert:

Übersicht aller Alben

Bei Flickr können die Fotos in Alben organisiert werden. Um nun alle Alben eines bestimmten Nutzer darzustellen, fügen wir die Funktion ‚Composite.Media.Flickr.PhotoSets‘ auf unserer Seite ein:

Neben den obligatorischen Parametern API Key und User ID können wir in dieser Funktion zusätzlich noch definieren, ob Kommentare anderer Flickr-Nutzer zu den einzelnen Fotos dargestellt werden sollen:

Nach dem Einfügen der Funktion und dem Veröffentlichen der Seite erhalten wir eine Übersicht aller Alben des angegebenen Flickr-Nutzers:

Bilder eines einzelnen Albums darstellen

Um nur Bilder eines einzelnen Albums darzustellen, benötigen wir die Funktion ‚Composite.Media.Flickr.PhotoSets.Photos‘.

Zusätzlich zum API Key müssen wir jetzt die Set ID des gewünschten Albums definieren

Zur Ermittlung dieser ID lassen wir uns in unserem Flickr-Account das entsprechende Album anzeigen und kopieren den letzten Teil der Album-URL in die Zwischenablage – dies ist die Set ID:

Nun fügen wir die Funktion ein:

Neben dem API Key fügen wir jetzt noch die Set ID aus der Zwischenablage als Parameter ein:

Als Ergebnis erhalten wir nach dem Einfügen der Funktion und dem erneuten Veröffentlichen der Seite eine Galerie mit unserem gewünschten Flickr-Album:


Fazit

Neben Facebook ist auch Flickr eine effektive und komfortable Möglichkeit, Bilder auf einfache Art und Weise zu hosten und auf der eigenen Website mit Composite C1 für Galerien zu nutzen.

Ein Gedanke zu “Flickr mit Composite C1 nutzen

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s