Hur man enkelt bäddar in iFrame-kod i WordPress (3 metoder)

När vi bygger webbplatser stöter vi ofta på behovet av att visa innehåll från externa källor utan att själva vara värdar för det. Det är här iFrames kommer till sin rätt.

Oavsett om du bäddar in en video, en karta eller en tredjepartsapplikation, erbjuder iFrames ett smidigt sätt att integrera externt innehåll på din WordPress-webbplats.

I den här artikeln guidar vi dig genom tre enkla metoder för att lägga till iFrame-kod i WordPress-inlägg eller sidor. Från att använda färdiga inbäddningskoder till att skapa dina egna iFrames manuellt, vi har allt du behöver. 

Vad är iFrame?

En iFrame (kort för inline frame) låter dig bädda in videor eller annat innehåll på din webbplats utan att faktiskt behöva hosta den videon. Detta kan spara bandbredd och lagringsutrymme, vilket är varför du aldrig bör ladda upp en video direkt till WordPress.

Förutom att förbättra din WordPress hastighet och prestanda, kommer iFrame att uppdateras automatiskt om originalinnehållet ändras. Det innebär att besökare alltid kommer att se den senaste versionen av innehållet.

Att bädda in upphovsrättsskyddat innehåll via en iFrame bryter inte heller mot upphovsrätten, så det kan hjälpa dig att skydda dig mot stämningar.

Med det sagt, låt oss se hur du enkelt kan bädda in iFrame-kod i WordPress. Använd helt enkelt snabblänkarna för att hoppa direkt till den metod du vill använda:

1. Bädda in WordPress iFrame med källans kod (snabbt och enkelt)
2. Bädda in med ett WordPress iFrame-plugin (fungerar med alla webbplatser)
3. Embed iFrames in WordPress Manually (No Plugin Required)

Metod 1: Bädda in WordPress iFrame med källans kod (snabbt och enkelt)

Många stora videohosting-webbplatser har ett alternativ för 'Bädda in' som ger dig tillgång till iFrame-koden du behöver lägga till på din webbplats.

Om webbplatsen har några inställningar för 'Delning' eller 'Inbäddning', då är detta ofta det snabbaste och enklaste sättet att bädda in innehåll.

De exakta stegen varierar beroende på plattformen, men låt oss titta på YouTube som ett exempel. För att bädda in YouTube-videor i WordPress, klicka helt enkelt på 'Dela'-knappen under videon du vill använda.

Därefter ser du en popup med olika delningsalternativ.

Klicka helt enkelt på knappen 'Bädda in'.

YouTube kommer nu att visa dig iFrame-koden.

Som standard kommer YouTube att markera rutan 'Visa spelarkontroller', men vi rekommenderar också att aktivera integritetsskyddat läge. Detta läge gör det möjligt för besökare att titta på det inbäddade innehållet på din WordPress-webbplats utan att det påverkar deras surfupplevelse på YouTube.

Klicka sedan på knappen 'Kopiera'.

Nu kan du klistra in den koden i valfritt inlägg eller sida på din webbplats. I den här guiden lägger vi till den på en ny sida i WordPress blockredigerare.

Öppna bara sidan och klicka sedan på knappen '+'. I popup-fönstret som visas, börja skriva 'HTML' för att hitta anpassade HTML-blocket.

När rätt block visas klickar du för att lägga till det på din sida.

Klistra sedan helt enkelt in YouTube iFrame-koden i blocket.

Du kan nu publicera din sida för att se YouTube-videon live på din WordPress-blogg.

Metod 2: Bädda in med ett WordPress iFrame-plugin (fungerar med alla webbplatser)

Inte alla tredjepartswebbplatser tillhandahåller en färdig inbäddningskod. Om du inte hittar några inställningar för 'Dela' eller 'Bädda in', kan du enkelt skapa din egen iFrame-kod med hjälp av iFrame-pluginet.

Först måste du installera och aktivera iFrame-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering börjar pluginet fungera direkt utan någon konfiguration. Gå helt enkelt till sidan eller inlägget där du vill bädda in innehåll och lägg till ett Shortcode-block.

Lägg därefter till följande kortkod:

[iframe src="URL goes here"]

Ersätt helt enkelt 'URL går här' med URL:en för innehållet du vill bädda in på din webbplats.

Som ett exempel, låt oss lägga till en Google Map i WordPress, eftersom detta är ett enkelt sätt för butiker, restauranger och andra platser att lägga till vägbeskrivningar på sitt kontaktformulär.

Därefter, förhandsgranska eller publicera inlägget.

Du bör nu se innehållet inbäddat på din webbplats.

För att se alla tillgängliga parametrar kan du titta på iFrame plugin-sidan.

Metod 3: Bädda in iFrames i WordPress manuellt (inget plugin krävs)

Om du inte vill använda ett speciellt WordPress-plugin, kan du skapa iFrame-koden manuellt. För att göra detta behöver du öppna sidan eller inlägget och sedan lägga till ett HTML-block i WordPress-innehållsredigeraren.

Klistra först in följande kod i ditt HTML-block:

<iframe src="URL goes here"></iframe>

Ersätt helt enkelt 'URL går här' med den direkta URL:en för innehållet du vill bädda in.

Här bäddar vi in en Google Maps:

Du kan lägga till extra parametrar för att ändra hur innehållet ser ut på din webbplats. Till exempel ställer vi in bredden till 600 pixlar och höjden till 200 pixlar:

<iframe src="URL goes here" width="600" height="300"></iframe>

Detta är användbart om du behöver visa det inbäddade innehållet på en mindre yta. Du kanske till exempel vill ändra storlek på innehållet efter att ha testat mobilversionen av din WordPress-webbplats.

Vilka är några iFrame-alternativ?

Det finns några nackdelar med att bädda in iFrames.

Alla webbplatser låter dig inte bädda in deras innehåll i en iFrame, och du kan behöva justera innehållet manuellt så att det ser bra ut i det tillgängliga utrymmet.

Ett annat problem är att HTTPS-webbplatser endast kan använda iFrames för innehåll från andra HTTPS-webbplatser. Likaså kan HTTP-webbplatser endast använda iFrames för innehåll från andra HTTP-webbplatser.

Det är därför många plattformar som WordPress föredrar oEmbed.

Ofta kan du använda oEmbed för att bädda in videor och annat innehåll genom att helt enkelt klistra in en URL i WordPress-inlägget. WordPress kommer automatiskt att ändra storlek på oEmbed för att passa det tillgängliga utrymmet, så det kommer alltid att se perfekt ut på stationära datorer, smartphones och surfplattor.

Om du vill visa sociala flöden på din webbplats, rekommenderar vi att du använder ett plugin för sociala medier snarare än iFrames.

Till exempel gör Smash Balloon det enkelt att bädda in innehåll från Facebook, Instagram, Twitter och YouTube.

Här är några handledningar om hur du lägger till flöden från sociala medier med Smash Balloon:

• Hur man bäddar in faktiska tweets i WordPress-blogginlägg
• Hur man bäddar in TikTok-videor i WordPress
• Hur man bäddar in en YouTube-spellista i WordPress (bästa metoden)

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till iframes i WordPress. Du kanske också vill kolla in våra guider om hur man bäddar in SoundCloud i WordPress och hur man inaktiverar inbäddningar i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.