Att dela innehåll är ganska vanligt. Men att använda någon annans innehåll på din webbplats har potentiella rättsliga konsekvenser, medan att hosta stora filer som videor kan skada webbplatsens prestanda. Lyckligtvis ger iFrames en enkel lösning på dessa problem.
I det här inlägget förklarar vi vad iFrames är och hur du använder dem på din WordPress-webbplats.
Redo att börja? Nu sätter vi igång!
Vad är iFrames (Och Varför är de Användbara)?
En iFrame är ett sätt att bädda in en webbsida i innehållet på en annan sida. Detta görs med hjälp av HTML-taggar, den externa sidans URL, och specifikationer om hur fönstret ska visas på din webbplats.
Det finns två situationer där iFrames är allmänt användbara.
Den första är när du vill dela innehåll som inte tillhör dig. I de flesta fall anses det inte vara upphovsrättsintrång att bädda in innehåll via en iFrame (se även EU styrande). Därför är det i allmänhet en juridisk och mer etisk metod att dela än de flesta andra alternativ. Dessutom kan koden inom en iFrame inte nås direkt. Det innebär att en besökare på din webbplats inte kan kopiera det inbäddade innehållet och dela det någon annanstans.
Den andra anledningen till att du kanske vill införliva iFrames är att dela stora filer, till exempel video, ljud eller till och med bilder. YouTube är det perfekta exemplet här.
Med en iFrame kan du visa en fils innehåll på din webbplats utan att behöva hosta det i ditt WordPress mediabibliotek. Det är viktigt eftersom dessa typer av mediefiler ofta tar upp en betydande mängd lagringsutrymme, och kan även bromsa din webbplats.
Genom att hosta dina videoklipp på en plattform som YouTube och sedan bädda in dem på din WordPress-webbplats med iFrames, kan du undvika nackdelarna med att ladda upp dem till din webbplats direkt. Denna teknik hjälper dig att bli en mer etisk medlem av online-gemenskapen och göra din webbplats snabb och enkel att använda.
Så Använder du iFrames Med WordPress (3 Metoder)
Precis som det finns olika scenarier där du kanske vill använda en iFrame, finns det flera metoder för att implementera en. Nedan utforskar vi tre av de vanligaste sätten att lägga till iFrames till din WordPress-webbplats.
1. Lägg till iFrames i WordPress Manuellt
Grundkoden för att lägga till en iFrame på en sida är ganska enkel. Allt du behöver är att de inledande och avslutande HTML-taggarna, och webbadressen till webbsidan du vill bädda in:
<iframe src="example.com"></iframe>Det finns ett par begränsningar att notera om källadressen. Först och främst kan iFrames bara visa innehåll från webbplatser som använder samma Hypertext Transfer Protocol som din. Med andra ord, om din webbplats använder HTTPS, kan du bara bädda in innehåll från andra HTTPS-webbplatser. På samma sätt, om du använder HTTP, kan du bara bädda in webbadresser som också använder HTTP.
Några populära webbplatser – som Facebook och YouTube – tillåter dessutom inte manuell iFrame-inbäddning. Om du försöker visa en sida från en webbplats som inte tillåter iFrame-inbäddningar visas ett fel i fönstret:
Om du kan använda den här metoden är det viktigt att veta att du också kan anpassa dina iFrames för att möta behoven på din webbplats. Det är där iFrame-parametrar kommer in i bilden. Några av de vanligaste är:
- Bredd:Med den här parametern kan du ställa in en specifik bredd för iFrames i pixlar.
- Höjd:Liksom breddparametern bestämmer höjden storleken på iFrame-fönstret på din webbsida i pixlar.
- Tillåt:Med den här parametern kan du ställa in vissa standardbeteenden eller funktioner för din iFrame, till exempel helskärmsvisning eller betalningshantering.
- Betydelse:Du kan använda den här parametern för att ange när en iFrame ska laddas.
Så här skulle till exempel koden se ut för en iFrame med en fönsterstorlek på 900 pixlar med 700 pixlar, med fullskärmsvisning aktiverad, som är inställd på att laddas ner efter resten av webbsidan:
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>På frontenden, kan iFramen se ut så här:
Det finns andra parametrar som du kan överväga att använda också. De som listas ovan bör dock göra det möjligt för dig att skapa grundläggande iFrames för att dela YouTube-videor eller annat innehåll på din webbplats.
2. Använd Inbäddningskoder för att Skapa iFrames
Vissa webbplatser har begränsningar för om du kan bädda in deras innehåll manuellt i iFrames. Detta kan göra det svårt att använda vissa typer av innehåll, såsom Facebook-inlägg eller YouTube-videor. Det betyder dock inte att du inte kan visa innehåll från dessa källor i iFrames.
Du måste helt enkelt komma åt de nödvändiga inbäddningskoderna för att göra det istället. Låt oss titta på hur det fungerar i YouTube som ett exempel. Gå över till videon du vill bädda in, oavsett om det är din eller någon annans. Under videospelaren ska du se en delningsknapp:
Klicka på den här knappen och ett fönster öppnas som visar de olika delningsalternativen som är tillgängliga. Ett av dem är Bädda in:
När du väljer alternativet bädda in visas ett HTML-kodavsnitt som du kan använda för att lägga till videon i en iFrame. Den innehåller vissa iFrame-parametrar, som du kan kopiera och använda om du vill. Annars kan du också välja att helt enkelt kopiera källadressen istället:
När du använder inbäddningskoden visas videon i din iFrame istället för det fel du skulle se om du försökte använda standardwebbadressen.
Om du vill lägga till den på en sida eller ett inlägg i Blockredigeraren kan du använda ett anpassat HTML-block:
I den klassiska redigeraren måste du byta till Textredigeraren och lägga till din kod vid den relevanta punkten:
Resultatet borde vara en fungerande iFrame:
Du kan följa en liknande process för att bädda in ett Facebook-inlägg på din webbplats. Navigera till inlägget du vill dela och klicka på ikonen med tre punkter längst upp till höger i inlägget:
Välj sedan alternativet Bädda in:
Detta kommer att visa ett HTML-kodavsnitt ungefär som det för YouTube-klipp vi tittade på tidigare. Återigen är källadressen den viktigaste delen av den här koden, även om du också kan använda de förutbestämda parametrarna:
Lägg till den här koden på din webbsida och inlägget ska visas utan några problem:
Många populära sociala medier, inklusive LinkedIn, Instagram och Twitter, erbjuder också inbäddningskoder för sina inlägg. Du hittar vanligtvis det här alternativet i varje enskilt inläggs inställningar.
3. Lägg till iFrames till WordPress med ett plugin
Naturligtvis arbetar WordPress-utvecklare alltid för att förenkla uppgifter som att bädda in iFrames genom användning av plugins. Det finns två alternativ som du kanske vill överväga om inbäddning av externt innehåll på din webbplats är något du planerar att göra ofta. Den mest populära lösningen är iFrame-pluginet:
Detta plugin låter dig lägga till iFrames till din WordPress-webbplats med kortkoder. Du kan ange samma parametrar som du skulle när du manuellt lägger till en iFrame via HTML. Du behöver dock inte oroa dig över att hantera dina sidors kod direkt.
Alternativt kan du också prova Advanced iFrame-pluginet:
Detta plugin låter dig återigen lägga till iFrames till din WordPress-webbplats med kortkoder. Det innehåller dock också flera ytterligare funktioner, till exempel säkerhetskoder för att förhindra andra användare från att bädda in iFrames utan din tillåtelse, anpassade stylingalternativ och mer.
För $20 kan du uppgradera till en Advanced iFrame Pro-sexmånaderslicens. Denna version producerar responsiva iFrames, och möjliggör funktioner som zoomfunktionalitet och latladdning. Beroende på hur ofta du planerar att använda iFrames på din webbplats kan dessa alternativ vara värda premiumpriset.
Sammanfattning
Att få din webbplats att fungera bra och på rätt sida av lagen är avgörande. iFrames hjälper dig inte bara att dela andras innehåll på ett etiskt sätt utan kan också göra det möjligt för dig att visa video- och ljudfiler utan att behöva hosta dem på din webbplats. I det här inlägget har vi tittat på tre metoder för att använda iFrames med WordPress:
- Införliva iFrames i WordPress-webbplatser manuellt.
- Använd inbäddningskoder för att skapa iFrames
- Lägg till iFrames med ett WordPress-plugin, till exempel iFrame eller Advanced iFrame.
Har du några frågor om iFrames eller hur du använder dem på din WordPress-webbplats? Låt oss veta i kommentarerna nedan!
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Lämna ett svar