Slik bygger du inn en digital publikasjon på nettstedet ditt

Å publisere en digital utgave er to beslutninger, ikke én: hvordan den leses og hvor den bor. De fleste verktøy svarer strålende på det første og avgjør stille det andre for deg: katalogen din ender på en side du ikke eier, under et merke som ikke er ditt, foran et publikum du ikke kan fakturere.

Denne guiden handler om den andre beslutningen: å sette leseren inn i ditt eget nettsted — og de få detaljene som skiller et rent embed fra et som knuser på mobil, blokkeres av CMS-et ditt eller returnerer 404 en tirsdag fordi noen omdøpte et domene.

Hvorfor bygge inn i stedet for bare å publisere en lenke

En lenke til en hostingplattform er, skal vi være ærlige, lettere. Den koster ingenting og tar ti sekunder. Å bygge inn koster rundt ti minutter og gir deg tilbake:

• Besøket. Trafikken blir på URL-en din, der også navigasjonen din, kontaktskjemaet ditt og produktknappene dine bor. En lenke sender leserne et sted du ikke er.
• Konteksten. Et embed kan stå rett under produktsiden det tilhører, mellom to artikler eller inne på en kundeprojekts side.
• Presentasjonen. Bredde, høyde, omgivende layout, om den vises over eller under folden.

Et ærlig forbehold om søk: innhold inne i en iframe behandles ikke pålitelig som innhold på din side. Vil du at søkemotorer skal se substans, skriv et ekte avsnitt og en innholdsfortegnelse rett på siden, og la den innbygde leseren bære opplevelsen. Bygg ikke inn en publikasjon på en tom side og forvent rangering.

Steg 1: slå på innbygging for den publikasjonen

Innbygging er vanligvis en innstilling per publikasjon, ikke per konto — og det er riktig: du bestemmer, nummer for nummer, hva som kan dukke opp på nettstedet ditt.

I Flipable er det bryteren Innbygging aktivert på katalogens detaljside. Når den er av, returnerer embed-URL-en til den katalogen 404 overalt: nøyaktig oppførselen du vil ha mens en publikasjon er under embargo eller er trukket tilbake.

Publikasjonen må også ha fullført konverteringen. En katalog som fortsatt behandles, eller har feilet, renderes ikke — du får en ventemelding i stedet for en leser.

Steg 2: whiteliste domenet som skal hoste det

Før koden fungerer, må domenet registreres. Flipable fører en whitelist per workspace under Innstillinger → Domains & Embed → Tillatte domener, og en iframe fra et domene utenfor avvises.

To ting som er verdt å forstå om hvordan matchingen fungerer:

• Ett domene dekker alle underdomenene sine. Å legge til example.com autoriserer også www.example.com, shop.example.com og staging.example.com. For de fleste nettsteder betyr det at det trengs nøyaktig én oppføring.
• Matchingen gjelder rotdomenet, ikke hele URL-en. blog.example.com og example.com er samme oppføring; example.net er en annen. En kampanjemikrosite på en annen rot trenger altså sin egen oppføring.

Domeneslotter er begrenset av planen: én på Free, Starter og Pro, to på Growth, tre på Business. Skal du publisere på tre eller flere urelaterte rotdomener, planlegg det før du signerer kundekontrakter — ikke etterpå.

Steg 3: kopier embed-koden og lim den inn som HTML

Detaljsiden for hver katalog gir deg et ferdig snippet så snart innbygging er aktivert og det finnes et token:

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

Lim den inn i noe som godtar rå HTML, ikke i et felt med formatert tekst:

• WordPress: en Custom HTML-blokk (egendefinert HTML)
• Webflow: et Embed-element
• Shopify: en Custom Liquid-seksjon
• Squarespace: en Code-blokk
• Håndbygget nettsted: hvor som helst i body

Tilbyr CMS-et både "visuell" og "HTML"-redigeringsmodus, bruk HTML. Rich text-redigerere er den vanligste måten embeds stille dør på: de konverterer gjerne rette anførselstegn til typografiske, og nettleseren leser deretter søppel.

Steg 4: fiks høyden før noen åpner den på en telefon

Dette er steget som hoppes over — og det er det leserne legger merke til.

Den innbygde siden fyller høyden du gir den. En iframe med height="600" betyr at leseren lever inne i et vindu på 600 piksler: behagelig på desktop; på en telefon blir det en rulleboks inne i siden din som allerede ruller. To scroll-områder som kjemper om skjermen på en berøringsskjerm er en genuint dårlig opplevelse; folk skylder på publikasjonen, ikke på containeren.

Et mer robust standardmønster:

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

