Google Puls widget in Posterous integrieren in 7 Schritten
Nach zwei Wochen Wiesn war gestern Abend wieder etwas Arbeit nötig. Mein kleines Nachteulen Projekt für gestern war das einbinden eines Google Plus Widgets.
Über das Widget bin in im Blog "Fluent in 3 months" des irischen Polyglots Benn Lewis - er schreibt über seine Abenteuer wie er eine Sprache nach der anderen in kürzester Zeit lernt - gestolpert und habe mich kurzerhand entschlossen dieses gleich am Abend bei den Nachteulen in den Nachteulen Blog einzubinden.
Nicht dass ich bisher in Google Plus besonders aktiv wäre, aber weil es mir einfach Spaß macht zu basteln.
Also wie habe ich das Widget eingebunden? Solltet Du das jemals nachmachen wolle, hier ein Anleitung Schritt für Schritt:
- Quelltext auf der Fluent in 3 Months inspiziert, um herauszufinden, wie das Widget eingebunden ist. Man kann entweder das Chrome interne Tool verwenden oder das Browser Plugin Fire Bug.
- Widget auf der Seite Widgetplus erstellt. Google ID aus meinem Google Plus dafür verwendet.
- Neues leeres HTML Template in Komodo Edit geöffnet. Posterous unterstützt kein javascript, mann muss deshalb den Code in ein HTML Dokument pasten und mit einem iframe verlinken. Erst hatte ich Textmate als HTML Editor, bin dann aber, weil Textmate nach einem Monat kostenpflichtig wird zu Komodo Edit gewechselt. Ich habe einfach ein ganz einfach kostenloses Textprogramm gesucht und bin mit Komodo fündig geworden. Aptana Studio war mir da dann schon zu mächtig.
- Widgetplus code in <body> Tag ins HTML Template gepastet. Man kann ganz einfach ein HTML Template in Komodo Öffnen und muss dann nicht selbst die HTML Struktur mit doctype, header und body aufbauen.
- HTML Dokument auf Public Folder meiner Dropbox gespeichert.
- Rechtsklick und öffentlichen Link des Dokuments kopiert
- Link in iframe code eingebunden an der richtigen Stelle im HTML Code auf der Posterous Seite gepastet, so dass das Widget in der Seitenleiste erscheint. So sollte der iframe aussehen
8. iframe Breite an weitere Seitenleistenelemente anpassen. So lange die Größe des Widgets wie in Schritt 2 anpassen bis das Widget in die Seitenleiste passt. Nützlich kann auch ein kleines Plugin in sein, mit dem man die Breite in Pixel der Seiteleiste oder des Widgtes messen kann wie Measureit für Firefox und Measureit für Chrome.
... und voila das Google Widget ist fertig.
Ein Ziel bei den Nachteulen ist es, dass die Besucher sich gegenseitig helfen und Tipps und Links austauschen. Eigenltich wie eine kleine Selbsthilfegruppe bei de man sich gegenseitig bei den eigenen Projekte aushilft. Nur durch meine Mitnachteulen habe ich soviel in den letzten zwei Monaten gelernt, dass ich dieses Widget überhaupt einbinden kann. Solltest du trotz meiner Anleitung nicht weiterkommen, helfe ich Dir gerne auch bei einem der nächsten Dienstage.
Gestern hatte Christian etwa ein Problem mit seiner Wordpress Installation und ist auch trotz googelns nicht weitergekommen. Daniel, der zum ersten mal bei den Nachteulen war, konnte als IT Fachmann ihm aber schnell weiterhelfen, so dass Christian die Installation abschliesen konnte.
Inspiriert von zahlreichen Blogs war das nun meine erste Anleitung. Die Frage ist, was kannst du anderen beibringen? Kannst Du nicht auch eine Anleitung schreiben oder jemanden bei den Nachteulen etwas beibringen?
In den nächsten Monaten werden wir Whiteboarden lernen, professionelle Videos erstellen, Twitterbots bauen und Logs erstellen. Du bist herzlich eingeladen vorbei zukommen und dich einzubringen und mitzumachen. Selbstverständlich kannst du auch immer am Dienstag kommen und nur an deinen eigenen Projekte arbeiten.
.... und hier die drei Nachteulen von gestern Abend. Hau rein! Einen wunderschönen Mittwoch!





