Deling af indhold er en forholdsvis almindelig praksis. At have en anden skabers indhold på dit websted har imidlertid potentielle juridiske konsekvenser, mens hosting af store filer såsom videoer kan skade dit websteds ydelse. Heldigvis giver iFrames en enkel løsning på disse problemer.
I dette indlæg forklarer vi, hvad iFrames er, og hvordan du bruger dem på dit WordPress-site.
Klar til at dykke i? Lad os komme i gang!
Hvad er iFrames (og hvorfor de er nyttige)?
En iFrame er en måde at embedde en webside ind i indholdet på en anden side. Dette gøres ved hjælp af HTML-tags, den eksterne sides URL og specifikationer for, hvordan vinduet skal vises på dit websted.
Der er to situationer, hvor iFrames generelt er nyttige.
Den første er, når du ønsker at dele indhold, der ikke tilhører dig. I de fleste tilfælde betragtes indlejring af indhold via en iFrame ikke som en krænkelse af ophavsretten (se også EU-afgørelse). Derfor er det generelt en juridisk og mere etisk metode til deling end de fleste andre muligheder. Derudover kan koden i en iFrame ikke få direkte adgang. Dette betyder, at en besøgende på dit websted ikke kan kopiere det indbyggede indhold og dele det andetsteds.
Den anden grund til, at du måske ønsker at inkorporere iFrames, er til at dele store filer, f.eks. video, lyd eller endda billeder. YouTube er det perfekte eksempel her.
Med en iFrame kan du vise en fils indhold på dit websted uden at skulle hoste det i dit WordPress mediebibliotek. Det er vigtigt, fordi disse typer mediefiler ofte optager en betydelig mængde lagerplads og endda kan bremse dit websted.
Ved at hoste dine videoer på en platform som YouTube og derefter integrere dem på dit WordPress-sted med iFrames, kan du undgå ulemperne ved at uploade dem til dit websted direkte. Denne teknik hjælper dig med at gøre dig til et mere etisk medlem af online-samfundet og holde dit websted hurtigt og nemt at bruge.
Sådan bruges iFrames med WordPress (3 metoder)
Den grundlæggende kode til tilføjelse af en iFrame til en side er ret enkel. Alt hvad du behøver er en åbning og lukning af HTML-tags og URL’en på den webside, du ønsker at integrere:
1. Tilføj iFrames i WordPress manuelt
Den grundlæggende kode til tilføjelse af en iFrame til en side er ret enkel. Alt hvad du behøver er en åbning og lukning af HTML-tags og URL’en på den webside, du ønsker at integrere:
<iframe src="example.com"></iframe>Der er et par begrænsninger at bemærke vedrørende kildeadressen. For det første kan iFrames kun vise indhold fra websteder, der bruger den samme Hypertext Transfer Protocol som din. Med andre ord, hvis dit websted bruger HTTPS, kan du kun integrere indhold fra andre HTTPS-websteder. Ligeledes, hvis du bruger HTTP, kan du kun integrere webadresser, der også bruger HTTP.
Derudover deaktiverer nogle populære websteder – såsom Facebook og YouTube – manuel iFrame-integrering. Forsøg på at få vist en side fra et sted, der ikke tillader iFrame-indlejringer, viser en fejl i dit vindue:
Hvis du er i stand til at bruge denne metode, er det vigtigt at vide, at du også kan tilpasse dine iFrames til at imødekomme dit websteds behov. Det er her iFrame-parametre kommer ind. Et par af de mest almindelige inkluderer:
- Bredde: Denne parameter giver dig mulighed for at indstille en bestemt bredde for iFrame i pixels.
- Højde: Ligesom bredde-parameteren bestemmer højden størrelsen på iFrame-vinduet på din webside i pixels.
- Tillad: Med denne parameter kan du indstille visse standardopførsler eller funktioner til din iFrame, f.eks. visning på fuld skærm eller betalingsbehandling.
- Betydning: Du kan bruge denne parameter til at specificere, hvornår en iFrame skal indlæses.
For eksempel er det sådan, hvordan koden ser ud for en iFrame med en vinduesstørrelse på 900 pixels med 700 pixels, med visning på fuld skærm aktiveret, som er indstillet til at downloade efter resten af websiden:
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>På frontend er det sådan, at iFrame kan se ud:
Der er andre parametre, som du også kan overveje at bruge. Ovennævnte bør dog give dig mulighed for at oprette grundlæggende iFrames til deling af YouTube-videoer eller andet indhold på dit websted.
2. Brug Embed Codes til at oprette iFrames
Nogle steder har begrænsninger for, om du manuelt kan integrere deres indhold i iFrames. Dette kan gøre det vanskeligt at have visse typer indhold, f.eks. Facebook-indlæg eller YouTube-videoer. Det betyder dog ikke, at du ikke kan vise indhold fra disse kilder i iFrames.
I stedet skal du blot få adgang til de nødvendige integrerede koder for at gøre det. Lad os se på, hvordan dette fungerer på YouTube som eksempel. Gå over til den video, du ønsker at integrere, hvad enten det er din eller en anden skaber. Under videoafspilleren skal du se en Share-knap:
Klik på denne knap, så åbnes et vindue, der viser de forskellige tilgængelige delingsindstillinger. En af dem er Embed:
Når du vælger Embed-indstillingen, viser YouTube et HTML-uddrag, du kan bruge til at føje videoen til en iFrame. Det inkluderer visse iFrame-parametre, som du kan kopiere og bruge, hvis du ønsker det. Ellers kan du også vælge at kopiere URL-adressen til kilden i stedet:
Når du bruger indlejringskoden, vises videoen i din iFrame i stedet for den fejl, du ville se, hvis du prøvede at bruge standard-URL’en.
For at tilføje det til en side eller indlæg i Block Editor kan du bruge en custom HTML-blok:
I Classic Editor skal du skifte til teksteditoren og tilføje din kode på det relevante punkt:
Resultatet skal være en fungerende iFrame:
Du kan følge en lignende proces for at integrere et Facebook-indlæg på dit websted. Naviger til det indlæg, du vil dele, og klik på ikonet med tre punkter i øverste højre hjørne af indlægget:
Vælg derefter indstillingen Embed:
Dette vil vise et HTML-uddrag, meget som det for YouTube-videoen, vi kiggede på tidligere. Igen er kildeadressen den vigtigste del af denne kode, selvom du også kan bruge de forudbestemte parametre:
Føj denne kode til din webside, og indlægget skal vises uden problemer:
Mange populære sociale mediesider, herunder LinkedIn, Instagram og Twitter, tilbyder også integrerede koder til deres indlæg. Du finder typisk denne mulighed i indstillingerne for hvert individuelt indlæg.
3. Føj iFrames til WordPress ved hjælp af et plugin
Naturligvis arbejder WordPress-udviklere altid for at forenkle opgaver såsom indlejring af iFrames ved hjælp af plugins. Der er to muligheder, som du måske vil overveje, hvis indlejring af eksternt indhold på dit websted er noget, du planlægger at gøre ofte. Den mest populære løsning er the iFrame-plugin:
Dette plugin giver dig mulighed for at tilføje iFrames til dit WordPress-sted ved hjælp af short codes. Du kan specificere alle de samme parametre, som du ville gøre, når du manuelt tilføjer en iFrame via HTML. Du behøver dog ikke bekymre dig om at håndtere dine siders kode direkte.
Alternativt kan du også prøve Advanced iFrame-plugin:
Endnu en gang giver dette plugin dig mulighed for at tilføje iFrames til dit websted ved hjælp af short codes. Det indeholder dog også flere ekstra funktioner, såsom sikkerhedskoder til at forhindre andre brugere i at indlejre iFrames uden din tilladelse, brugerdefinerede styling-indstillinger og mere.
For 20 USD kan du opgradere til en Advanced-iFrame Pro seks måneders licens. Denne version producerer responsive iFrames og muliggør funktioner som zoomfunktionalitet og Lazy Loading. Afhængig af hvor ofte du planlægger at bruge iFrames på dit websted, kan disse indstillinger være prismærket for premium værdigt.
Resumé
Det er vigtigt at holde dit websted godt og på den rigtige side af loven. iFrames hjælper dig ikke kun med at dele andres indhold på en etisk måde, men kan også give dig mulighed for at vise video- og lydfiler uden at være vært for dem på dit websted. I dette indlæg har vi set på tre metoder til at bruge iFrames med WordPress:
- Integrer WordPress-websteder og iFrames manuelt.
- Brug indlejringskoder til at oprette iFrames.
- Tilføj iFrames ved hjælp af et WordPress-plugin, f.eks. IFrame eller Advanced iFrame.
Har du spørgsmål om iFrames, eller hvordan du bruger dem på dit WordPress-sted? Fortæl os det i kommentarfeltet nedenfor!
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Skriv et svar