• clamp() gir telefoner et brukbart vindu, lar desktop vokse og holder nettbrett unna en mager stripe.
• frameborder er utdatert; border:0 er slik man gjør det i dag.
• Sett en eksplisitt title. Det er framen tilgjengelige navn, og det koster ingenting.
• For en fullskjerms-landing fungerer height:100vh — men regn med en fast header, eller bytt til 100dvh slik at mobilnettleserens linje ikke spiser bunnen av leseren.

Se den deretter på en ekte telefon, i portrett og landscape, før du sender lenken til noen viktige.

Steg 5: bestem hvor den lastes på siden

Er publikasjonen sidens raison, sett den på første skjermbilde og ikke last den lazy. Støtter den siden — et teknisk datablad inne i en lang produktbeskrivelse — legg til loading="lazy", slik at den som aldri scroller så langt, aldri laster den ned.

En konsekvens verdt å kjenne: visninger telles når leseren faktisk lastes. Et lazy embed under folden viser færre visninger enn selve siden, fordi en del av de besøkende aldri kom dit. Det er ikke en tellefeil; det er en beskrivelse av atferd. Døm et embeds ytelse ut fra scrolldybden på siden det bor på.

Hva som faktisk beskytter en publikasjon

Tre mekanismer — og det er verdt å vite nøyaktig hvor langt hver enkelt rekker:

• En URL ingen kan gjette. Embed-stien bærer et token på workspace-nivå. Ingen kan gjette et katalogs embed-adresse; en URL er i praksis en hemmelighet — behandle den slik, og ikke lim den inn i offentlige fora.
• En domenerliste pluss frame-ancestors. Bare verter på whitelisten får lov til å innramme publikasjonen; nettleseren vet det via en Content-Security-Policy bygget fra din egen liste over tillatte domener, slik at uautorisert innbygging feiler i stedet for bare å se feil ut.
• En avstengningsbryter per katalog. Å slå av embed bryter umiddelbart hvert embed av den publikasjonen, uansett hvor de står. Det er din nødbryter.

Og nå grensen, sagt klart: en whitelist er ikke en paywall. Å åpne embed-URL-en direkte i en nettleserfane, i stedet for inne i en iframe, er mulig — domene­kontrollen handler om hvem som får lov til å innramme innholdet ditt, ikke hvem som får lov til å lese det. Ligger en publikasjon virkelig bak et abonnement, beskytt siden som inneholder embedet med din egen autentisering. Verktøyets arbeid slutter ved "hvem får lov til å innramme dette"; "hvem får lov til å lese dette" er nettstedets arbeid.

Når det ikke virker, sjekk i denne rekkefølgen

1. Embed av for den katalogen. Symptom: en 404 i framen. Langt den vanligste årsaken.
2. Vertsdomenet står ikke på whitelisten. Les det nøyaktige rotdomenet på nytt i nettleserens adresselinje, på siden som bygger inn.
3. Feil katalog-ID eller token kopiert fra et annet workspace. De er lange, ugjennomtrengelige strenger; å lime inn midtstykket er lett.
4. Konvertering fortsatt pågår, eller har feilet. Symptom: en ventemelding eller en feilbanner på katalogsiden.
5. Ditt eget nettsted blokkerer frames. En streng frame-src i din egen Content-Security-Policy, eller et sikkerhetsplugin som gjør det samme, blokkerer tredjeparts-iframer — også din egen.
6. HTTPS-mismatch. Å bygge inn en HTTPS-leser på en HTTP-side er tillatt; det omvendte får nettleserne til å begynne å murre. Fiks sertifikatet.
7. CMS-et har lemlastet markuppen. Se på kilden til den publiserte siden og kontrollér at attributtene fortsatt står riktig i anførselstegn.

Pre-flight-sjekkliste

• Innbygging aktivert for den spesifikke publikasjonen
• Rotdomene på whitelisten (underdomener følger med gratis)
• Snippet limt inn i en HTML-blokk, ikke i et felt med formatert tekst
• title-attributt satt på framen
• Høyde testet på en telefon, i portrett og landscape
• Embeds under folden med loading="lazy"
• Siden inneholder ekte tekst hvis den skal indekseres
• Analytics sjekket dagen etter, ikke kvartalet etter

Prøv det på en publikasjon

Den raskeste måten å finne ut om innbygging passer for nettstedet ditt er å sende én eksisterende PDF gjennom prosessen — en katalog, et domene, en side, sjekket på en telefon. Det er nettopp formen på gratisplanen: én publikasjon, 100 sider per katalog, ett embeddomene, med et lite "Powered by Flipable"-skilt på leseren. Skiltet er reklamen vår — derfor er planen så rundhåndet. Er skiltet et problem for kundearbeidet ditt, er det akkurat det betalingsplanene fjerner.