Så här gör du inbäddningar med inbäddningsverktyget

Du hittar inbäddningsverktyget i texteditorn och tills vidare även i verktygsmenyn högst uppe.

I texteditorn:

I verktygsmenyn högst uppe:

Med inbäddningsverktyget kan du göra inbäddningar från Facebook, Instagram, X, YouTube, Vimeo och Google maps.

Så här gör du inbäddningen:

1. Placera markören på sidan där du vill ha inbäddningen.

2. Välj inbäddningsverktyget från verktygsfältet.

3. Klicka på logon för den sociala medietjänst du vill bädda in och följ instruktionerna som visas i textfältet under logon.

4. Lägg enligt instruktionerna till en identifierare eller annan kod i textfältet.

5. I fältet Titel för skärmläsare lägger du till titeln på inbäddningen (gäller för inbäddning av video, karta och SoundCloud)

6. Klicka på Skapa inbäddningskod.

7. Under knappen Skapa inbäddningskod visas inbäddningskoden (t.ex. {uuid:a75bd568-5fc3-4aba-8e5d-9b53c976c693})

8. Tryck på Ok 

9. Tryck till sist på Publicera

Inbäddningen syns i den publicerade webbtjänsten. Den bör inte synas i textediteringsfönstret.

(Om du använder knappen högst uppe i verktygsmenyn för att skapa en inbäddningskod, gör följande:

8. Kopiera inbäddningskoden och klistra in på önskat ställe i innehållsportletten.

9. Tryck till sist på Publicera)

Bra att veta

• Youtube: Om det i slutet av adressen finns extra tecken kan de lämnas bort. Exempel: I adressen http://www.youtube.com/watch?v=mSG16neopfs&app=desktop kan tecknen efter & lämnas bort. Då blir det följande url-adress som ska klistras in i inbäddningsverktyget: http://www.youtube.com/watch?v=mSG16neopfs

• Här kan du se hur Kimitoöns församling bäddat in sin Facebook-sida längst nere på första sidan.Öppna länk i ny flik

• Via denna länk hittas en videoinstruktion hur använda inbäddningsverktyget.Öppna länk i ny flik

• Du kan också lägga in en video i Bild- och video portletten. Via denna länk kan du kolla hur det görs.

• Här finns utskriftsvänliga instruktioner för inbäddningsverktyget.

• Facebooksida, Instagramkonto, Youtubekonto skrivs ihop och med stor begynnelsebokstav.

Bädda in Google Maps karta

Inbäddningsverktyget kan användas för att bädda in en karta i en innehållsportlett.

1. Gå till Google Maps.
2. Inbäddningskoden får du genom att trycka på den önskade platsen på kartan och sen på "Dela" i menyn till vänster och i följande fönster välja fliken "Bädda in en karta". Kopiera adressen. 
3. Välj kartnålsikonen och klistra in adressen. Skriv en rubrik för skärmläsare. Tryck på knappen Skapa inbäddningskod. 
4. Kopiera koden och klistra in i en innehållsportlett.
5. Publicera

Inbäddning av Soundcloud

Soundcloud är en onlineplattform för distribution av ljud.

I SoundCloud -inbäddningar anger du ljudspårets TrackID i inbäddningsverktyget. Du hittar den från SoundClouds iframe-inbäddningskod.

• Sök fram det ljudspår på SoundCloud som du vill bädda in. 
• Klicka på Share -knappen
• Gå till Embed-fliken
• Plocka TrackID från kodfältet. TrackID är den nummerserie som kommer direkt efter /tracks/ i delningskoden, t.ex. https%3A//api.soundcloud.com/tracks/922799797

Se även videoinstruktion (på finska) för hur du plockar TrackID:

Andra inbäddningar (iframe) för mer avancerade användare

Förutom de inbäddningar som inbäddningsverktyget erbjuder, finns det olika tjänster som kan bäddas in på webbsidorna. Många tjänster erbjuder färdiga inbäddningskoder för att göra inbäddningar.

Om iframe kräver en kod för att fungera, t.ex. en Script-tag, bör iframe-inbäddningen göras via Klockaren-stödet. Med Script-tagen sprider inbäddningen ofta kod som samlar in personlig information via cookies.

