Flipbook in Squarespace einbetten

Das Hinzufügen eines interaktiven Flipbooks zu deiner Squarespace-Website verwandelt statische PDF-Inhalte in ein ansprechendes Umblättererlebnis für deine Besucher. Ob du einen Produktkatalog, ein Portfolio oder eine Unternehmensbroschüre präsentierst — das Einbetten eines FlipLink-Flipbooks dauert nur wenige Minuten, wenn du den richtigen Ansatz kennst.

Diese Anleitung führt dich durch jeden Schritt — vom Abrufen deines Einbettungscodes in FlipLink bis zum Einfügen in Squarespace und der Sicherstellung, dass es auf jeder Bildschirmgröße gut aussieht.

Was du vor dem Start brauchst

Bevor du ein Flipbook einbettest, stelle sicher, dass du Folgendes bereit hast:

• Ein veröffentlichtes FlipLink-Flipbook — Lade dein PDF unter go.fliplink.me hoch und veröffentliche es. Du brauchst den Einbettungscode oder Freigabelink aus deinem Dashboard.
• Einen Squarespace-Business-Plan oder höher — Code-Injection und benutzerdefinierte Codeblöcke erfordern mindestens den Business-Plan. Personal- und Basic-Pläne unterstützen kein Einbetten von benutzerdefiniertem HTML oder Iframes.
• Zugriff auf deinen Squarespace-Seiteneditor — Du wirst Seiten direkt im Squarespace-Seitenbaukasten bearbeiten.

Falls du dein Flipbook noch nicht erstellt hast, schau dir unsere Anleitung zu den Freigabe- und Verteilungsoptionen an, um alle Möglichkeiten zu verstehen, wie du dein Flipbook teilen kannst, sobald es fertig ist.

Schritt 1: Einbettungscode von FlipLink abrufen

Sobald dein Flipbook in FlipLink veröffentlicht ist, ist das Abrufen des Einbettungscodes unkompliziert:

1. Melde dich in deinem FlipLink-Dashboard unter go.fliplink.me an.
2. Öffne das Flipbook, das du einbetten möchtest.
3. Klicke auf den Teilen-Button.
4. Wähle den Einbetten-Tab.
5. Kopiere den bereitgestellten Iframe-Einbettungscode.

Der Einbettungscode sieht etwa so aus:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

Halte diesen Code bereit — du wirst ihn im nächsten Schritt in Squarespace einfügen.

Schritt 2: Codeblock in Squarespace hinzufügen

Squarespace verwendet einen blockbasierten Editor, und der Codeblock ist der Ort, an dem du deinen Flipbook-Einbettungscode einfügst.

1. Öffne die Seite, auf der das Flipbook erscheinen soll.
2. Klicke auf Bearbeiten auf der Seite.
3. Fahre mit der Maus über den Abschnitt, in dem du das Flipbook platzieren möchtest, und klicke auf den Einfügepunkt (die Linie mit dem Plus-Symbol).
4. Wähle Code aus den Blockoptionen. Falls du es nicht siehst, suche nach „Code" im Blockpicker.
5. Füge deinen FlipLink-Iframe-Einbettungscode in den Codeblock ein.
6. Deaktiviere die Option „Quellcode anzeigen" — das ist entscheidend. Wenn „Quellcode anzeigen" aktiviert ist, zeigt Squarespace das rohe HTML als Text an, statt das Flipbook zu rendern.
7. Klicke auf Speichern und verlasse dann den Editor, um die Vorschau deiner Seite zu sehen.

Dein Flipbook sollte nun direkt auf der Seite erscheinen, komplett mit interaktiven Umblätter-Animationen.

Schritt 3: Flipbook responsiv machen

Der Standard-Einbettungscode funktioniert gut auf dem Desktop, aber du solltest sicherstellen, dass er auf Tablets und Mobilgeräten richtig skaliert. Hier ist eine verbesserte Version des Einbettungscodes mit responsivem Styling:

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

Der Wert padding-bottom: 75% erzeugt einen Container mit 4:3-Seitenverhältnis. Passe diesen Wert an die Abmessungen deines Flipbooks an:

• 4:3-Verhältnis (Querformat): padding-bottom: 75%
• 16:9-Verhältnis (Breitbild): padding-bottom: 56.25%
• 3:4-Verhältnis (Hochformat): padding-bottom: 133%
• 1:1-Verhältnis (quadratisch): padding-bottom: 100%

Diese Technik wird als „Aspect-Ratio-Box"-Methode bezeichnet. Der Iframe füllt seinen Container perfekt, und der Container skaliert flüssig mit der Seitenbreite.

Schritt 4: Domain-Whitelisting konfigurieren

Wenn du das Domain-Whitelisting für dein Flipbook aus Sicherheitsgründen aktiviert hast, musst du deine Squarespace-Domain zur Erlaubnisliste hinzufügen. Andernfalls wird das Laden der Einbettung blockiert.

1. Öffne in deinem FlipLink-Dashboard die Flipbook-Einstellungen.
2. Navigiere zum Bereich Domain-Whitelisting.
3. Füge deine Squarespace-Domain hinzu (z. B. www.deinedomain.com oder deinedomain.squarespace.com).
4. Speichere die Einstellungen.

Domain-Whitelisting ist optional, wird aber empfohlen, wenn du verhindern möchtest, dass andere dein Flipbook auf nicht autorisierten Websites einbetten. Es stellt sicher, dass dein Inhalt nur dort erscheint, wo du es beabsichtigst.

Squarespace-Code-Injection verwenden (websiteweit)

