Ganz toll, nur leider hat da niemand was von, weil Studi genauso restriktiv vorgeht wie Xing!

Die einzigen Google Gadgets, die man bei StudiVZ verwenden kann, sind vorgegeben. In Kooperation mit Bild.de wurden Gadgets zu diversen Fussballvereinen erstellt (die sogar ganz cool aussehen).

Aber: Man kann leider selbst keine Gadgets zu seinem Profil oder einer Gruppe hinzufügen. Also gerade das, was die Gadgets so beliebt macht, wird nicht unterstützt! Gleiches übrigens bei Xing mit dem OpenSocial-Standard.

Liebes StudiVZ-Entwickler-Team: Öffnete euch, habt keine Angst vor euren Usern!

Und das wird wirklich von den Usern angenommen! Die Interaktion (zumindest mit diesem Gadget) ist sehr hoch, es kommen täglich ein gutes Dutzend neuer Sprüche hinzu:. User können hier einen Spruch und eines von vier möglichen Fotos hinzufügen:

Wo es vom User generierte Hinhalte gibt, ist leider auch der SPAM nicht weit weg:

Die technische Umsetzung basiert nicht auf einer Funktionalität von iGoogle oder der Gadgets API, sondern ist selbst-gebaut.  Die Sprüche werden in einer XML-Datei gespeichert und vom Gadget zufällig angezeigt.  Eingaben durch den User werden an einen kleinen “Webservice” gesendet, der diese (rudimentär) prüft und ggf. in diese XML-Datei schreibt. Ganz simpel …

Meine Learnings an dieser Stelle:

1. User-generated Content funktioniert in Gadgets!

2. SPAM leider auch …

3. Die User scheinen sich gerne mit Name oder Nickname zu verewigen. Ich sollte ein zusätzliches Feld zur Eingabe eines Namens anbieten.

Ich werde nach und nach auch die anderen Gadgets (wo es Sinn macht) um diese Funktion erweitern. Sehr empfehlenswert.

PS, mein Lieblingswitz:  … es gibt für alles eine App - außer für Chuck Norris!

Eigentlich eine schöne Sache, mir ist dabei allerdings etwas aufgefallen:  Solltet ihr AdSense in euren Gadgets verbauen, werden diese nicht mehr korrekt in der Google Toolbar dargestellt! Google scheint den kompletten JavaScript-Code zu blocken, solltet ihr AdSense-Werbemittel innerhalb  eines Gadgets aufrufen:

Wie löst man dieses Problem? Man bettet AdSense-Codes nicht direkt in die Gadget XML-Datei ein, sondern indirekt:  Einfach ein iFrame einbinden, welches dann den AdSense-Code aufruft. So mache ich es übrigens beim Konfuzius Gadget, auch wenn ich dort kein AdSense sondern einen AdServer-Tag integriert habe:

- die Verweildauer der User,
- die Herkunft der User,
- die Verbreitung eurer Gadgets auf Blogs und Webseiten und
- sogar die Interaktion mit dem Gadget.

Ihr braucht lediglich drei Zeilen Code um Analytics in ein Gadget zu Integrieren. Zunächst muss eine zusätzliche Bibliothek in die ModulPrefs geladen werden:

<Require feature="analytics"/>

Nun ruft ihr irgendwo im JavaScript-Teil eures Gadgets ein Analytics Tracking-Objekt auf und benutzt die Methode “reportPageview” (default beim Initialisieren auf diese Weise) um die Aufrufe des Gadgets festzuhalten :

<script type="text/javascript">
//Gadget Tracking mit Google Analytics:
var placement = "/view/name_des_gadgets/" + document.referrer;
_IG_Analytics("UA-123456-78", placement);
</script>

Ihr müsst die Analytics-ID einer bestimmten Webseite verwenden um den Tracker zu nutzen. Die Views der Gadgets werden bei Analytics als PageViews angezeigt. Daher wird dem Tracking-Objekt auch die Platzierung des Gadgets als viruelle URL mitgeteilt. Damit ihr die Views der Gadgets und eurer Webseite später im Analytics Interface voneinander unterscheiden könnt, solltet ihr einen eindeutigen Content-Pfad für Gadgets definieren, der sich vom Rest der Webseite unterscheidet.

