Come incorporare una pubblicazione digitale sul tuo sito web

Pubblicare un'edizione digitale significa due decisioni, non una: come si legge e dove vive. La maggior parte degli strumenti risponde splendidamente alla prima e prende silenziosamente la seconda per te: il tuo catalogo finisce su una pagina che non possiedi, con un marchio che non è il tuo, davanti a un pubblico che non puoi fatturare.

Questa guida riguarda la seconda decisione: mettere il lettore dentro il tuo sito, e i pochi dettagli che separano un embed pulito da uno che si rompe su mobile, viene bloccato dal tuo CMS o restituisce un 404 un martedì perché qualcuno ha rinominato un dominio.

Perché incorporare invece di pubblicare solo un link

Un link verso una piattaforma di hosting è, a onor del vero, più semplice. Non costa nulla e richiede dieci secondi. Incorporare costa una decina di minuti e ti restituisce:

• La visita. Il traffico resta sul tuo URL, dove vivono anche la tua navigazione, il tuo modulo di contatto e i tuoi pulsanti prodotto. Un link manda i lettori dove tu non sei.
• Il contesto. Un embed può stare direttamente sotto la scheda prodotto a cui appartiene, tra due articoli o dentro la pagina di un progetto cliente.
• La presentazione. Larghezza, altezza, layout circostante, se compare sopra o sotto la piega.

Un'avvertenza onesta sulla ricerca: il contenuto dentro un iframe non viene trattato in modo affidabile come contenuto della tua pagina. Se vuoi che i motori di ricerca vedano sostanza, scrivi un paragrafo vero e un indice direttamente nella pagina e lascia al lettore incorporato il compito di portare l'esperienza. Non incorporare una pubblicazione su una pagina vuota aspettandoti posizionamenti.

Passo 1: attivare l'incorporamento per quella pubblicazione

L'incorporamento è di solito un'impostazione per pubblicazione, non per conto — ed è giusto così: decidi tu, numero per numero, cosa può comparire sul tuo sito.

In Flipable è l'interruttore Embed abilitato nella pagina di dettaglio del catalogo. Quando è spento, l'URL di embed di quel catalogo restituisce un 404 ovunque: esattamente il comportamento che vuoi mentre una pubblicazione è sotto embargo o è stata ritirata.

La pubblicazione deve anche aver finito di convertirsi. Un catalogo ancora in elaborazione, o fallito, non si renderizza — otterrai un messaggio di attesa invece di un lettore.

Passo 2: mettere in whitelist il dominio che lo ospiterà

Prima che il codice funzioni, il dominio va registrato. Flipable tiene una lista di consentiti per spazio di lavoro sotto Impostazioni → Domains & Embed → Domini consentiti, e un iframe da qualsiasi dominio fuori da essa viene rifiutato.

Due cose da capire su come funziona la corrispondenza:

• Un dominio copre tutti i suoi sottodomini. Aggiungere example.com autorizza anche www.example.com, shop.example.com e staging.example.com. Per la maggior parte dei siti significa che serve esattamente una voce.
• La corrispondenza è sul dominio radice, non sull'URL completo. blog.example.com e example.com sono la stessa voce; example.net è un'altra. Quindi un microsito di campagna su un'altra radice ha bisogno di una voce propria.

Gli slot di dominio sono limitati dal piano: uno su Free, Starter e Pro, due su Growth, tre su Business. Se pubblichi su tre o più domini radice non correlati, pianificalo prima di firmare contratti con i clienti — non dopo.

Passo 3: copiare il codice embed e incollarlo come HTML

La pagina di dettaglio di ogni catalogo ti fornisce uno snippet pronto non appena l'embed è abilitato ed esiste un token:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Incollalo in qualcosa che accetta HTML puro, non in un campo di testo formattato:

• WordPress: un blocco HTML personalizzato
• Webflow: un elemento Embed
• Shopify: una sezione Custom Liquid
• Squarespace: un blocco Code
• Sito scritto a mano: ovunque nel corpo

Se il tuo CMS offre sia una modalità di modifica «visuale» sia una «HTML», usa la modalità HTML. Gli editor di testo formattato sono il modo più comune con cui gli embed muoiono in silenzio: convertono volentieri le virgolette dritte in tipografiche, e il browser legge poi spazzatura.

Passo 4: correggere l'altezza prima che qualcuno lo apra su un telefono

Questo è il passo che viene saltato, ed è quello che i lettori notano.

La pagina incorporata riempie l'altezza che le dai. Un iframe con height="600" significa che il lettore vive dentro una finestra di 600 pixel: comoda sul desktop, e su un telefono diventa una casella scorrevole dentro la tua pagina già scorrevole. Due aree di scroll che si contendono lo schermo sono una vera cattiva esperienza; la gente dà la colpa alla pubblicazione, non al contenitore.

Un'impostazione predefinita più robusta:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        title="Catalogo autunno/inverno"
        style="width:100%;height:clamp(500px,75vh,900px);border:0"
        allowfullscreen></iframe>