Wenn du möchtest, dass ein Flipbook auf jeder Seite erscheint — zum Beispiel in einem Footer- oder Header-Bereich — kannst du statt einzelner Codeblöcke die Code-Injection-Funktion von Squarespace verwenden.

1. Gehe zu Einstellungen → Erweitert → Code-Injection.
2. Füge deinen Einbettungscode in das Footer-Feld ein (oder Header, je nach Platzierung).
3. Umschließe ihn mit einem Container-Div mit entsprechendem Styling, um seine Position zu steuern.
4. Klicke auf Speichern.

Dieser Ansatz ist nützlich für websiteweite Banner oder permanente Flipbook-Widgets, obwohl für die meisten Anwendungsfälle ein Codeblock auf einer bestimmten Seite die bessere Wahl ist.

Alternative Ansätze

Nicht jede Situation erfordert eine vollständige Iframe-Einbettung. Hier sind zwei einfachere Alternativen, die mit jedem Squarespace-Plan funktionieren, einschließlich Personal:

Linkblock mit Thumbnail

Statt das Flipbook direkt einzubetten, füge einen visuellen Link hinzu, der das Flipbook in einem neuen Tab öffnet:

1. Mache einen Screenshot der Titelseite deines Flipbooks.
2. Füge einen Bildblock zu deiner Squarespace-Seite mit dem Screenshot hinzu.
3. Füge einen Link zum Bild hinzu, der auf deine FlipLink-Freigabe-URL verweist.
4. Stelle den Link so ein, dass er in einem neuen Fenster geöffnet wird.

Dieser Ansatz funktioniert auf jedem Squarespace-Plan und gibt dir volle Kontrolle über die visuelle Darstellung. Besucher klicken auf das Titelbild und erhalten das vollständige Flipbook-Erlebnis in einem neuen Tab.

Button-Block

Für einen klareren, Call-to-Action-orientierten Ansatz:

1. Füge einen Button-Block zu deiner Seite hinzu.
2. Setze den Button-Text auf etwas wie „Unseren Katalog ansehen" oder „Broschüre lesen".
3. Verlinke ihn mit deiner FlipLink-Freigabe-URL.
4. Stelle ihn so ein, dass er in einem neuen Tab geöffnet wird.

Das ist die einfachste Methode und funktioniert zuverlässig auf allen Plänen und Geräten.

Häufige Probleme beheben

Das Flipbook erscheint nach dem Speichern nicht

Stelle sicher, dass du „Quellcode anzeigen" in den Codeblock-Einstellungen deaktiviert hast. Wenn diese Option aktiviert ist, rendert Squarespace den Code als Klartext, statt ihn auszuführen.

Die Einbettung ist blockiert oder zeigt einen leeren Rahmen

Überprüfe deine Domain-Whitelisting-Einstellungen in FlipLink. Wenn Whitelisting aktiviert ist, muss deine Squarespace-Domain auf der Erlaubnisliste stehen. Überprüfe auch, ob dein Squarespace-Plan Codeblöcke unterstützt — du brauchst Business oder höher.

Das Flipbook wird auf dem Smartphone abgeschnitten

Verwende den responsiven Wrapper aus Schritt 3. Die Aspect-Ratio-Box-Technik stellt sicher, dass der Iframe richtig skaliert. Falls du immer noch Probleme siehst, versuche den padding-bottom-Prozentsatz leicht zu verringern, um besser in den mobilen Viewport zu passen.

Squarespace sagt „Upgrade für benutzerdefinierten Code nötig"

Codeblöcke und Code-Injection sind nur auf den Squarespace-Plänen Business, Commerce Basic und Commerce Advanced verfügbar. Wenn du einen Personal-Plan hast, verwende die oben beschriebenen Alternativen mit Linkblock oder Button-Block.

Tipps für das beste Erlebnis

• Wähle die richtige Seitenplatzierung. Platziere dein Flipbook in einem Abschnitt voller Breite für maximale Wirkung. Vermeide das Einbetten in schmalen Seitenleisten, wo sich das Umblättererlebnis beengt anfühlt.
• Setze eine sinnvolle Höhe. Wenn du den responsiven Wrapper nicht verwendest, setze die Iframe-Höhe auf mindestens 600 Pixel für den Desktop. Weniger macht das Lesen unbequem.
• Füge Kontext rund um die Einbettung hinzu. Ergänze eine Überschrift und eine kurze Beschreibung über dem Flipbook, damit Besucher verstehen, was sie vor sich haben, bevor sie anfangen zu blättern.
• Teste auf mehreren Geräten. Prüfe die Vorschau deiner Seite auf Desktop, Tablet und Smartphone, bevor du veröffentlichst. Die integrierte Gerätevorschau von Squarespace macht das einfach.

Verwandte Ressourcen

Wenn du Flipbooks auf anderen Plattformen einbettest, helfen dir diese Anleitungen:

• Wie man ein PDF auf jeder Website einbettet
• Wie man ein Flipbook in WordPress einbettet
• Wie man ein Flipbook mit Iframe einbettet

Bette dein Flipbook noch heute ein

Das Erstellen und Einbetten eines Flipbooks auf Squarespace dauert mit FlipLink nur wenige Minuten. Lade dein PDF hoch, rufe den Einbettungscode ab und füge ihn in einen Squarespace-Codeblock ein — deine Besucher erhalten ein professionelles, interaktives Leseerlebnis, ohne deine Website zu verlassen.

Erstelle dein kostenloses Flipbook auf FlipLink und bette es noch heute auf deiner Squarespace-Website ein. Schau dir unsere Preisseite an, um zu sehen, was in jedem Plan enthalten ist.