Im Beispiel oben setzt sich der Pfad aus “/view/name_des_gadgets/” + document.referrer zusammen. So unterscheidet sich die URL des Gadgets nicht nur vom Rest des Contents, sondern erfasst zusätzlich noch die Platzierung des Gadgets als Referrer. So lässt sich auch feststellen, von welcher iGoogle Toplevel-Domain die User kommen:

Hinweis: Mehr über die Integration von Analytics und das Tracking von JavaScript innerhalb eines Gadgets findet ihr hier auf Google Code!

Was sind eigentlich Google Gadgets?

Gadgets kann man sich als Applikationen oder Erweiterungen für die iGoogle Startseite vorstellen. Sie werden in Form einer XML-Datei gespeichert und von Google Servern zur Laufzeit in ein HTML-Frame gerendert. Ein Beispiel:

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

Ein Gadget kann eine kleine Anwendung, eine Mini-Webseite oder auch ein Werbemittel sein. Der Fantasie sind dabei kaum Grenzen gesetzt. Gadgets können auf der iGoogle Startseite, in der Google Toolbar und auf jeder beliebigen Webseite platziert werden.

Tutorial 1: Was man alles mit Gadgets machen kann und wie man sogar damit Geld verdient, habe ich sehr detailliert bei einem Vortrag auf  der a4uexpo in Amsterdam beschrieben. Hier findet ihr den kompletten Vortrag als Video.  Einsteigern empfehle ich zuerst das Video zu schauen und anschließend weiterzulesen!

Wie werden Gadgets programmiert?

Hauptsächlich mit JavaScript und HTML / CSS. Ihr könnt aber auch Flash benutzen und beliebige andere Inhalte innerhalb eines Gadgets verarbeiten. Google stellt für die Programmlogik eigens eine JavaScript-API zur Verfügung. Es gibt sogar eine Art Entwicklungsumgebung (IDE), genannt Gadget Editor. Sie liegt in mehreren Versionen vor, hier findet ihr euer Werkzeug:

- Standard Gadget Editor mit diversen Code-Beispielen.
- Gadget Ads Editor zum Validieren von Banner-Werbemitteln.
- Editor als Gadget für iGoogle (mit einigen Fehlern).

Wo werden Gadgets gespeichert?

Als XML-Datei auf einem Webspace oder innerhalb eures Accounts auf einem Server bei Google. Wenn ihr bei einem Google-Konto angemeldet seid, lässt sich im Editor jedes Gadget speichern. Entscheidet ihr euch dafür, das Gadget auf eurer eigenen Domain zu hosten, dann kopiert den Quellcode aus dem jeweiligen Gadget Editor und speichert diesen in einer XML-Datei.

Wie geht es jetzt weiter und wie fange ich an?

Ich habe mir zunächst die Dokumentation zur Gadget API auf Google Code angesehen. So bekommt man einen guten Überblick über die technischen Möglichkeiten der Gadgets und entwickelt bereits Ideen zur Umsetzung.

Tutorial 2: Das Getting Started: Legacy Gadgets API Tutorial mit vielen Beispielen auf Google Code. Dort findet ihr folgende Informationen:
- Grundlagen zur Entwicklung, dem Editor, der API.
- Erstellen von User Interfaces innerhalb eines Gadgets.
- Arbeiten mit Remote Content wie XML Feeds, JSON und Co.
- Veröffentlichen von Gadgets im iGoogle Directory.

Eine Schritt-für-Schritt Anleitung, die kaum Programmierkenntnisse voraussetzt, findet ihr auf seoish.com. Aber macht euch bitte keine Illusionen: Das Programmieren von Gadgets ist eine SEHR technische Angelegenheit! Kenntnisse in HTML, CSS-Design und JavaScript sind meiner Ansicht nach unerlässlich.

Tutorial 3: Das How to make Google Gadgets Tutorial von seoish.com. War mir persönlich zu basic, aber für Einsteiger ohne technischen Hintergrund sicherlich empfehlenswert.

Wenn ihr Tutorials 1 und 2 mitgemacht habt, dann solltet ihr auf jeden Fall in der Lage sein, eure ersten Google Gadgets zu erstellen. Soviel zu den Grundlagen der Gadget-Entwicklung für Anfänger. Stay tuned!