Che tu stia pubblicando un catalogo prodotti, una rivista digitale o un manuale di formazione, incorporare un flipbook nel tuo sito fa sì che i tuoi contenuti non passino inosservati. Questo articolo illustra ogni metodo, piattaforma e impostazione che ti servono per andare online oggi stesso.
Pubblicare un PDF statico sul tuo sito equivale a consegnare a qualcuno un opuscolo stampato e poi andarsene. Un flipbook incorporato, con le sue animazioni di sfoglio di pagina, un layout adattivo per i dispositivi mobili e i controlli interattivi, tiene i visitatori sulla pagina, fa cliccare di più e fa sì che i tuoi contenuti vengano letti davvero. Flipbooks AI richiede meno di cinque minuti, indipendentemente dal fatto che tu gestisca un blog WordPress, uno store Shopify o una pagina HTML scritta a mano.
Questo articolo illustra ogni metodo per incorporare un flipbook nel tuo sito, le impostazioni che contano, gli errori che rompono l’incorporamento e i casi d’uso reali che rendono utile farlo bene.
Prima di incollare una sola riga di codice, conviene sapere con che cosa si ha a che fare. Un flipbook incorporato non è un’immagine né un’anteprima statica di un PDF. È una pubblicazione digitale completamente interattiva e autonoma, che si carica dentro la tua pagina web, nel punto esatto in cui la inserisci.
La maggior parte delle piattaforme, Flipbooks AI compresa, fornisce l’incorporamento tramite un tag <iframe>. L’iframe crea una finestra isolata dentro la tua pagina, che carica il lettore del flipbook in modo indipendente. Questo significa che:
Alcune piattaforme offrono anche incorporamenti basati su JavaScript, che inseriscono il lettore direttamente nel DOM. Danno un controllo programmatico maggiore (per esempio, attivare lo sfoglio delle pagine tramite codice), ma richiedono una configurazione tecnica più complessa e possono entrare in conflitto con gli script esistenti.
💡 Per la maggior parte degli utenti, l’incorporamento con iframe è la scelta giusta. È stabile, portabile e non richiede alcuna conoscenza di programmazione.
Un incorporamento a larghezza fissa imposta dimensioni esatte in pixel. È semplice, ma si rompe sugli schermi dei telefoni. Un incorporamento adattivo usa una larghezza in percentuale e un trucco con il padding per mantenere le proporzioni su tutti i dispositivi.
| Tipo di incorporamento | Ideale per | Adatto ai dispositivi mobili |
|---|---|---|
| iframe a larghezza fissa | Contesti noti solo per desktop | No |
| iframe adattivo | La maggior parte dei siti, tutti i pubblici | Sì |
| Incorporamento JavaScript | Attivazioni controllate dallo sviluppatore | Dipende dall’implementazione |
| Widget della piattaforma | Creatori di siti web (Wix, Squarespace) | Sì (la piattaforma se ne occupa) |
Flipbooks AI genera di default codici di incorporamento adattivi, così il tuo flipbook si regola automaticamente su qualsiasi larghezza di schermo.
Il codice di incorporamento è il breve blocco di HTML che copi dalla piattaforma del flipbook e incolli nel tuo sito. Ecco come ottenerlo.
Il codice ha questo aspetto:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Prima di copiare, puoi regolare diverse impostazioni direttamente nel pannello di incorporamento:
| Impostazione | Che cosa controlla | Valore consigliato |
|---|---|---|
| Larghezza | Larghezza del lettore nella pagina | 100% (adattivo) |
| Altezza | Altezza del lettore in pixel | 500-700px a seconda del contenuto |
| Riproduzione automatica | Gira le pagine al caricamento | Disattivata (l’utente preferisce il controllo) |
| Pagina iniziale | Quale pagina si apre per prima | 1 (copertina) |
| Controlli visibili | Mostra o nasconde la barra di navigazione | Attivi |
| Pulsante a schermo intero | Consente la modalità a schermo intero | Attivo |
⚠️ Se imposti una larghezza fissa in pixel invece del 100%, l’incorporamento uscirà dai margini sugli schermi dei telefoni. Verifica sempre su un telefono prima di pubblicare.
WordPress è la piattaforma più diffusa per incorporare i flipbook, e richiede circa 90 secondi.
Con l’editor classico:
Con l’editor a blocchi (Gutenberg):
💡 Alcuni plugin di sicurezza per WordPress (come Wordfence o iThemes) rimuovono i tag iframe dal contenuto degli articoli. Se l’incorporamento scompare dopo il salvataggio, controlla le impostazioni del plugin di sicurezza e inserisci nella lista consentita il dominio di Flipbooks AI.
Con un page builder (Elementor, Divi, Beaver Builder):
Entrambe le piattaforme usano i propri editor con trascinamento, ma supportano entrambe gli incorporamenti HTML diretti.
Squarespace:
Wix:
I rivenditori incorporano spesso cataloghi prodotti e lookbook direttamente nelle pagine di collezione o nella homepage. Shopify usa un sistema di template Liquid, ma l’incorporamento resta semplice.
In una pagina:
Nelle sezioni della homepage:
Dovrai modificare il index.liquid del tema oppure usare una sezione HTML personalizzata, se il tuo tema la supporta. La maggior parte dei temi Shopify moderni include una sezione Contenuto personalizzato in cui puoi inserire HTML direttamente.
✅ Per gli store Shopify, gli strumenti Creatore di cataloghi digitali gratis e Generatore di cataloghi prodotti di Flipbooks AI sono particolarmente adatti a incorporare lookbook stagionali e vetrine di prodotti.
Se lavori con un file HTML scritto a mano o con un generatore di siti statici, questo è il caso più semplice:
<div class="flipbook-container" style="width:100%; max-width:900px; margin:0 auto;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Avvolgilo in un div con un max-width per evitare che si allunghi troppo sui monitor grandi.
Definire bene le dimensioni è il punto in cui fallisce la maggior parte degli incorporamenti. Il flipbook sembra a posto sul desktop, ma si schiaccia in un riquadro minuscolo sul telefono, oppure si allarga in modo goffo su un monitor ampio.
La configurazione più sicura per qualsiasi sito:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Il valore padding-bottom: 56.25% crea un contenitore con proporzioni 16:9. L’iframe lo riempie completamente. Cambia 56.25% in 75% per un rapporto 4:3, che funziona meglio per le pubblicazioni in formato verticale.
Flipbooks AI ottimizza automaticamente il lettore del flipbook per gli schermi touch: i gesti di scorrimento sostituiscono la navigazione con il clic, l’interfaccia si ridimensiona e lo zoom a pizzico funziona sulle pagine della pubblicazione. Non devi creare una versione mobile separata.
✅ Verifica il tuo incorporamento su un dispositivo mobile reale, non solo con la modalità di emulazione del browser. Gli strumenti per sviluppatori del browser non simulano gli eventi touch allo stesso modo di un dispositivo reale.
Prima di incorporare qualsiasi cosa, ti serve il flipbook. Ecco come crearlo da zero su Flipbooks AI:
💡 Il Convertitore da PDF a flipbook e lo strumento Incorpora flipbook sul sito web semplificano l’intero flusso di lavoro in un unico posto.
Funzioni incluse per piano:
| Funzione | Free | Standard | Professional |
|---|---|---|---|
| Flipbook per account | 3 | Illimitati | Illimitati |
| Personalizzazione del marchio | Parziale | Completa | Completa |
| Protezione con password | No | Sì | Sì |
| Dashboard delle statistiche | No | No | Sì |
| Moduli di contatto | No | No | Sì |
| Download offline | No | No | Sì |
| Incorporamento sul sito | Sì | Sì | Sì |
| Nessuna filigrana | No | Sì | Sì |
Confronta tutti i piani per capire quale si adatta al tuo modo di lavorare.
L’incorporamento non è solo una funzione tecnica, è uno strumento per convertire i visitatori in clienti. Ecco come lo usano diverse attività:
Retail ed e-commerce: I cataloghi prodotti incorporati nelle pagine di collezione aumentano il tempo trascorso sul sito e riducono la frequenza di uscita. Gli acquirenti sfogliano il catalogo come un lookbook fisico, poi cliccano per passare alle pagine dei prodotti. Il Creatore di lookbook interattivi è pensato proprio per questo caso d’uso.
Ristoranti: Una carta digitale incorporata nella homepage del ristorante sostituisce le gallerie di immagini statiche. È più facile da aggiornare (carichi un nuovo PDF e l’incorporamento si aggiorna da solo) e più coinvolgente di una lunga pagina da scorrere. Usa il Creatore di flipbook per menù di ristoranti per progettarlo.
Immobiliare: Le brochure degli immobili incorporate nelle schede degli immobili permettono agli acquirenti di sfogliare planimetrie, foto e informazioni sul quartiere senza lasciare il sito. Il Creatore di brochure immobiliari produce PDF pronti per la stampa che si convertono perfettamente.
Istruzione e formazione: I materiali didattici, i manuali di formazione e i documenti di inserimento incorporati in un portale di apprendimento sono molto più coinvolgenti dei PDF scaricabili. Il Flipbook per manuali di formazione e l’Editore di materiale didattico interattivo supportano direttamente questo flusso di lavoro.
Marketing e PR: Le relazioni annuali incorporate nelle pagine per gli investitori, i press kit nelle pagine dedicate ai media e le presentazioni commerciali nelle pagine di destinazione beneficiano tutti del formato interattivo. Il Creatore di relazioni annuali interattive gestisce in modo ordinato documenti complessi su più pagine.
Se il flipbook è impostato come Privato o Protetto da password, l’incorporamento mostrerà una richiesta di accesso o un’area vuota ai visitatori anonimi. Prima di incorporarlo, assicurati che l’impostazione di condivisione sia Pubblica, oppure comunica la password al tuo pubblico separatamente.
Alcuni temi applicano restrizioni overflow: hidden o max-height alle aree di contenuto, che tagliano o nascondono l’iframe. Se il tuo flipbook appare tagliato:
.your-content-area {
overflow: visible !important;
}
Oppure avvolgi l’iframe in un contenitore con un’altezza esplicita, così gli stili del tema non lo comprimono.
In WordPress e negli editor simili, se incolli il codice iframe nell’editor Visuale (WYSIWYG) invece che nell’editor HTML/Testo, la piattaforma rimuoverà il tag iframe per motivi di sicurezza. Passa sempre alla vista HTML grezzo prima di incollare.
Le bozze e le anteprime a volte si comportano diversamente dalle pagine pubblicate, soprattutto con i plugin di cache attivi. Dopo la pubblicazione, apri l’URL pubblico in una finestra di navigazione in incognito per verificare che l’incorporamento si visualizzi correttamente per un visitatore che arriva per la prima volta.
⚠️ I plugin di cache (WP Super Cache, W3 Total Cache) a volte servono una versione memorizzata della pagina senza l’incorporamento, se è stata salvata in cache prima che aggiungessi il flipbook. Svuota la cache dopo aver aggiunto il codice di incorporamento.
| Piattaforma | Metodo di incorporamento | Livello tecnico | Tempo richiesto |
|---|---|---|---|
| WordPress (editor a blocchi) | Blocco HTML personalizzato | Principiante | 2 minuti |
| WordPress (editor classico) | Scheda Testo, incolla HTML | Principiante | 1 minuto |
| Elementor / Divi | Widget HTML | Principiante | 2 minuti |
| Squarespace | Blocco Codice | Principiante | 2 minuti |
| Wix | Widget iframe HTML | Principiante | 3 minuti |
| Shopify | Codice sorgente della pagina | Intermedio | 5 minuti |
| Webflow | Elemento HTML Embed | Principiante | 2 minuti |
| HTML puro | Incolla direttamente | Principiante | 1 minuto |
Una volta che il flipbook è attivo sul tuo sito, il piano Professional di Flipbooks AI ti dà accesso alla dashboard delle statistiche. Puoi vedere quanti visitatori hanno aperto l’incorporamento, su quali pagine hanno trascorso più tempo, fino a che punto hanno letto e se hanno cliccato su qualche link interno.
Questi dati ti dicono più di un semplice conteggio delle visualizzazioni di pagina. Se i lettori abbandonano costantemente a pagina 4 di un catalogo da 20 pagine, quella pagina va migliorata. Se l’ultima pagina è quella dove si trascorre più tempo, la tua call to action sta facendo il suo lavoro.
I moduli di contatto, disponibili nel piano Professional, ti permettono di riservare il flipbook a chi si registra tramite un modulo di iscrizione, raccogliendo le email direttamente dai lettori che interagiscono con la tua pubblicazione incorporata.
Pronto a mettere un flipbook sul tuo sito? Crea il tuo primo flipbook su Flipbooks AI gratis, copia il codice di incorporamento dal pannello Condividi e incollalo dove il tuo pubblico passa già il tempo. Esplora tutti gli strumenti e i template per trovare il formato giusto per i tuoi contenuti, oppure consulta i piani e i prezzi se ti servono flipbook illimitati, personalizzazione del marchio e statistiche fin dal primo giorno.
Scegli la tua lingua
