Wie man (fast) alles in seine Webseite einbindet

Vom 8. Januar 2009 in Design, Tipps und Infos

Erfahren Sie, wie Sie fast alles in Ihre HTML-Seiten einbinden – von Flash-Videos über Tabellen bis hin zu Fotos mit hoher Auflösung und statischen Bildern aus Google Maps und vieles mehr…

Integrieren Sie RSS-Feeds im Web-Seiten

Auf dieser Seite ersetzen Sie den Feed-URL mit Ihrem eigenen Feed, verwenden Sie das Standard-Farbschema, oder ändern es ab und klicken Sie dann auf Code abrufen. Sie erhalten einen JavaScript-Schnipsel, der sich problemlos in die Sidebar Ihres Blogs einbinden lässt.

Wenn Sie gerne embed-Feeds aus mehreren Quellen verwenden, fassen Sie sie alle mit Yahoo Pipes zusammen und nutzen dann den kombinierten Feed als Google-Gadget. Sie können auch RSS-Widgets wie WidgetBox oder YourMinis nutzen, die in Flash programmiert sind und ohne Javascript auskommen.

High Quality YouTube-oder HD-Videos einbinden

Um YouTube-Clips mit einer hohe Auflösung in Ihre Web-Seiten einzubinden, stellen Sie zunächst sicher, dass es einen “Watch in High Quality” oder “Watch in HD”-Link neben dem YouTube-Player gibt, da die meisten Videos nur im Standard-Format vorliegen.

Als nächstes kopieren Sie den YouTube Embed-Code und fügen Sie & ap =% 3D18% 2526fmt (für hohe Qualität) oder & ap =% 3D22% 2526fmt (für 720p High-Definition) der URL der Film-Parameter hinzu.

MP3-Musik und andere Audio-Dateien einbinden

Wenn Sie Audio-Dateien, wie Musiktitel, Podcasts und Interviews in Ihrem Web-Seiten einbetten möchten, nutzen sie den Yahoo! Media Player – einen kostenlosen Flash-Musik-Player, der automatisch alle Links zu MP3-Dateien in der aktuellen Web-Seite erkennt und sie zu einem Musik-Player hinzufügt. Eine weitere Alternative ist der Google-MP3-Player.

Um andere Audio-Formate wie 3GP, Midi, Real oder Windows Media einzubetten, konvertieren Sie diese zu MP3, damit diese mit jeden beliebigen Browser geöffnet werden können.

Einbinden von Flickr-Fotos und Diashows

Um Flickr Fotos in Ihrem Blog einzubinden, klicken Sie auf den “Share this” Link und wählen Sie einbetten.

Zur Einbettung einer Flickr Foto-Diashow in Ihrer Web-Seite, öffnen Sie eine beliebige Slideshow in einer neuen Seite  und wählen Sie “HTML Customize” aus dem embed-Optionen. Hier können Sie ein benutzerdefiniertes Format für Ihre Flash-Diashow festlegen, so dass sie genau in Ihre Web-Seite passt.

Einbinden von Picasa Web Alben

Wenn Sie ein Foto-Album in Picasa öffnen, klicken Sie auf den Link in der rechten Seitenleiste  “Link zu diesem Album” und wählen Sie “Embed Slideshow”. Der selbe Weg gilt auch zum einbinden von einzelnen Fotos von Picasa.

Events vom Google-Kalender auf der Webseite anzeigen

Klicken Sie auf den Dropdown-Pfeil neben den Google Kalender-Einstellungen und wählen Sie Kalender. Öffnen Sie die Google-Hilfe für eingebundene Kalender-Programm, indem Sie auf die Schaltfläche klicken. Kopieren Sie unter “Diesen Kalender einbinden” den ifram-Code, der in dem weißen Feld angezeigt wird.Diese fügen Sie dann auf Ihrer Webseite ein.

Einbinden von sehr großen Fotos

Um richtig große Bilder in Ihrem Blog einzufügen, können Sie entweder Deep Zoom oder den Google Maps-Viewer. Diese Programme schneiden Ihre Fotos in kleine Fliesen und Sie können sogar Pan / Zoom in diesen Bildern anwenden, ähnlich wie während der Nutzung von Google Maps.

Einbinden von Charts und Diagrammen in Web-Seiten

Mein persönlicher Favorit ist Zoho Sheet – alle Diagramm die innerhalb Zoho Sheet erstellt wurden können als Bild veröffentlicht werden, ohne dass die vollständige Tabelle angezeigt werden muss. Wenn Sie einer Erstellung von Diagrammen mit einer geringen Datenmenge interessiert sind, empfehle ich die Verwendung von Google-Charts.

