Bygge inn SoundCloud i WordPress uten plugin (oEmbed)

SoundCloud er en av verdens største plattformer for lyd, musikk og podkaster, og mange som blogger vil vise frem et spor, en spilleliste eller en podkastepisode rett i innleggene sine. Den gode nyheten er at WordPress kan bygge inn (embed) innhold fra SoundCloud helt uten plugin eller ekstra kode – i de fleste tilfeller limer du bare inn lenken. Denne guiden forklarer nøyaktig hvordan det fungerer i dag, hvorfor den gamle functions.php-koden sjelden trengs lenger, og hvilke alternativer du har når du vil ha mer kontroll over spilleren.

Hva betyr det å «bygge inn» SoundCloud i WordPress?

Å bygge inn – på engelsk «embed» – betyr at du viser en fungerende SoundCloud-spiller midt i et innlegg eller en side, i stedet for bare å lenke til SoundCloud. Leseren kan spille av lyden uten å forlate bloggen din.

Bak kulissene bruker WordPress en teknologi som heter oEmbed. oEmbed er en åpen standard der WordPress sender URL-en du limer inn til en «leverandør» (her SoundCloud), og får tilbake den ferdige HTML-koden for en spiller. Resultatet er en liten iframe – et vindu i siden din som henter selve spilleren fra SoundCloud sine servere. Du trenger altså ikke å kopiere kompliserte kodesnutter selv; WordPress gjør oversettelsen fra lenke til spiller automatisk.

Denne «lim inn lenken»-oppskriften er den samme som brukes for YouTube, Vimeo, Spotify og mange andre tjenester. Vil du heller laste ned innholdet enn å bygge det inn, har vi en egen artikkel om hvordan du laster ned musikk fra SoundCloud.

Trenger du egentlig en plugin eller kode?