• clamp() dà ai telefoni una finestra utilizzabile, lascia crescere il desktop ed evita che i tablet ricevano una striscia stentata.
• frameborder è obsoleto; border:0 è come si fa quel lavoro oggi.
• Imposta un title esplicito. È il nome accessibile del frame, e non costa nulla.
• Per una landing a tutto campo funziona height:100vh — ma tieni conto di un'intestazione fissa, o passa a 100dvh perché la barra del browser mobile non si mangi il fondo del lettore.

Poi guardalo su un telefono vero, in verticale e in orizzontale, prima di inviare il link a qualcuno di importante.

Passo 5: decidere dove carica nella pagina

Se la pubblicazione è la ragione della pagina, mettila nella prima schermata e non caricarla in lazy. Se supporta la pagina — una scheda tecnica dentro una lunga descrizione prodotto — aggiungi loading="lazy" perché chi non scorre mai fin là non la scarichi mai.

Una conseguenza da conoscere: le visualizzazioni si contano quando il lettore si carica davvero. Un embed lazy sotto la piega mostrerà meno visualizzazioni della pagina stessa, perché una parte dei visitatori non è mai arrivata fin lì. Non è un bug del conteggio; è una descrizione del comportamento. Giudica la prestazione di un embed rispetto alla profondità di scorrimento della pagina in cui vive.

Cosa protegge davvero una pubblicazione

Tre meccanismi, e vale la pena sapere esattamente fino a dove arriva ciascuno:

• Un URL impossibile da indovinare. Il percorso di embed porta un token a livello di spazio di lavoro. Nessuno può indovinare l'indirizzo di embed di un catalogo; un URL è di fatto un segreto — trattalo come tale e non incollarlo in forum pubblici.
• Una lista di domini più frame-ancestors. Solo gli host in whitelist possono incorniciare la pubblicazione; il browser lo sa tramite una Content-Security-Policy costruita dalla tua stessa lista di domini consentiti, così l'incorporamento non autorizzato fallisce invece di apparire soltanto sbagliato.
• Un interruttore di spegnimento per catalogo. Spegnere l'embed rompe immediatamente ogni embed di quella pubblicazione, dovunque si trovi. È il tuo interruttore di arresto.

E ora il confine, detto chiaramente: una lista di consentiti non è un paywall. Aprire l'URL di embed direttamente in una scheda del browser, invece che dentro un iframe, è permesso — il controllo del dominio riguarda chi può incorniciare il tuo contenuto, non chi può leggerlo. Se una pubblicazione sta davvero dietro un abbonamento, proteggi con la tua autenticazione la pagina che contiene l'embed. Il compito dello strumento finisce a «chi può incorniciare questo»; «chi può leggere questo» è compito del tuo sito.

Quando non funziona, controlla in questo ordine

1. Embed spento per quel catalogo. Sintomo: un 404 nel frame. La causa più comune, e di gran lunga.
2. Il dominio ospite non è in whitelist. Rileggi il dominio radice esatto nella barra degli indirizzi del browser, sulla pagina che incorpora.
3. ID catalogo sbagliato o token copiato da un altro spazio di lavoro. Sono stringhe lunghe e opache; incollare la parte di mezzo è facile.
4. Conversione ancora in corso, o fallita. Sintomo: un messaggio di attesa o un banner di errore sulla pagina del catalogo.
5. Il tuo stesso sito blocca i frame. Un frame-src rigoroso nella tua Content-Security-Policy, o un plugin di sicurezza che fa lo stesso, bloccherà gli iframe di terze parti — compreso il tuo.
6. Disallineamento HTTPS. Incorporare un lettore HTTPS in una pagina HTTP è permesso; il contrario è dove i browser iniziano a lamentarsi. Sistema il certificato.
7. Il CMS ha sformato il markup. Guarda il sorgente della pagina pubblicata e verifica che gli attributi siano ancora correttamente tra virgolette.

Check-list pre-volo

• Embed abilitato per quella specifica pubblicazione
• Dominio radice in whitelist (i sottodomini vengono gratis)
• Snippet incollato in un blocco HTML, non in un campo di testo formattato
• Attributo title impostato sul frame
• Altezza provata su un telefono, in verticale e in orizzontale
• Embed sotto la piega con loading="lazy"
• La pagina contiene testo vero se vuoi che venga indicizzata
• Analytics controllati il giorno dopo, non il trimestre dopo

Provalo su una pubblicazione

Il modo più rapido per capire se l'embed fa al caso del tuo sito è far passare un singolo PDF esistente — un catalogo, un dominio, una pagina, verificati su un telefono. È proprio la forma del piano gratuito: una pubblicazione, 100 pagine per catalogo, un dominio di embed, con un piccolo badge «Powered by Flipable» sul lettore. Il badge è la nostra pubblicità — è per questo che il piano è così generoso. Se il badge è un problema per i tuoi lavori per clienti, è esattamente ciò che i piani a pagamento rimuovono.