5202

ein Blog über technische Fragen zu Blogger

Blogger: Picasa-Alben direkt einbinden

von

Vorbemerkung

Ich habe diesen Post schon mal vor einigen Tagen veröffentlicht, dann aber festgestellt, dass die Darstellung von dem 'Test' Picasa-Album nicht ganz einwandfrei erfolgt. Ich habe daraufhin den Post zurückgezogen und noch mal neu überarbeitet. Jetzt sollte es funktionieren. Ich bin kein Perfektionist, aber das über was ich schreibe, sollte natürlich schon funktionieren und auch einsetzbar sein.

Picasa-API

Meine letzten Posts gingen über den Blogger JSON-Feed und ich geb's zu, das ist für den 'normalen' Blogger wohl zu kompliziert und auch relativ uninteressant - wer liest schon seinen Feed aus? Die Blogger API hat aber auch sehr nützliche (und so gut wie unbekannte) Funktionen und eine davon werde ich hier vorstellen, nämlich die Picasa-Schnittstelle zu Blogger.
Wofür?
Wozu braucht man die Schnittstelle? Ihr kennt bestimmt das Picasa-Webalben Gadget, mit dem ihr ein Picasa-Album in die Sidebar oder den Post einbauen könnt - dieses Gadget benützt die Picasa-API. Das Gadget ist hässlich, arbeitet mit Flash (womit es auf mobilen Geräten nutzlos ist) und ist unkonfigurierbar - irgendwie nicht mein Ding, ich hab's ehrlich gesagt auch noch (fast) nirgendwo gesehen.
Nützlich
Grundsätzlich wäre es aber doch sehr nützlich, ein Picasa-Album direkt in den Blog einzubinden, oder? Wenn ihr viele Bilder irgendwo im Blog darstellen wollt, könntet ihr das direkt in einem Picasa-Album machen und dann das Album komplett einbinden - wenn ihr dann irgendwann mal Bilder austauschen wollt, macht ihr das in dem Album und von dort werden dann die Bilder im Blog übernommen - kein rumgefummel mehr im Blog Ich find's eine sehr nützliche Idee, die ausbaufähig ist. Was ich euch heute vorstelle ist die Grundlage, wie ihr Zugriff auf die Picasa-API bekommt, wie ihr ein Album in den Blog einbauen und konfigurieren könnt.

Testblog

Es ist immer gut, solche Sachen zuerst in einem Test-Blog auszuprobieren. Legt euch also eine Test-Blog an, in dem könnt ihr ungestört arbeiten ohne das ihr Angst um euren Haupt-Blog haben müsst :=)

jQuery

Der Zugriff auf die Picasa-Schnittstelle erfolgt über jQuery. Falls ihr das jQuery Framework noch nicht in eurem Blog benützt, müsst ihr es zuerst einbauen - wie das geht habe ich schon öfters beschrieben, wiederhole ich jetzt nicht.

Picasa Nutzernamen

Für den Zugriff auf die Picasa-API braucht ihr euren Picasa Nutzernamen oder Profil-ID Nummer. Um den herauszubekommen, melden ihr euch in Picasa-Webalben an, klickt auf den Tab "Meine Fotos" und klickt dann auf "Öffentliche Galerie" über eure Alben. Jetzt schaut ihr euch eure URL an, bei mir lautet die etwa:
https://picasaweb.google.com/111826237840120715824
Meine Profil-ID ist somit 111826237840120715824. Es kann dort aber auch ein Name stehen, in dem Fall ist alles hinter dem Slash euer Nutzername https://picasaweb.google.com/EUERNUTZERNAME

PWI

Die Picasa API hat dankenswerterweise eine eigene Bibliothek, die es wesentlich erleichtert, Zugriff auf die Schnittstelle zu nehmen - das ganze nennt sich Picasa Webalbum Integrator javascript library und wer sich tiefer dafür interessiert, sollte sich dort auf jeden Fall einmal umschauen ... ich stelle in diesem Post eine praktische Anwendung dieser Bibliothek für Blogger vor.

Picasa Web-Album