Einen Chat in Ihrem Blog einbinden

Wenn Sie Lust haben auf einen Chat mit den Besuchern, die derzeit auf Ihrer Website befinden, nutzen Sie das Chat-Widget von Meebo Me und platzieren Sie ihn in der Seitenleiste Ihrer Website. Besucher erscheinen in Meebo in Ihrer Buddy-Liste und so können Sie ein Gesprächanfangen, Fragen beantworten, oder einfach nur Ihre Gäste im Auge behalten.

Word-Dokumente einbinden

Laden Sie Ihr Dokument bei Scribd hoch und Sie bekommen den Einfüge-Code in Flash. Scribd unterstütz das doc-Format, das neuen Office 2007 docx-Format und Open Office-Dokumente.

PowerPoint-Präsentationen auf der Webseite einbinden

Das bekannteste Werkzeug hierfür ist ist Slideshare, alternativ Issuu.

Tabellenkalkulationsdaten / Ecxel-Daten auf der Webseite einbinden

Bei Zoho Sheet und Google Text & Tabellen können Sie eine Reihe von Zellen aus einer Tabelle in einer Web-Seite veröffentlichen, aber die Einbettung in Zoho ist weniger kompliziert – wählen Sie einen Bereich und wählen Sie “Veröffentlichen” aus dem Kontextmenü um die Auswahl in Ihre Webseite einzubinden.

Integrieren Sie Adobe PDF-Dateien

Um PDF-Dateien in eine Web-Seite einbetten, können Sie entweder Issuu oder Scribd nutzen.

Embed Flash (SWF) or Flash Video (FLV) Embed Flash (SWF) oder Flash Video (FLV)

Die beste Möglichkeit zum Einbinden von Flash-Inhalten erfolgt über swfobject. Es verbessert die Benutzerfreundlichkeit durch die Bereitstellung von Alternativen für den Fall das Flash fehlt und damit Ihre Flash-Inhalte auch durchsucht werden können. Dieses Tutorial hilft Ihnen beim Start.

Google Maps in Web-Seiten einbinden

Die Einbettung einer Google-Maps-Karte in Ihre Webseite ist nun fast so einfach wie das Hinzufügen eines Bildes – einfach der statischen Karten-Assistenten, suchen Sie nach dem Ort, den Sie einbetten möchten und geben Sie die Größe der gewünschten Karte an. Sie erhalten eine einfache URL, die ein statisches Bild der Karte auf Ihrer Webseite darstellt.

Einbinden einer anderen Webseite in Ihrem Blog

Möchten Sie eine andere Webseite in Ihrer einbetten, ist die beste Lösung ein IFRAME-Tag auch bekannt als Inline-Frame. Einfach die Adresse der Web-Seite, die Sie einbetten möchten, in Ihrem aktuellen HTML-Dokument als iframe einbinden. Sie können auch versuchen IFRAMEs für die anzeige von Live-Suchergebnisse von Google in Ihre Web-Seite einzubinden, ohne sich Sorgen über APIs zu machen.

Windows Media oder QuickTime-Filme einbinden

Es ist zwar möglich, MOV oder WMV Videos in Web-Seiten direkt mit dem OBJECT-Tag einzubinden, aber ich empfehle  Ihnen, dass Sie diese Videos auf blip.tv hochladen und dann als Flash Video einzubinden. Das hat den Vorteil, dass Ihre Besucher das Video ohne zusätzliche Plug-ins abspielen können und es gibt immer die Möglichkeit zum Download des Videos im ursprüngliche Format vom blip.tv Server.

Andere Schriften in Web-Seiten nutzen

Die meisten Web-Seiten nutzen die universellen Schriftarten wie Arial, Times New Roman oder Verdana, da sie auf den meisten Computern installiert sind und damit Ihre Web-Seiten korrekt wiedergeben. Wollen Sie dennoch andere systemfremde Schriftarten nutzen, brauchen Sie sIFR – sie können Sie fast jede Schriftart für Ihre Web-Seiten mit Hilfe von JavaScript + Flash nutzen.

Betten Sie Ihre Lifestream in eine Web-Seite ein

Sie haben eine Präsenz auf YouTube, Flickr, Twitter, Last.fm, Facebook, Amazon und einem Dutzend anderer Online-Orte. Es kann wirklich hart für Freunde sein Ihnen zu folgen. Sie sollten einen FriendFeed Badge auf Ihrer Hauptseite einbetten, um alle Aktivitäten zu bündeln.