Blog29. august 20267 minutters læsning

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.com autoriserer også www.example.com, shop.example.com og staging.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.com og example.com er samme post; example.net er 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.
  • frameborder er forældet; border:0 er 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 til 100dvh, 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

  1. Embed slukket for det katalog. Symptom: en 404 i framen. Langt den mest almindelige årsag.
  2. Værtsdomænet er ikke på whitelisten. Genlæs det nøjagtige roddomæne i browserens adresselinje, på siden, der indlejrer.
  3. Forkert katalog-ID eller token kopieret fra et andet workspace. De er lange, uigennemsigtige strenge; at indsætte midterstykket er let.
  4. Konvertering stadig i gang, eller fejlet. Symptom: en ventebesked eller en fejlbanner på katalogsiden.
  5. Dit eget site blokerer frames. En streng frame-src i din egen Content-Security-Policy, eller et sikkerhedsplugin, der gør det samme, vil blokere tredjeparts-iframer — også din egen.
  6. 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.
  7. 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.

indlejringiframehjemmesideSEOudgivelsesworkflow

Flere artikler

Klar til at publicere dit eget interaktive katalog?