Come incorporare un flipbook in Squarespace

Aggiungere un flipbook interattivo al tuo sito Squarespace trasforma i contenuti PDF statici in un'esperienza coinvolgente di sfogliamento per i tuoi visitatori. Che tu stia mostrando un catalogo prodotti, un portfolio o una brochure aziendale, incorporare un flipbook FlipLink richiede solo pochi minuti una volta che conosci l'approccio giusto.

Questa guida ti accompagna in ogni passaggio — da come prendere il codice di incorporamento in FlipLink a come incollarlo in Squarespace e assicurarti che appaia bene su ogni dimensione di schermo.

Cosa ti serve prima di iniziare

Prima di incorporare un flipbook, assicurati di avere quanto segue pronto:

• Un flipbook FlipLink pubblicato — Carica il tuo PDF su go.fliplink.me e pubblicalo. Ti servirà il codice di incorporamento o il link di condivisione dalla tua dashboard.
• Un piano Squarespace Business o superiore — L'iniezione di codice e i blocchi di codice personalizzati richiedono almeno il piano Business. I piani Personal e basic non supportano l'incorporamento di HTML personalizzato o iframe.
• Accesso all'editor del tuo sito Squarespace — Modificherai le pagine direttamente nel page builder di Squarespace.

Se non hai ancora creato il tuo flipbook, consulta la nostra guida sulle opzioni di condivisione e distribuzione per capire tutti i modi in cui puoi condividere il tuo flipbook una volta pronto.

Passo 1: Ottieni il codice di incorporamento da FlipLink

Una volta che il tuo flipbook è pubblicato in FlipLink, ottenere il codice di incorporamento è semplice:

1. Accedi alla tua dashboard FlipLink su go.fliplink.me.
2. Apri il flipbook che vuoi incorporare.
3. Clicca il pulsante Condividi.
4. Seleziona la scheda Incorpora.
5. Copia il codice iframe fornito.

Il codice di incorporamento appare così:

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

Tieni questo codice a portata di mano — lo incollerai in Squarespace nel prossimo passaggio.

Passo 2: Aggiungi un blocco di codice in Squarespace

Squarespace usa un editor basato su blocchi e il Blocco Codice è dove incollerai il codice di incorporamento del tuo flipbook.

