27 Nov 09 Tutorial: Wave auf eigener Webseite einbinden

Wie so oft linkt man nur auf die Google Welle im Blog oder auf der eigenen Webseite. Man kann aber auch die eigene Wave auf der Webseite einbinden. Das ist zumal gar nicht schwer, sich das selbst zusammen zu bauen.

Für eine eigene Wave-inBlog oder -inWebseite ist nicht viel nötig. Man braucht nur eine Webseite mit Ausgabe-Format HTML oder einen Blog oder ein anderes CMS, bei dem man Seiten anlegen kann.

Zurest legen wir erstmal eine neue Seite an und benennen diese.
Beispiel: Wordpress

Anschließend klicken wir auf die HTML-Ansicht. Wenn ihr den TinyMCE-Editor empfehlen wir, den Code direkt über Tools, wie phpMyAdmin, in die Datenbank zu schreiben.

Zunächst benötigen wir eine normale Ebene, in die der Inhalt dann geschrieben wird:

<!--Wave -->
<div id="wave" style="width: 100%; height: 300px;"></div>

Die Ebene könnt ihr euch natürlich selbst anpassen. Im Beispiel ist sie auf 100% in der Breite (width: 100%;) und 300 Pixel in der Höhe (height: 300px;) eingestellt. Ihr könnt euch mal ein wenig mit CSS auseinandersetzen, um mehr darüber zu erfahren. Die Maßeinheiten des Webs sind % (Prozent), px (Pixel), mm (Millimeter) und viele mehr.

Dann müssen wir das eigentliche Hauptscript einfügen. Daran bitte nichts ändern!

<script type="text/javascript" src="http://wave-api.appspot.com/public/embed.js">
</script>

Jetzt beginnt die eigentliche Arbeit. Denn jetzt kommt der komplizierte Teil des Codes. Wir beginnen zunächst mit dem Standard-Aufbau.

<script type="text/javascript">
  var wave =
    new WavePanel('https://wave.google.com/wave/');

Bis hier her ist es nur Copy-Paste. Nun müssen wir uns aber die Variablen ansehen, damit die Wave auch funktioniert.

wave.setUIConfig('white', 'black', 'Arial', '12pt');

Kopiert euch diesen Teil erstmal. Dann können wir daran arbeiten. Der erste Wert in den Einfach-Anführungsstrichen ist der Hintergrunds-Wert. Das ist ein einfacher Wert, um HTML-Farben darzustellen. Der sollte gleich dem Hintergrunds-Wert eurer Seite sein. Wenn eurer Blog also z. B. “grey” als Hintergrund hat, kann man ‘grey’ schreiben. Einige Farb-Codes findet ihr auf dieser Seite. Setzt einfach den Wert in 2x’ (z. B. ‘#fffff0′ oder ‘#e6e6fa’). Wenn ihr euch unsicher seid, lasst es bei ‘white’, dann ist der Hintergrund der Wave weiß.

Der zweite Wert (‘black’) ist auch ein Farbwert, der jedoch für die Schriftfarbe ist. Benutzt auch hier wieder die Farbtabelle, um den Wert festzustellen. Der Standardwert ist Schwarz, also ‘black’.

Der dritte Wert (‘Arial’) beschreibt die Schriftart. Diese ist – je nach Betriebssystem und Browser – sehr unterschiedlich. ‘Arial’ ist die häufig genutzte Schriftart und auch die Standard-Schriftart von Google Wave, da sie jedes Betriebssystem unterstützt. Schau mal hier vorbei, um zu erfahren, was es da noch gibt.

Der letzte Wert (‘12pt’) ist die Schriftgröße. Auch hier gibt es wieder die oben genannte Maßeinheit aus CSS-Wegen. Sie sollte nicht zu klein und nicht zu groß sein, ‘12pt’ ist der Standardwert, der auch relativ okay ist.

wave.loadWave('googlewave.com!w+Bu2dNuWUA');

Jetzt geht es an die eigentliche Wave-Sache, die definitiv geändert werden muss. Im Beispiel bei uns ist es ‘googlewave.com!w+Bu2dNuWUA’. Wir brauchen also aus der Wave-URL den Server, das Trennstück und die Wave-ID. Ich habe im letzten Blogeintrag bereits unterschieden, wie eine Wave-URL aufgebaut ist. Ihr müsst im Prinzip nur !w%252B durch !w+ ersetzen.

Beispiel: Ist die Wave-URL “https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BsdIrVbo2H”, dann lautet der Wert ‘googlewave.com!w+sdIrVbo2H‘.

Nun schließen wir noch den JavaScript-Code ab und beenden die Seite.

wave.init(document.getElementById('wave'));

</script>
<!--/Wave -->

Dann könnt ihr im Prinzip noch etwas vor die Wave (beginnt ab <!–Wave –>) und nach die Wave (endet mit <!–/Wave –>) schreiben.

Viel Spaß mit eurer Wave auf der eigenen Homepage!

Popularity: 24%

Tags: embed, html, tutorial, wave, webseite