Så här gör du en iframe-inbäddning:

1. Kopiera inbäddningskoden från tjänstens sida. 
2. Lägg till ett sandbox-attribut till koden enligt instruktionerna nedan. 
3. Öppna önskad innehållsportlett i Klockaren i redigeringsläge och tryck på ikonen Kod i texteditorn.
4. Klistra in den kopierade inbäddningskoden på rätt plats i kodvyn.
5. Återgå till normalvy genom att på nytt trycka på Kod-ikonen. Inbäddningen visas inte korrekt i textredigeraren, däremot finns där en vit iframe-ruta.
6. Publicera ändringarna du gjort i innehållsportletten.

Så här lägger du till ett Sandbox-attribut

GDPR inverkar i viss mån på användningen av iframe-inbäddningar. Om du gör en egen iframe-inbäddning (dvs. inte använder Klockarens inbäddningsverktyg), använd då attributet sandbox=”allow-scripts”.

Nedan ett exempel:

<iframe sandbox="allow-scripts" src="https://www.inbäddningens-adress.fi" title="inbäddningens rubrik"></iframe>

Attributet sandbox=”allow-scripts” förhindrar målsidan från att ladda cookies på sidan där inbäddningen görs. Attributet möjliggör samtidigt funktionen av ett normalt Javascript. Ta kontakt med Klockaren-stödet ifall attributet söndrar inbäddningen eller inbäddningen inte syns.

Youtube-inbäddningar då inte Klockarens inbäddningsverktyg används (rekommendation) 

I Youtube-inbäddningar då inte Klockarens inbäddningsverktyg används (rekommenderas), bör nyckeln ”allow-same-origin” läggas till i sandbox-attributet.

<iframe sandbox="allow-same-origin allow-scripts" src="https://www.inbäddningsadressen.fi" title="inbäddningens rubrik"></iframe>

I inbäddningar som gjorts med Klockarens inbäddningsverktyg kan sandbox-attributet lämnas bort, eftersom cookies redan hanteras skilt för dessa på församlingarnas sidor.

Gör en responsiv iframe inbäddning

Genom att använda ett iframe-element är det möjligt att bädda in andra sidor i Klockarens innehållsportletter. I exemplet visas hur inbäddningen av Oulun seurakuntien Vapaaehtoistyö.fi -sida har genomförts responsivt. På samma sätt kan vilken inbäddningskod som helst fogas in i en innehållsportletts kodvy.

OBS! GDPR inverkar i viss mån på användningen av iframe-inbäddningar. Om du gör en egen iframe-inbäddning (d.v.s. inte använder Klockarens inbäddningsverktyg), använd då attributet sandbox=”allow-scripts”. 

Instruktion

1.    För att växla till kodvyn i innehållsportletten, tryck på Kod-ikonen i redigeringsvyn  

2.    Då kodvyn aktiveras ändrar redigeringsvyn till textformat och inbäddningskoder t.ex. iframe-element kan läggas till i texten.  

I vyn här ovan har inbäddningen av Vapaaehtoistyö.fi redan lagts till i koden.  Inbäddningskoden är: 
<iframe height="600" src="https://www.vapaaehtoistyo.fi/oulu" style="border: currentColor; border-image: none;" width="100%"></iframe>
Iframe exemplets höjd är 600 pixlar och bredden bestäms av fönstrets bredd.  I src=” ” matar du in adressen till sidan som skall bäddas in, i exemplet visas adressen till Oulun Vapaaehtoistyö.fi 

 
3.    Tryck på nytt på Kod-ikonen för att återgå till normalvy och efter det trycker du på Publicera.
OBS! Textredigeraren visar inte inbäddningen av sidan korrekt, men du kan granska inbäddningen i innehållsportletten efter att du har publicerat den.

Utomstående tjänsters inbäddningsverktyg

På internet finns många andra tjänster som kan bäddas in på webbsidan.

Inbäddningarna kan infogas i Klockaren genom att kopiera inbäddningskoden från tjänstens sida. Gå till en innehållsportlett i Klockaren, tryck på knappen Kod  i texteditorn och foga in inbäddningskoden. När det är klart tryck en gång till på knappen Kod  så är du tillbaka i normalläge. Tryck på Publicera-knappen.