1. Apri la pagina dove vuoi che appaia il flipbook.
2. Clicca Modifica sulla pagina.
3. Passa il mouse sulla sezione dove vuoi posizionare il flipbook e clicca il punto di inserimento (la linea con l'icona più).
4. Seleziona Codice dalle opzioni dei blocchi. Se non lo vedi, cerca “Codice” nel selettore dei blocchi.
5. Incolla il codice iframe di FlipLink nel blocco di codice.
6. Deseleziona l'opzione “Mostra sorgente” — questo è fondamentale. Se Mostra sorgente è selezionato, Squarespace mostrerà l'HTML grezzo come testo invece di renderizzare il flipbook.
7. Clicca Salva e poi esci dall'editor per visualizzare l'anteprima della pagina.

Il tuo flipbook dovrebbe ora apparire direttamente sulla pagina, completo di animazioni interattive di sfogliamento.

Passo 3: Rendi il flipbook responsive

Il codice di incorporamento predefinito funziona bene su desktop, ma vorrai assicurarti che si ridimensioni correttamente su tablet e dispositivi mobile. Ecco una versione migliorata del codice di incorporamento con stili responsive:

<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>

Il padding-bottom: 75% crea un contenitore con rapporto 4:3. Regola questo valore in base alle dimensioni del tuo flipbook:

• Rapporto 4:3 (orizzontale): padding-bottom: 75%
• Rapporto 16:9 (panoramico): padding-bottom: 56.25%
• Rapporto 3:4 (verticale): padding-bottom: 133%
• Rapporto 1:1 (quadrato): padding-bottom: 100%

Questa tecnica è chiamata metodo “aspect ratio box”. L'iframe riempie perfettamente il suo contenitore e il contenitore si ridimensiona fluidamente con la larghezza della pagina.

Passo 4: Configura il whitelisting del dominio

Se hai abilitato il whitelisting del dominio sul tuo flipbook per sicurezza, devi aggiungere il tuo dominio Squarespace alla lista consentita. Altrimenti, l'incorporamento verrà bloccato dal caricamento.

1. Nella tua dashboard FlipLink, apri le impostazioni del flipbook.
2. Naviga alla sezione Whitelisting del dominio.
3. Aggiungi il tuo dominio Squarespace (es. www.tuodominio.com o tuodominio.squarespace.com).
4. Salva le impostazioni.

Il whitelisting del dominio è opzionale ma consigliato se vuoi impedire ad altri di incorporare il tuo flipbook su siti web non autorizzati. Assicura che i tuoi contenuti appaiano solo dove li hai previsti.

Usare l'iniezione di codice di Squarespace (a livello di sito)

Se vuoi che un flipbook appaia su ogni pagina — ad esempio, in un'area footer o header — puoi usare la funzionalità Iniezione di codice di Squarespace invece dei singoli blocchi di codice.

1. Vai su Impostazioni → Avanzate → Iniezione di codice.
2. Incolla il tuo codice di incorporamento nel campo Footer (o Header, a seconda del posizionamento).
3. Avvolgilo in un div contenitore con stili appropriati per controllarne la posizione.
4. Clicca Salva.

Questo approccio è utile per banner a livello di sito o widget flipbook persistenti, anche se per la maggior parte dei casi d'uso, un blocco di codice su una pagina specifica è la scelta migliore.

Approcci alternativi

Non tutte le situazioni richiedono un incorporamento iframe completo. Ecco due alternative più semplici che funzionano su qualsiasi piano Squarespace, incluso il Personal:

Blocco Link con miniatura

Invece di incorporare il flipbook direttamente, aggiungi un link visuale che apre il flipbook in una nuova scheda:

1. Fai uno screenshot della copertina del tuo flipbook.
2. Aggiungi un Blocco Immagine alla tua pagina Squarespace con lo screenshot.
3. Aggiungi un link all'immagine che punta al tuo URL di condivisione FlipLink.
4. Imposta il link per aprirsi in una nuova finestra.

Questo approccio funziona su ogni piano Squarespace e ti dà il pieno controllo sulla presentazione visiva. I visitatori cliccano l'immagine di copertina e ottengono l'esperienza completa del flipbook in una nuova scheda.

Blocco Pulsante

Per un approccio più pulito, in stile call-to-action:

1. Aggiungi un Blocco Pulsante alla tua pagina.
2. Imposta il testo del pulsante su qualcosa come “Visualizza il nostro catalogo” o “Leggi la brochure.”
3. Collegalo al tuo URL di condivisione FlipLink.
4. Impostalo per aprirsi in una nuova scheda.

Questo è il metodo più semplice e funziona in modo affidabile su tutti i piani e dispositivi.

Risoluzione dei problemi comuni

Il flipbook non appare dopo il salvataggio

Assicurati di aver deselezionato “Mostra sorgente” nelle impostazioni del blocco di codice. Quando questa opzione è abilitata, Squarespace renderizza il codice come testo semplice invece di eseguirlo.

L'incorporamento è bloccato o mostra un frame vuoto

Controlla le impostazioni di whitelisting del dominio in FlipLink. Se il whitelisting è abilitato, il tuo dominio Squarespace deve essere nella lista consentita. Verifica anche che il tuo piano Squarespace supporti i blocchi di codice — serve Business o superiore.

Il flipbook è tagliato su mobile

Usa il wrapper responsive mostrato nel Passo 3. La tecnica dell'aspect ratio box assicura che l'iframe si ridimensioni correttamente. Se vedi ancora problemi, prova a ridurre leggermente la percentuale di padding-bottom per adattarla meglio al viewport mobile.

Squarespace dice “Aggiorna per usare codice personalizzato”

I blocchi di codice e l'iniezione di codice sono disponibili solo sui piani Squarespace Business, Commerce Basic e Commerce Advanced. Se sei su un piano Personal, usa le alternative del blocco link o blocco pulsante descritte sopra.

Consigli per la migliore esperienza

• Scegli il posizionamento giusto nella pagina. Posiziona il tuo flipbook in una sezione a larghezza piena per il massimo impatto. Evita di incorporarlo in barre laterali strette dove l'esperienza di sfogliamento risulta compressa.
• Imposta un'altezza significativa. Se non stai usando il wrapper responsive, imposta l'altezza dell'iframe ad almeno 600px per desktop. Qualsiasi misura inferiore rende la lettura scomoda.
• Aggiungi contesto intorno all'incorporamento. Includi un titolo e una breve descrizione sopra il flipbook così i visitatori capiscono cosa stanno guardando prima di iniziare a sfogliare.
• Testa su più dispositivi. Visualizza l'anteprima della tua pagina su desktop, tablet e mobile prima di pubblicare. L'anteprima dispositivi integrata di Squarespace rende questo facile.

Risorse correlate

Se stai incorporando flipbook su altre piattaforme, queste guide possono aiutarti:

• How to Embed a PDF on Any Website
• How to Embed a Flipbook in WordPress
• How to Embed a Flipbook with an Iframe

Inizia a incorporare il tuo flipbook oggi

Creare e incorporare un flipbook su Squarespace richiede solo pochi minuti con FlipLink. Carica il tuo PDF, copia il codice di incorporamento e inseriscilo in un blocco di codice Squarespace — i tuoi visitatori ottengono un'esperienza di lettura interattiva e curata senza lasciare il tuo sito.

Crea il tuo flipbook gratuito su FlipLink e inizia a incorporarlo nel tuo sito Squarespace oggi stesso. Consulta la nostra pagina dei prezzi per vedere cosa è incluso in ogni piano.