Lernen mit Twitter, Etherpad & Co.

Manuel Schmuck hat bereits eine sehr anschauliche Anleitung dafür geschrieben, wie man einen Twitter-Feed am besten in Collabor einbindet. Ich möchte noch ein paar Bilder anfügen, damit es für alle, die keine Erfahrungen mit HTML besitzen, ebenfalls leicht nachvollziehbar ist.

Inhalt:

• Widgets? Nie gehört...!
• Einbinden eines Twitter Such-Widgets (Schritt für Schritt)
• Einbinden eines Twitter Profil-Widgets

Widgets? Nie gehört...!

Dieser Punkt richtet sich an alle, die sich fragen, was Widgets überhaupt sind. Im Grunde handelt es sich dabei um kleine Programme oder Applikationen, die sich in einen Blog, eine Internetseite oder in ein Betriebsystem (vgl. Scholl 2006) einbinden lassen: Kalender, Archive, Feeds, usw. (vgl. ebd. 2006) Sie funktionieren nicht eigenständig, sondern brauchen eine entsprechende Schnittstelle oder Umgebung. Allgemein vereinfachen sie die individuelle Gestaltung von Webinhalten, weil meist gar keine bis wenig HTML-Kenntnisse nötig sind, um sie einzufügen. Außerdem helfen sie, verschiedene Dienste miteinander zu verknüpfen, was wiederum die Navigation im Web erleichtert. Ist man beispielsweise auf mehreren sozialen Plattformen unterwegs (wie Twitter, Delicious oder Box.net), wäre es oft vorteilhaft, alle (für sich und für andere) im Blog auf einen Blick zu haben. Widgets lösen dieses Problem mit wenigen Mausklicks.

Allerdings heißen die Programme nicht überall Widgets. Google nennt sie zum Beispiel Gadgets.

2. Einbinden eines Twitter Such-Widgets (Schritt für Schritt)

Das Such-Widget von Twitter ist ungemein praktisch, da es viel Zeit spart. Anstatt Twitter jedes Mal selbst zu öffnen, könnt ihr es in die Seitenleiste von Collabor einbinden und seht quasi sofort die letzten unter einem vorher vereinbarten Schlagwort geschrieben Tweets. Das funktioniert im Prinzip wie die Twitterwall. So fügt ihr das Widget ein:

• Zunächst surft ihr auf https://twitter.com/about/resources/widgets und klickt Meine Webseite:

• Dann geht ihr auf Such-Widget:

• Nun könnt ihr euer Widget personalisieren.

Unter Suchanfrage tippt ihr das Schlagwort (Hashtag), auf das ihr euch geeinigt habt. Fortan wird jeder Tweet, der damit versehen ist, in eurem Widget angezeigt. Titel und Caption könnt ihr individuell anlegen. In meinem Beispiel habe ich die Suchanfrage sbgsm11 genommen (Salzburg; Social Media; 2011). Jeder Tweet mit dem Hashtag #sbgsm11 erscheint nun im Widget.

• Mit Test Settings (unten) könnt ihr zu jeder Zeit eure Vorschau (rechts) aktualisieren:

• Preferences und Appearence konfigurieren das Widgets nach eurem Geschmack. In Appearence lassen sich beispielsweise die Farben verändern (und an euren Blog anpassen):

• Dimensions legt letztlich fest, wie breit und hoch euer Widget sein soll. Für Collabor empfehle ich für Breite die Option Auto Width, da die Breite auf diese Weise automatisch angepasst wird

• Wenn ihr mit eurem Widget zufrieden seid, könnt ihr euch unter Finish & Grab Code dafür den HTML-Code holen. Der muss jetzt nur noch an der passenden Stelle im Blog eingebunden werden. Ihr speichert also den ausgegeben Code  in die Zwischenablage (STRG+C) und wechselt auf euren Blog.

• Im eigenen Blog geht es folgendermaßen weiter. Zunächst klickt ihr bei Menü auf Layout:

 

• Weiter auf Skins:

 

• Weiter auf Site Layout:

• Weiter auf Main Page:

 

• Dort seht ihr nun den HTML-Code eures Blogs. Wie Manuel empfehle ich für Laien hier, nach der Zeile Calendar (<% site.calendar...) zu suchen und den zuvor kopierten Code eine Zeile darüber einzufügen (unter den Search-Tags):

• Dann klickt ihr auf Sichern und Schließen. Damit dürfte sich das eingebettete Widget dann zwischen eurer Such-Box und dem Kalender befinden:

3. Einbinden eines Twitter Profil-Widgets (Schritt für Schritt)

Wenn ihr stattdessen ein Widget einbetten möchtet, das nur eure eigenen Tweets zeigt, wählt ihr einfach Profil-Widget. Die weiteren Schritte sind gleich. Das Ergebnis müsste hier ungefähr so aussehen:

Ich wünsche euch viel Spaß beim Ausprobieren!

Quellenverzeichnis:

• Schmuck, Manuel (2011): Twitter Widget im eigenen Blog. Online im Internet: http://collabor.idv.edu/1155609/stories/35877/ (Stand: 08.01.2012)
• Scholl, Christoph (2006): Sinnvolle Tools oder überflüssiger Ballast? Widgets: Kleine Helferlein auf dem Desktop. Online im Internet: http://www.netzwelt.de/news/73369-widgets-kleine-helferlein-desktop.html (Stand: 08.01.2012)
• Twitter Widgets. Online im Internet: https://twitter.com/about/resources/widgets (Stand: 08.01.2012)

... für die tolle Anleitung, werde das dann gleich mal ausprobieren!

Ich möchte mich Stephanie anschließen...Danke für die gute Anleitung und tolle Erklärung. Ich werde es gleich ausprobieren.

wie kann ich das widget (nicht personalisiert, falsch gesetzt) wieder löschen? offenbar hab ich im collabor-seitencode keine berechtigung - ich kann den widget-code zwar markieren aber nicht löschen, auch nicht auskommentieren od sonst was.

danke für einen tipp!