Upotustyökalulla saat upotettua (engl. embed) esimerkiksi Youtube-videoita ja Facebook-sivuja suoraan omalle nettisivulle. Sosiaalisen median sisällön avulla Lukkari-sivusto saa lisäarvoa mm. kannustamalla sivuston kävijöitä kommentoimaan ja jakamaan sisältöä edelleen.
Lukkarissa upotukset tehdään ensisijaisesti upotustyökalulla. Näin tehdään siksi, että mahdolliset kohdesivun evästeet saadaan hallintaan ja niiden leviäminen sivustolla voidaan estää silloin, kun kävijä haluaa estää henkilöivien evästeiden tiedonkeruun. Upotustyökalun avulla upotuksesta tulee lisäksi responsiivinen eli se skaalautuu eri näyttökokoihin myös mobiiliin.
Upotustyökalussa tuettuja palveluita ovat YouTube, Vimeo, Facebook, X, Instagram, SoundCloud ja Google Maps -kartta. Instagram-upotus voidaan tehdä yksittäisestä julkaisusta, mutta ei Instagram-profiilista. Jos toivot, että upotuksen tekeminen upotustyökalulla olisi mahdollista myös jostain muusta palvelusta, lähetä kehitysideasi Lukkari-tukeen.Linkki avautuu uudessa välilehdessä
Jos haluat tehdä upotuksen muusta kuin upotustyökalun tukemasta palvelusta, voit tehdä sen itse iframe-upotuksena. Silloin on kuitenkin varmistettava, että upotus ei levitä koodia, joka sisältää henkilötietoja kerääviä evästeitä.
Muista myös, että upotukset eivät ole ainoa tapa nostaa somea esille verkkosivuilla. Esimerkiksi linkkilistausportletin avulla voi tehdä kuvalliset linkit seurakunnan some-kanaviin.
Upotuksen tekeminen upotustyökalulla
Upotustyökalu on sivun sekä tekstieditorissa, että toistaiseksi myös ylälaidan ylläpitovalikossa.
Tekstieditorissa:
Ylälaidan ylläpitovalikossa:
Upotustyökalulla voit tehdä upotuksen Facebookista, Instagramista, X:stä, YouTubesta, Vimeosta ja Google mapsista.
Tee upotus näin:
Laita kursori sivun kohtaan missä haluat upotuksen.
Valitse työkalurivistä upotustyökalun.
Klikkaa haluamasi some-palvelun logoa ja seuraa ohjeita, jotka ilmestyvät logon alapuolella olevaan tekstikenttään.
Lisää ohjeiden mukaisesti tunniste tai muu koodi tekstikenttään.
Lisää Otsikko ruudunlukijalle -kenttään upotuksen otsikko (video-, kartta- ja SoundCloud-upotuksissa).
Klikkaa Luo upotuskoodi.
Luo upotuskoodi -napin alapuolelle ilmestyy upotuskoodi (esim. {uuid:a75bd568-5fc3-4aba-8e5d-9b53c976c693})
8. Paina ok.
9. Paina lopuksi julkaise.
Upotus tulee näkyviin sivuston julkinäkymään. Muokkaa sisältöä -ikkunassa upotuksen ei kuulu näkyä.
(Mikäli käytät sen sijaan ylälaidan ylläpitovalikossa olevaa painiketta luodaksesi upotuskoodin, tee vielä seuraava:
8. Kopioi upotuskoodi ja liitä se sisältöportlettiin haluttuun kohtaan.
9. Paina lopuksi julkaise. )
YouTube-videoupotus
Jos videon URL-osoitteessa on videon toistoon liittyviä muita tunnisteita, tulee ne jättää pois.
Esim. http://www.youtube.com/watch?v=mSG16neopfs&app=desktop -osoitteessa &-merkin jälkeen tuleva teksti on ylimääräistä, eli upotustyökaluun laitettava osoite olisi http://www.youtube.com/watch?v=mSG16neopfs
Google Maps -karttaupotus
Google Mapsin sisältö-portlettiin laitettavan upotuskoodin saat syöttämällä Lukkarin upotustyökaluun Google Mapsin antaman upotuskoodin. Google Mapsissa paina kartalla haluamastasi kohdasta ja valitse vasemmalla avautuvasta valikosta "Jaa" ja avautuvasta ikkunasta "Upota kartta".
Syötä siis tämä saamasi koodi Lukkarin upotustyökaluun, niin saat Lukkarin oman upotuskoodin kartallesi. Google Mapsin antamaa upotuskoodia ei siis voi sellaisenaan käyttää, mutta sen avulla saat luotua Lukkarin oman upotuskoodin.
SoundCloud-upotus
SoundCloud-upotuksissa upotustyökaluun syötetään ääniraidan TrackID. Saat poimittua sen SoundCloudin tarjoamasta iframe-upotuskoodista:
Etsi SoundCloudista ääniraita, jonka haluat upottaa.
Klikkaa Share-painiketta.
Siirry Embed-välilehdelle.
Poimi TrackID koodikentästä. TrackID on numerosarja, joka tulee jakokoodissa heti /tracks/ jälkeen. Esim. https%3A//api.soundcloud.com/tracks/922799797
Katso myös video-ohje trackID:n poimimisesta:
Muut upotukset (iframe) edistyneemmille käyttäjille
Upotustyökalun tarjoamien upotusten lisäksi verkossa on tarjolla paljon erilaisia palveluita, joita voi upottaa verkkosivustoille. Monet palvelut tarjoavat upotuksen tekemiseen valmista upotuskoodia.
Jos iframe vaatii toimiakseen koodia, esimerkiksi Script-tagin, niin silloin iframe-upotus pitää tehdä Lukkari-tuen kautta. Script-tagin avulla upotus yleensä levittää koodia, joka sisältää henkilöiviä tietoja kerääviä evästeitä.
Lisää koodiin sandbox-attribuutti alla olevan ohjeen mukaisesti.
Avaa haluamasi sisältöportletti muokkaustilaan ja paina tekstieditorin Koodi-painiketta.
Liitä kopioimasi upotuskoodi koodinäkymässä oikeaan kohtaan.
Palaa takaisin normaaliin näkymään painamalla Koodi-painiketta uudelleen. Upotus ei näy tekstieditorissa oikein, vaan sen tilalla on valkoinen iframe-laatikko.
Julkaise sisältöportlettiin tekemäsi muutokset.
Sandbox-attribuutin lisääminen
GDPR vaikuttaa jonkin verran iframe-upotusten käyttöön. Jos teet itse oman iframe-upotuksen (eli et käytä Lukkarin upotustyökalua), käytä siinä attribuuttia sandbox="allow-scripts".
Sandbox="allow-scripts" -attribuutti estää kohdesivua lataamasta evästeitä sivulle, jolle upotus tehdään. Samalla attribuutti mahdollistaa normaalin Javascriptin toiminnan. Jos attribuutti rikkoo upotuksen toiminnan tai upotus ei näy, ole yhteydessä Lukkari-tukeen.
Youtube upotukset jos ei ole käytetty Lukkarin upotustyökalua (suositus)
Youtube upotuksissa, joissa ei ole käytetty Lukkarin upostustyökalua (suositus) sandbox-attribuuttiin täytyy lisätä avain "allow-same-origin".
Lukkarin upotustyökalulla tehdyissä Youtube upotuksissa sandbox-attribuutin voi jättää pois, koska evästeet hoidetaan seurakuntien sivulla jo erikseen näiden osalta.
Responsiivisen iframe-upotuksen tekeminen
Lukkarin sisältöportlettiin on mahdollista upottaa jokin muu sivu iframe-elementin avulla. Oheisessa esimerkissä näytetään, miten Oulun seurakuntien Vapaaehtoistyö.fi-sivun upotus on toteutettu responsiiviseksi. Samaan tapaan minkä tahansa upotuskoodin voi liittää sisältöportlettiin koodinäkymässä.
Huom! GDPR vaikuttaa jonkin verran iframe-upotusten käyttöön. Jos teet itse oman iframe-upotuksen (eli et käytä Lukkarin upotustyökalua), käytä siinä attribuuttia sandbox="allow-scripts". Ohjeet attribuutin lisäämiseen löydät tältä sivulta kohdasta Muut upotukset (iframe).
Ohje
1. Kun olet haluamasi content-portletin muokkausnäkymässä, klikkaa Koodi-nappia siirtyäksesi koodinäkymään.
2. Kun koodinäkymä on aktiivinen, muuttuu editorin näkymä tekstimuotoon. Tekstin sekaan voi liittää upotuskoodeja, esim. iframe-elementtejä.
Yllä olevassa näkymässä Vapaaehtoistyö.fi-upotus on jo lisätty koodiin. Upotuskoodi on muotoa:
Esimerkin iframen korkeus on 600 pikseliä ja leveys määräytyy ikkunan leveyden mukaan. src=" " -kohtaan syötetään upotettavan sivun osoite, esimerkissä näkyy Oulun Vapaaehtoistyö.fi sivun osoite.
3.Paina uudelleen koodi-näppäintä palataksesi normaaliin tilaan, ja paina julkaise.
HUOM! Tekstieditori ei näytä sivun upotusta oikein, vaan voit katselmoida upotusta julkaistuasi sisältö-portletin sisällön Julkaise-nappia painamalla.
Facebook-livevideon upotus Lukkari-sivustolle
Facebook liven upottaminen ei ole niin helppoa kuin Youtube-videon upottaminen. Tässä on ohjeet, jotka toimivat pääsäntöisesti upotusta tehdessä.
Facebook-livevideon upotus on helpointa jos teet livevideon Facebook-sivun (ei henkilön sivun)kautta viemällä videokuva tietokoneen kautta Facebookin Live API:n kautta. Jos teet live-videota puhelimella, tai suoraan tietokoneen kameran kautta ohjeita löytyy alempaa kunhan ehdimme tekemään ohjeet.
Upottaminen onnistuu vain Facebook-sivulle tehtävällä Live-videolla, yksittäisen henkilön sivun tai ryhmän sivun kautta tämä tapa ei ole mahdollista.
Siirry julkisen Facebook sivun ylläpitoon johon sinulla on ylläpito-oikeudet. (esim. seurakunnan facebook -sivulle)
3. Valitse vasemmasta reunasta Videos ja sen jälkeen avautuvasta valikosta +Live
4. Jos aloitat livevideon, niin sivun alareunassa löytyy kolme vaihtoehtoa, </> , ajastus ja Live-videon aloittaminen.
5. </> -painike avaa upotusikkunan, josta voit kopioida upotuskoodin.
6. Avaa Sisältökenttä mihin haluat upottaa livevideon ja paina editorin Koodi-painiketta ja liitä kopioimasi upotuskoodi.
Sen jälkeen kun olet lisännyt tämän ja aloitat Livetilan ajastuksen tai suoraan livetilaan siirtymisen kautta, niin video näkyy Lukkari-sivustolla.
Facebook Livevideon upotus jos video tehdään puhelimella tai tietokoneen kameralla
Videon upottaminen on mahdollista myös vaikka sitä ei pystyisi etukäteen valmistelemaan.
Äänen suoratoistolähetyksen (striimi) upotus Lukkari-sivustolle
Joissakin Lukkari-seurakunnissa lähetetään jumalanpalveluksia suorana ns. nettiradiolähetyksinä. Voidaan puhua myös äänen suoratoistosta eli striimaamisesta.
Suoratoistolähetyksiä voidaan kuunnella erillisillä, tietokoneelle asennettavilla ohjelmilla tai nettisivulle upotettavilla soittimilla. Yksinkertaisinta ja käyttäjän kannalta helpointa on käyttää suoratoiston upottamiseen html-standardiin kuuluvaa audio-tägiä, joka toimii yleisimmillä nykyaikaisilla selaimilla.
Sillä luodun soittimen koodi näyttää tältä:
<audio controls="" src="http://radio.6net.fi:8000/jarviradio" style="margin:10px;width: 300px;max-width:100%;">Your browser does not support the audio element.</audio>
Sivulla soitin näyttää tältä:
Soittimen toiminnan testaaminen edellyttää käynnissä olevaa suoratoistoa.
Sivulla, jossa soitinta käytetään, on hyvä mainita, että soitin toimii vain silloin, kun suora lähetys on käynnissä.
Evästeet
Evästeiden avulla tarjoamme parempaa käyttökokemusta. Omat, välttämättömät evästeemme kontrolloivat sivuston toimivuutta ja käytettävyyttä.
Käytämme sivustolla upotuksia sosiaalisesta mediasta, kuten videoita ja sisältöjä. Nämä sisällöt saattavat sisältää käyttäjiä henkilöiviä evästeitä. Nähdäksesi nämä sisällöt sivustollamme hyväksy evästeet.
