Vad är iframe och embedkod och hur används det?

Embed code, inbäddad kod, inbäddat innehåll, iframe - vad är det här? Det kan låta som rena grekiskan men är faktiskt rätt enkelt och dessutom väldigt smidigt. Vi ska förklara - häng med!

En iframe kan beskrivas som ett rektangulärt hål i en webbsida, inuti vilket en annan webbsida visas. Det är inte vi som tagit fram den beskrivningen utan DIGG (myndigheten för digital förvaltning) men den är så bra så att vi lånar den.

En inbäddningskod är helt enkelt en lista med specifika instruktioner från en webbplats som beskriver hur ett vist innehåll kan visas på en annan sida - det kan vara en podd, en film, en karta eller en nyhetslista.  Många webbplatser erbjuder koder på sina sidor som kan kopieras och sedan klistras in på andra sajter. Du behöver alltså inte ha originalinnehållet eller ens hantera hur det ska visas ut - du kopierar bara en kod och vips - så visas en bit innehåll från en annan sajt på din egen sajt.

Smidigt, eller hur? Men såklart finns det lite saker att tänka på, och det kan också innebära en del problem.
 

Vad är det för skillnad på iframe och embed?

En iframe är ett HTML-element som laddar en annan HTML-sida inom sin "ram".  De används ofta för annonser, inbäddade videor, webbanalys och interaktivt innehåll. Embed är ett annat liknande HTML5-element som precis som iframe används för att bädda in en extern resurs på en webbsida.  Men medan iframe används för att bädda in ett HTML-dokument på en sida används embed för att bädda in andra typer av innehåll, exempelvis PDF-filer och webbläsarplugin-program.  Embed-elementet kan också användas för att placera media, men iframe är ett bättre alternativ. Kort sagt, embed är i princip samma sak som IFRAME, med med färre attribut.

NOT: Man säger lite slarvigt "embed code" även för inbäddningskod i iframes för till exempel Youtubefilmer eller kartor från Google maps. 

Hur bäddar man in en film på sin webbsajt?

Youtube är en eminent filmplattform - de komprimerar dessutom filmen efter mottagarens förutsättningar. Det är svårt att hantera allt sådant bra själv, och dessutom behöver man en filmspelare på sin sajt för att kunna hantera film på ett bra sätt. Det enklaste och många gånger smidigaste alternativet är då att lägga upp sina filmer på en egen Youtube kanal och sedan bädda in dem på sin sajt.

Gå till filmen hos Youtube, välj alternativet "DELA" under filmen och sedan "BÄDDA IN". Där har du koden, bara att kopiera:

Hur bäddar man in en karta på sin webbsajt?

Det är många som har en karta från exempelvis Google maps på sin sajt för att visa var man finns.  man kan väldigt enkelt lägga in kartan på sin egen sajt genom att på https://www.google.com/maps skriva in sin adress.

Välj sedan DELA och därefter BÄDDA IN EN KARTA. Då får du fram koden som kan kopieras och läggas in på din sajt, exempelvis:

Kan det vara problem att använda iframes och embedkod?

DIGG (myndigheten för digital förvaltning) är mycket tydlig med sina riktlinjer för webbutveckling - de rekommenderar att undvika iframes, eller kompensera för nackdelarna. Fast ibland är det den enda möjligheten och värt det ändå. Men det kan vara bra att tänka lite extra på följande:

• Iframes är ofta svåra att hantera på mobilen, till exempel är det inte uppenbart för användaren om rullning och zoomning gäller ramen eller omgivningen.
• Det är svårt att ge ramen rätt storlek i alla typer av enheter, så du kan behöva skapa flera alternativa storlekar på ramen.
• Svårare att skapa en webbplats som indexeras och hittas av sökmotorer på ett optimalt sätt.
• Svårare att hantera besökare som kommer till webbplatsen via sökmotorer.
• Svårare att använda webbplatsen för användare med skärmläsare eller textwebbläsar.
• Svårare för användaren att skriva ut webbplatsens innehåll.
• Sökmotorer räknar innehållets värde till den inramade sidan eller webbplatsen, inte till din sida (om de överhuvudtaget hittar innehållet).
• Det är inte troligt att innehåll som ligger i en iframe går att hitta med webbplatsens egen sökfunktion (om du inte anpassar den särskilt för detta).

Det mesta av detta kan man som sagt kompensera för, till exempel att ha rubriker och beskrivande text om det inbäddade innehållet på sin egen sida (för SEO:ns skull), och man kan också i många fall göra lite anpassningar för storlekarna på "ramen" som bäddas in (ofta kan man ändra bred och höjd för ramen direkt i embedkoden - men var noga md att kolla hur det blir i olika skärmstorlekar).

En sista sak är att det kan innebära en säkerhetsrisk att tillåta embedkod hur som helst på sin sajt. Om du försöker klistra in embedkod i en texteditor på din sajt kanske du märker att det du klistrat in bara försvinner, eller inte syns på sajten? Då kan det finnas begränsningar i texteditorn för vilken kod som får läggas in - vilket faktiskt kan vara en bra sak.