Nei – i de aller fleste tilfeller trenger du verken plugin eller kode. SoundCloud har vært en standard oEmbed-leverandør i selve WordPress-kjernen helt siden WordPress 3.5, som kom i desember 2012. Endringen ble gjort gjennom den offisielle utviklingssaken (Trac-billett #15734), der SoundCloud og SlideShare ble lagt til i listen over innebygde leverandører.

Det betyr at råddet i gamle veiledninger – «legg denne koden i functions.php for å få støtte for SoundCloud» – er utdatert. Støtten ligger allerede i WordPress. Kjernen inneholder en ferdig regel som kjenner igjen alle vanlige soundcloud.com-adresser og kobler dem mot SoundCloud sitt oEmbed-endepunkt på https://soundcloud.com/oembed. Du aktiverer altså ingenting; du limer bare inn lenken.

Kort oppsummert: metoden «uten plugin» er i dag rett og slett den innebygde standardfunksjonen i WordPress. Resten av denne guiden viser deg hvordan du bruker den riktig, og hva du gjør i de få tilfellene der du likevel vil ha et tillegg eller egen kode.

Slik bygger du inn SoundCloud uten plugin, steg for steg

Fremgangsmåten avhenger av hvilken editor du bruker. Nedenfor går vi gjennom blokkeditoren (Gutenberg), den klassiske editoren og metoden med egendefinert HTML for deg som vil ha full kontroll.

Metode 1: Blokkeditoren (Gutenberg)

Blokkeditoren er standarden i moderne WordPress, og her er innbygging enklest.

1. Gå til sporet, spillelisten eller albumet på SoundCloud og kopier adressen fra adressefeltet i nettleseren, eller fra Share-knappen.
2. Åpne innlegget ditt i WordPress og lim lenken inn på en helt egen linje.
3. WordPress kjenner igjen lenken og gjør den automatisk om til en SoundCloud-blokk med en ferdig spiller. Du ser forhåndsvisningen med en gang.

Du kan justere bredden og plasseringen med justeringsvalgene i blokkens verktøylinje. I blokkinnstillingene til høyre finner du som regel et valg for å tilpasse spilleren til mindre skjermer, slik at den ser bra ut på mobil.

Metode 2: Den klassiske editoren

Bruker du fortsatt den klassiske editoren, er prinsippet det samme: lim inn SoundCloud-lenken på en egen linje i tekstvisningen (ikke i HTML-visningen), uten noe annet på samme linje. Pass på at lenken ikke blir gjort om til en vanlig klikkbar lenke – den skal stå som ren tekst slik at WordPress kan tolke den som en innbygging. Den visuelle editoren viser deg en forhåndsvisning av spilleren. Ulempen er at du har færre muligheter til å justere bredde og justering enn i blokkeditoren.

Metode 3: Egendefinert HTML og iframe for full kontroll

Vil du styre nøyaktig hvordan spilleren ser ut – for eksempel høyde, farger, eller om du vil vise bølgeform eller en kompakt liste – kan du bruke SoundCloud sin egen embed-kode:

1. Klikk Share og deretter fanen Embed på sporet i SoundCloud.
2. Juster utseendet med valgene SoundCloud tilbyr, og kopier iframe-koden.
3. Lim koden inn i en «Egendefinert HTML»-blokk (eller i HTML-visningen i den klassiske editoren).

Denne metoden gir mest kontroll, men krever litt mer håndarbeid. Er du komfortabel med å redigere kode, kan du også ha nytte av guidene våre om tilpassede felter (custom fields) i WordPress og generelt arbeid med temaet ditt.

Spor, spillelister, album og podkaster

Alle de tre metodene fungerer med flere typer SoundCloud-innhold, ikke bare enkeltspor. Limer du inn lenken til en spilleliste eller et album, viser én og samme spiller hele samlingen med en liste leseren kan bla i. Lenker du til en SoundCloud-kanal (en brukerprofil), vises som regel profilbildet, antall spor og en følg-knapp. Dette gjør oEmbed praktisk for podkaster: du kan bygge inn en hel sesong med én lenke i stedet for å lime inn hver episode manuelt.

Husk at utseendet på spilleren avhenger av hva du lenker til. Et enkeltspor får ofte den kompakte «bølgeform»-spilleren, mens en spilleliste gir en høyere spiller med en rullbar liste. Vil du ha en bestemt høyde eller visning uansett innholdstype, er det igjen embed-koden (metode 3) som gir deg den finjusteringen.

Når trenger du functions.php-koden fortsatt?

Siden SoundCloud allerede ligger i WordPress-kjernen, trenger du normalt ikke å registrere leverandøren selv. Men funksjonen som gjorde det mulig i gamle veiledninger finnes fortsatt, og den kan være nyttig å kjenne til for andre tjenester som ikke er innebygd. Funksjonen heter wp_oembed_add_provider og har eksistert siden WordPress 2.9.

Den klassiske kodesnutten, oppdatert til sikker https-adresse, ser slik ut:

// Legg til SoundCloud som oEmbed-leverandør (vanligvis unødvendig i dag)
function add_oembed_soundcloud() {
    wp_oembed_add_provider( 'https://soundcloud.com/*', 'https://soundcloud.com/oembed' );
}
add_action( 'init', 'add_oembed_soundcloud' );

Koden legges i functions.php i temakatalogen din – aller helst i et barnetema, så den ikke forsvinner ved oppdatering. For SoundCloud er dette altså overflødig, fordi kjernen allerede registrerer tjenesten. For en tjeneste som ikke står på WordPress sin innebygde liste, er derimot akkurat denne fremgangsmåten den riktige: du angir et URL-mønster og peker på tjenestens oEmbed-endepunkt. Vil du fjerne en leverandør igjen, finnes den motsatte funksjonen wp_oembed_remove_provider.

Prinsippet «løs oppgaven med litt kode i stedet for enda en plugin» er noe vi har skrevet om før, blant annet i artikkelen om Twitter-tips og triks til WordPress uten å bruke innstikk.

Plugin-alternativer for SoundCloud i WordPress

Selv om du ikke trenger en plugin for vanlig innbygging, finnes det tillegg som gir ekstra funksjoner, for eksempel en [soundcloud]-kortkode (shortcode) med flere innstillinger. Her er de mest aktuelle:

• Jetpack – Automattics store allround-tillegg, som historisk har levert en [soundcloud]-kortkode sammen med en lang rekke andre funksjoner. Nyttig hvis du uansett bruker Jetpack til statistikk, sikkerhet eller deling, men tungt å installere bare for SoundCloud sin skyld.
• SoundCloud Shortcode – et lite, spesialisert tillegg som håndterer [soundcloud]-kortkoden. Det vedlikeholdes aktivt og fikset blant annet en sikkerhetssvakhet (CVE-2023-34018) i en nyere versjon. Et godt valg hvis du vil ha kortkode-funksjonen uten resten av Jetpack.
• Soundcloud Gold – dette tillegget ble stengt i WordPress sitt pluginregister 27. juli 2023 på grunn av en sikkerhetssak, og kan ikke lenger lastes ned. Det bør derfor ikke installeres. Vi nevner det fordi det er omtalt i eldre veiledninger, men du bør velge et av alternativene over.

En oversikt over fordeler og ulemper ved de ulike metodene finner du i tabellen under.

Vanlige feil og problemer – og hvordan du løser dem

Innbygging via oEmbed er stabilt, men noen få feil går igjen. Her er de vanligste.

Lenken blir en vanlig klikkbar lenke i stedet for en spiller

Den hyppigste årsaken er at URL-en ikke står alene på sin egen linje, eller at editoren har gjort den om til en klikkbar lenke. Fjern auto-lenkingen slik at adressen står som ren tekst, og sørg for at det ikke er annen tekst på samme linje.

Private spor vises ikke

Private eller skjulte spor på SoundCloud kan ikke bygges inn via den vanlige lenken, selv om de ligger i en offentlig spilleliste. Bruk et offentlig spor, eller hent den dedikerte embed-koden fra SoundCloud for private spor der det er tillatt.

Gammel http-lenke

Bruk alltid https-versjonen av SoundCloud-adressen. Nettsteder kjører i dag på https, og en usikker http-lenke kan gi blandet innhold som nettleseren blokkerer.

Spilleren oppdateres ikke etter endring

WordPress mellomlagrer (cacher) oEmbed-resultater for å spare tid. Hvis du har endret noe og den gamle spilleren henger igjen, kan du tømme hurtigbufferen for innlegget – for eksempel ved å lagre innlegget på nytt eller tømme nettstedets cache.

Konflikt mellom flere SoundCloud-tillegg

Har du både Jetpack og et eget SoundCloud-tillegg aktivt, kan kortkodene kollidere. Bruk bare én løsning for SoundCloud om gangen.

Personvern, GDPR og ytelse

En innebygd spiller er i praksis en iframe som laster innhold fra SoundCloud sine servere. Det betyr at leserens nettleser kobler seg til SoundCloud, som kan sette informasjonskapsler (cookies) og samle data. For norske og europeiske nettsteder er dette relevant for personvern: hvis du bruker en samtykkeløsning (cookie-banner), bør innbygde spillere helst lastes først etter at leseren har godtatt slike tredjeparts-informasjonskapsler.

For ytelse er iframes relativt «tunge» fordi de henter ekstra ressurser. Moderne WordPress bruker som regel «lazy loading», slik at spilleren først lastes når leseren scroller ned til den. Har du mange spor på én side, kan det likevel lønne seg å begrense antallet, eller å vise et lett forhåndsbilde som bytter til den fulle spilleren ved klikk.

Hvilken metode passer for deg?

Valget avhenger av hvor mye kontroll du trenger og hvor komfortabel du er med kode.

• Nybegynner som bare vil vise et spor: Bruk den innebygde metoden – lim inn lenken i blokkeditoren. Ingen plugin, ingen kode.
• Du vil styre utseendet nøye: Bruk SoundCloud sin egen embed-kode i en Egendefinert HTML-blokk.
• Du vil ha kortkode og bygger ofte inn lyd: Vurder SoundCloud Shortcode-tillegget, eller Jetpack hvis du uansett bruker det.
• Utvikler som jobber med flere tjenester: Bruk wp_oembed_add_provider for tjenester som ikke er innebygd – men ikke for SoundCloud, som allerede er dekket.

Uansett metode er innbygging av lyd en fin måte å gjøre bloggen mer levende på. Jobber du med å forbedre selve nettstedet, har vi flere guider, blant annet om WordPress-design for norske bloggere og en gjennomgang av nyttige WordPress-plugins for bloggen din.

Vanlige spørsmål (FAQ)

Må jeg ha plugin for å bygge inn SoundCloud i WordPress?

Nei. SoundCloud har vært en innebygd oEmbed-leverandør i WordPress siden versjon 3.5 i 2012. Du limer bare inn lenken på en egen linje, så lages spilleren automatisk.

Hvorfor blir SoundCloud-lenken bare en vanlig lenke og ikke en spiller?

Som regel fordi URL-en ikke står alene på sin egen linje, eller fordi den er gjort om til en klikkbar lenke. Pass på at adressen står som ren tekst alene på en linje, uten annen tekst.

Trenger jeg fortsatt functions.php-koden med wp_oembed_add_provider?

Ikke for SoundCloud – støtten ligger allerede i WordPress-kjernen. Funksjonen er derimot nyttig for andre tjenester som ikke er innebygd på WordPress sin standardliste.

Kan jeg bygge inn private spor fra SoundCloud?

Private eller skjulte spor kan normalt ikke bygges inn via den vanlige lenken. Du må bruke et offentlig spor, eller den dedikerte embed-koden der SoundCloud tillater det.

Hvordan endrer jeg bredden eller utseendet på spilleren?

I blokkeditoren justerer du bredde og plassering i blokkens verktøylinje. Vil du ha full kontroll, bruker du SoundCloud sin egen embed-kode i en Egendefinert HTML-blokk.