Bevor ihr ein Picasa Web-Album in Blogger einbinden könnt, braucht ihr natürlich erst mal ein solches :=) Nehmt also ein paar Bilder, ladet die in ein neues Album hoch und gebt diesem Album einen Namen, seid etwa kreativ und nennt das ganze "Test" ... yeah! Ihr habt also nun ein Web-Album - klickt dieses Album an und schaut euch auf der rechten Seite an, welche 'Rechte' ihr diesem Album gegeben habt. Im Grundzustand stehen alle Alben auf 'privat', d.h. niemand anderer als ihr selber könnt das Album sehen. In dem Fall wollt ihr das Album ja in eurem Blog einbauen, also müsst ihr die Rechte dieses Albums auf "Eingeschränkt, alle mit dem Link" stellen. Damit bekommt dieses Album ein Authentifizierungs-Schlüssel, den ihr in der URL zu dem Album sehen könnt. Das ist mein 'Test'-Album 'Rublev' und die URL dazu schaut in Picasa Web-Album so aus:
https://picasaweb.google.com/111826237840120715824/Rublev?authkey=Gv1sRgCNDd-eesgd6r1gE
Der Schlüssel zu dem diesem Album ist folglich Gv1sRgCNDd-eesgd6r1gE, kopiert den irgendwo hin, ihr braucht ihn gleich.

Der Code

Der Zugriff auf ein bestimmtest Album über die Picasa API ist denkbar einfach. Ihr nehmt den folgenden Code und baut ihn in ein HTML/Java-Gadget ein und platziert das irgendwo im Blog (wobei tief immer gut ist):
<script src="http://dl.dropbox.com/u/12178319/javascripts/jquery.pwi-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#container").pwi({
                username: '111826237840120715824',
                 mode: 'album',
                 album: 'Rublev',
                 authKey: 'Gv1sRgCNDd-eesgd6r1gE'
              });
           });
    </script>
Erklärung
Ich habe euch die Javascript-Bibliothek in ein Script gepackt und auf Dropbox gestellt. Ihr könnt entweder mein Script benütze, oder das Script runter laden, selber hosten und einbinden - eure Entscheidung! Dieses Beispiel ist funktionsfähig - falls ihr das für euer 'Test' Album anpassen wollt, müsst ihr euren eigenen Picasa Nutzernamen eintragen, statt meinen Album-Name 'Rublev' den Album-Name 'Test' reinschreiben und den authKey nehmen, den ihr euch vorhin notiert habt.

Darstellung

Okay, ihr habt jetzt den Code in eurem Blog, jetzt müsst ihr euch entscheiden, wo ihr das Album anzeigen lassen wollt, etwa in einem Post. Das Album wird dort angezeigt, wo ein DIV Container mit der ID container steht, d.h. ihr schreibt etwa im Post-Editor im HTML-Moddus.
<div id="container"></div>
Das ist alles - wenn ihr jetzt speichert und alles richtig gemacht habt, wird an dieser Stelle euer komplettes 'Test' Album angezeigt:

Beispiel

DEMO1(klick mich)

Anpassung

Da das ganze lässt sich natürlich auch noch ordentlich konfigurieren - es gibt für die Bibliothek eine vollständige Liste aller Attribute. Wenn ihr das Vorschau-Bild von 72px auf 320px vergrößern wollt, schreibt ihr das ganze etwa so:
$("#container").pwi({
                username: '111826237840120715824',
                 mode: 'album',
                 album: 'Rublev',
                 authKey: 'Gv1sRgCNDd-eesgd6r1gE',
                 thumbSize: '320'
             });
         });
(Komma nicht vergessen!) Schaut dann in der Praxis so aus:

DEMO2(klick mich)

Einsatzbereich

Ihr könnt euere Webalben auf einer statischen Seite, einem HTML/Java Gadget oder einem Post veröffentlichen. Wenn ihr euch die Beispiele angeschaut habt, habt ihr sicherlich bemerkt, dass der Feed erst beim öffnen der Seite geladen wird, d.h. das wirkt sich _nicht_ auf die 1GB Regel für statische Seiten aus. Diese Regel besagt, dass ihr auf statische Seiten normalerweise nicht mehr als 1Gb Inhalt veröffentlich könnt - gerade bei Fotos ist die Grenze schnell erreicht. Mit der Picasa-API könnt ihr theoretisch 1000 Fotos auf die Seite stellen - das erzeugt dann allerdings eine happige Ladezeit :=).

Kommentare

Die Picasa-API ist ein komplexes Thema über was ich hier zum ersten mal schreibe - wenn euch das Thema interessiert und was unklar ist oder ihr beim ausprobieren irgendwo hängen bleibt, fragt einfach nach. Dazu sind die Kommentare da. Falls alles klar ist, könnt ihr natürlich auch einen Kommentar hinterlasen :=).