Sådan indlejrer du en digital publikation på din egen hjemmeside
iframe-snippeten, listen over tilladte domæner, højdeproblemet, som ingen advarer dig om, og alle grunde til, at et embed kan returnere 404.
Publicering af en digital udgave er to beslutninger, ikke én: hvordan den læses, og hvor den bor. De fleste værktøjer svarer strålende på det første og afgør i stilhed det andet for dig: kataloget ender på en side, du ikke ejer, under et brand, der ikke er dit, foran et publikum, du ikke kan fakturere.
Denne guide handler om den anden beslutning: at sætte læseren inde i dit eget site — og de få detaljer, der adskiller et rent embed fra et, der går i stykker på mobil, blokeres af dit CMS eller returnerer 404 en tirsdag, fordi en person har omdøbt et domæne.
Hvorfor indlejre i stedet for blot at publicere et link
Et link til en hostingplatform er, skal vi være ærlige, lettere. Det koster ingenting og tager ti sekunder. Indlejring koster omkring ti minutter og giver dig tilbage:
- Besøget. Trafikken forbliver på din URL, hvor også din navigation, din kontaktformular og dine produktknapper bor. Et link sender læserne et sted hen, hvor du ikke er.
- Konteksten. Et embed kan stå direkte under den produktside, det tilhører, mellem to artikler eller inde på en kundeprojekts side.
- Præsentationen. Bredde, højde, omgivende layout, om det vises over eller under folden.
En ærlig advarsel om søgning: indhold inde i en iframe behandles ikke pålideligt som indhold på din side. Vil du have, at søgemaskiner skal se substans, så skriv et rigtigt afsnit og en indholdsfortegnelse direkte på siden, og lad den indlejrede læser bære oplevelsen. Indlejr ikke en publikation på en tom side og forvent rangering.
Trin 1: aktivér indlejring for den pågældende publikation
Indlejring er typisk en indstilling pr. publikation, ikke pr. konto — og det er korrekt: du beslutter, nummer for nummer, hvad der må dukke op på dit site.
I Flipable er det kontakten Integration aktiveret på katalogets detaljeside. Når den er slukket, returnerer embed-URL'en for det katalog 404 overalt: præcis den adfærd, du ønsker, mens en publikation er under embargo eller er trukket tilbage.
Publikationen skal også have afsluttet konverteringen. Et katalog, der stadig behandles, eller er fejlet, renderer ikke — du får en ventebesked i stedet for en læser.
Trin 2: whiteliste det domæne, der skal hoste det
Før koden virker, skal domænet registreres. Flipable fører en whitelist pr. workspace under Indstillinger → Domains & Embed → Tilladte domæner, og en iframe fra et domæne uden for den afvises.
To ting, det er værd at forstå om, hvordan matchingen virker:
- Ét domæne dækker alle dets subdomæner. At tilføje
example.comautoriserer ogsåwww.example.com,shop.example.comogstaging.example.com. For de fleste sider betyder det, at der skal præcis én post. - Matching sker på roddomænet, ikke den fulde URL.
blog.example.comogexample.comer samme post;example.neter en anden. En kampagnemikrosite på en anden rod har altså brug for sin egen post.
Domæneslots er begrænsset af planen: én på Free, Starter og Pro, to på Growth, tre på Business. Skal du udgive på tre eller flere urelaterede roddomæner, så planlæg det, inden du underskriver kundekontrakter — ikke bagefter.
Trin 3: kopier embed-koden og indsæt den som HTML
Detaljesiden for hvert katalog giver dig et færdigt snippet, så snart embed er aktiveret, og der findes et token:
<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Indsæt det i noget, der accepterer rå HTML, ikke i et felt med formateret tekst:
- WordPress: et Custom HTML-blok (brugerdefineret HTML)
- Webflow: et Embed-element
- Shopify: en Custom Liquid-sektion
- Squarespace: et Code-blok
- Håndbygget site: hvor som helst i body
Tilbyder dit CMS både "visuel" og "HTML"-redigeringstilstand, så brug HTML. Rich text-editorer er den mest almindelige måde, hvorpå embeds stille dør: de konverterer gerne lige anførselstegn til typografiske, og browseren læser derefter skrald.
Trin 4: ret højden, før nogen åbner den på en telefon
Dette er trinnet, der springes over — og det er det, læserne bemærker.
Den indlejrede side fylder den højde, du giver den. En iframe med height="600" betyder, at læseren lever inde i et vindue på 600 pixels: behageligt på desktop; på en telefon bliver det en rulleboks inde i din side, der allerede ruller. To scrollområder, der kæmper om skærmen på en touchskærm, er en ægte dårlig oplevelse; folk skyder på publikationen, ikke på containeren.
Et mere robust standardmønster:
<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
title="Efterårs-/vinterkatalog"
style="width:100%;height:clamp(500px,75vh,900px);border:0"
allowfullscreen></iframe>
clamp()giver telefoner et brugbart vindue, lader desktop vokse og holder tablets fra en stakket stribe.frameborderer forældet;border:0er sådan, man gør det i dag.- Sæt en eksplicit
title. Det er frame'ens tilgængelige navn, og det koster ingenting. - Til en fuldskærms-landing fungerer
height:100vh— men regn med en fast header, eller skift til100dvh, så mobilbrowserens bjælke ikke spiser bunden af læseren.
Se den derefter på en ægte telefon, i portræt og landscape, før du sender linket til en vigtig person.
Trin 5: beslut, hvor den loader på siden
Er publikationen sidens begrundelse, så sæt den i første skærmbillede og lad den ikke lazy-loade. Understøtter den siden — et teknisk datablad inde i en lang produktbeskrivelse — så tilføj loading="lazy", så den, der aldrig scroller så langt, heller aldrig downloader den.
En konsekvens, det er værd at kende: visninger tælles, når læseren faktisk loader. Et lazy embed under folden viser færre visninger end selve siden, fordi en del af besøgende aldrig nåede derop. Det er ikke en tællefejl; det er en beskrivelse af adfærd. Døm et embeds præstation ud fra scrollens dybde på den side, det bor på.
Hvad beskytter en publikation reelt
Tre mekanismer — og det er værd at vide præcis, hvor langt hver enkelt rækker:
- En URL, ingen kan gætte. Embed-stien bærer et token på workspace-niveau. Ingen kan gætte et katalogs embed-adresse; en URL er i praksis en hemmelighed — behandl den sådan, og indsæt den ikke i offentlige fora.
- En domæneliste plus
frame-ancestors. Kun hosts på whitelisten må indramme publikationen; browseren ved det via en Content-Security-Policy bygget fra din egen liste over tilladte domæner, så uautoriseret indlejring fejler i stedet for blot at se forkert ud. - En slukker pr. katalog. At slukke embed knækker straks hvert embed af den publikation, uanset hvor det står. Det er din nødkontakt.
Og nu grænsen, sagt klart: en whitelist er ikke en paywall. At åbne embed-URL'en direkte i en browsertab, i stedet for inde i en iframe, er muligt — domænekontrollen handler om, hvem der må indramme dit indhold, ikke om, hvem der må læse det. Ligger en publikation virkelig bag et abonnement, så beskyt siden med embed'et med din egen autentificering. Værktøjets arbejde slutter ved "hvem må indramme dette"; "hvem må læse dette" er dit sites arbejde.
Når det ikke virker, tjek i denne rækkefølge
- Embed slukket for det katalog. Symptom: en 404 i framen. Langt den mest almindelige årsag.
- Værtsdomænet er ikke på whitelisten. Genlæs det nøjagtige roddomæne i browserens adresselinje, på siden, der indlejrer.
- Forkert katalog-ID eller token kopieret fra et andet workspace. De er lange, uigennemsigtige strenge; at indsætte midterstykket er let.
- Konvertering stadig i gang, eller fejlet. Symptom: en ventebesked eller en fejlbanner på katalogsiden.
- Dit eget site blokerer frames. En streng
frame-srci din egen Content-Security-Policy, eller et sikkerhedsplugin, der gør det samme, vil blokere tredjeparts-iframer — også din egen. - HTTPS-mismatch. At indlejre en HTTPS-læser på en HTTP-side er tilladt; det omvendte får browserne til at brokke sig. Ret certifikatet.
- CMS'et har lemlæst markuppen. Se kilden på den offentliggjorte side, og kontrollér, at attributterne stadig står rigtigt i anførselstegn.
Pre-flight checkliste
- Embed aktiveret for den specifikke publikation
- Roddomæne på whitelisten (subdomæner følger med gratis)
- Snippet indsat i et HTML-blok, ikke i et felt med formateret tekst
title-attribut sat på framen- Højde testet på en telefon, i portræt og landscape
- Embeds under folden med
loading="lazy" - Siden indeholder rigtig tekst, hvis den skal indekseres
- Analytics tjekket dagen efter, ikke kvartalet efter
Prøv det på en publikation
Den hurtigste måde at finde ud af, om indlejring passer til dit site, er at køre én eksisterende PDF igennem processen — et katalog, et domæne, en side, tjekket på en telefon. Det er netop formen på gratisplanen: én publikation, 100 sider pr. katalog, ét embeddomæne, med et lille "Powered by Flipable"-badge på læseren. Badgeet er vores reklame — derfor er planen så rundhåndet. Er badgeet et problem for dit kundearbejde, så er det præcis det, betalingsplanerne fjerner.
Flere artikler
Klar til at publicere dit eget interaktive katalog?