Tutorials

Tutorial: Google Docs in HTML einbinden

Melden

Hier ist ein einfaches Tutorial, wie du ein Google Dokument direkt in deine Website einbindest.

Das Einbetten eines Google Docs in deine Website ist eine hervorragende Methode, um Inhalte zu präsentieren, die du zentral in Google Drive aktualisieren kannst, ohne den HTML-Code deiner Seite jedes Mal ändern zu müssen.

Schritt 1: Das Google Dokument für das Web freigeben

Bevor du den Code kopieren kannst, musst du das Dokument veröffentlichen.

  1. Öffne das gewünschte Google Doc.
  2. Klicke oben links auf Datei (File).
  3. Wähle Teilen (Share) und dann Im Web veröffentlichen (Publish to the web).
  4. Es öffnet sich ein Fenster. Klicke dort auf den Reiter Einbetten (Embed).
  5. Klicke auf die Schaltfläche Veröffentlichen.
  6. Bestätige die Sicherheitsabfrage mit "OK".

Schritt 2: Den Einbettungscode kopieren

Nachdem du auf "Veröffentlichen" geklickt hast, erscheint ein HTML-Code (ein sogenannter <iframe>).

  1. Markiere den gesamten Code im Textfeld (er beginnt mit <iframe src=...).
  2. Kopiere den Code in deine Zwischenablage (Strg + C oder Cmd + C).

Schritt 3: Den Code in deine HTML-Datei einfügen

Öffne nun deinen Code-Editor oder das CMS deiner Website (z. B. WordPress im HTML-Modus) und füge den Code an der Stelle ein, an der das Dokument erscheinen soll.

Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Mein eingebettetes Dokument</title>
</head>
<body>

    <h1>Projekt-Dokumentation</h1>

    <!-- Hier wird der kopierte Code eingefügt -->
    <iframe src="https://docs.google.com/document/d/e/DEINE-ID/pub?embedded=true"></iframe>

</body>
</html>

Schritt 4: Größe und Design anpassen (Optional)

Standardmäßig ist der Iframe oft zu klein. Du kannst die Breite (width) und Höhe (height) direkt im HTML-Tag oder über CSS anpassen.

Empfohlene Anpassung:

<iframe 
    src="https://docs.google.com/document/d/e/DEINE-ID/pub?embedded=true" 
    width="100%" 
    height="600px" 
    style="border: none;">
</iframe>
  • width="100%" sorgt dafür, dass das Dokument die volle Breite des Containers nutzt.
  • height="600px" gibt dem Dokument genug Platz zum Scrollen.
  • style="border: none;" entfernt den standardmäßigen Rahmen.

Wichtige Hinweise

  • Öffentlichkeit: Sobald du ein Dokument "im Web veröffentlichst", kann jeder, der den Link hat, den Inhalt sehen. Vertrauliche Informationen sollten so nicht eingebunden werden.
  • Aktualisierung: Änderungen, die du im Google Doc vornimmst, werden automatisch auf deiner Website übernommen (es kann ein paar Minuten dauern, bis der Cache aktualisiert wird).
  • Kein Bearbeitungsmodus: Die Einbettungsfunktion zeigt nur eine Leseansicht des Dokuments. Besucher können den Text auf deiner Website nicht direkt bearbeiten.

Zusammenfassung

  1. Datei > Teilen > Im Web veröffentlichen.
  2. Reiter Einbetten wählen & Veröffentlichen klicken.
  3. Iframe-Code kopieren.
  4. In das HTML-Dokument einfügen und Größe anpassen.
0