Du slipper en YouTube-videolenke inn i editoren, og det fungerer. Men når du trenger en hel spilleliste på nettstedet ditt som automatisk plukker opp nye videoer, blir manuell kopiering av lenker for hver gang et ork.

Et skript i PHP med YouTube Data API v3 løser problemet fullstendig: det henter alle videoer fra enhver offentlig spilleliste, returnerer JSON, og du viser dem akkurat slik du vil, som et rutenett av kort, en liste, et galleri. Oppsett tar 15 minutter, du trenger bare en API-nøkkel og grunnleggende PHP.

Nedenfor finner du fungerende kode for WordPress med feilhåndtering, paginering og mellomlagring. Tilnærmingen er universell: den fungerer i ethvert PHP-prosjekt, ikke bare i WP.

💡 Rask oversikt:

• Opprett en API-nøkkel i Google Cloud Console og knytt den til YouTube Data API v3
• Send en forespørsel til playlistItems og få JSON med alle spillelistevideoene
• Tolk responsen, samle inn miniatyrbilder og lenker, vis dem i et rutenett på siden
• Legg til paginering for spillelister med mer enn 50 videoer og mellomlagring via set_transient()

Trinn 1: Opprett en YouTube Data API v3-nøkkel

En API-nøkkel identifiserer applikasjonen din overfor YouTube og sporer kvoter. Opprettes gratis, daglig grense er 10 000 enheter. Én nøkkel er mer enn nok for de fleste nettsteder.

Gå til Google Cloud Console med Google-kontoen din. Opprett et nytt prosjekt, prosjektvalgknappen ligger i topplinjen, deretter Nytt prosjekt. Gi det et meningsfylt navn, for eksempel my-youtube-feed.

Etter at du har opprettet prosjektet, gå til API-er og tjenester → Bibliotek. I søkefeltet skriver du YouTube Data API v3 og klikker Aktiver. Uten dette trinnet vil ikke nøkkelen knyttes til riktig API, og forespørsler vil returnere 403.

Så, selve nøkkelen. I sidemenyen åpner du Legitimasjon, klikker Opprett legitimasjon → API-nøkkel. Systemet vil generere en nøkkel og vise den i et modalt vindu. Kopier den med en gang: etter at du har lukket vinduet, er nøkkelen synlig i listen, men verdien er delvis skjult.

Sørg for å klikke Begrens nøkkel. I seksjonen API-begrensninger velger du YouTube Data API v3, da vil ikke nøkkelen fungere for andre API-er selv om den havner i et offentlig repository. For lokal utvikling kan HTTP-referrer stå tom.

Nøkkelen ser ut som AIzaSyD-.... Lagre den i wp-config.php via define('YOUTUBE_API_KEY', '...') og legg til wp-config.php i .gitignore. Ikke hardkod nøkkelen i temakode.

Trinn 2: Hent videoer fra en spilleliste

For forespørselen trenger du to ting: en API-nøkkel og en spilleliste-ID. ID-en hentes fra URL-en: åpne spillelisten på YouTube, kopier adressefeltet. Parameteren list= i URL-en er spilleliste-ID-en: for eksempel PLp0YhAQYkolGq1e6r1m5....

Grunnleggende PHP-forespørsel til playlistItems-endepunktet:

1
$api_key     = 'AIzaSy...';          // your key from step 1
2
$playlist_id = 'PLp0YhAQYkolG...';   // playlist ID from URL
3
 
4
$api_url = 'https://www.googleapis.com/youtube/v3/playlistItems' .
5
    '?part=snippet' .
6
    '&maxResults=50' .
7
    '&playlistId=' . urlencode($playlist_id) .
8
    '&key=' . $api_key;
9
 
10
$response = file_get_contents($api_url);
11
$data     = json_decode($response, true);
12
 
13
if (json_last_error() !== JSON_ERROR_NONE) {
14
    die('JSON parsing error: ' . json_last_error_msg());
15
}

Hva som skjer her. part=snippet ber om grunnleggende data: tittel, beskrivelse, miniatyrbilde, posisjon i spillelisten. For et fullstendig sett kan du spesifisere snippet,contentDetails,status. maxResults=50 er maksimum per forespørsel, API-et returnerer 5 poster som standard, så det er bedre å spesifisere parameteren eksplisitt. Kod playlistId via urlencode() i tilfelle spesialtegn.

For produksjon, erstatt file_get_contents() med wp_remote_get() (i WordPress) eller cURL med timeout. Et direkte kall vil feile hvis Google er midlertidig utilgjengelig eller nettverket er tregt. Her er en versjon med HTTP-feilhåndtering:

1
$response = wp_remote_get($api_url, [
2
    'timeout' => 15,
3
    'headers' => ['Accept' => 'application/json'],
4
]);
5
 
6
if (is_wp_error($response)) {
7
    error_log('YouTube API error: ' . $response->get_error_message());
8
    return [];
9
}
10
 
11
$http_code = wp_remote_retrieve_response_code($response);
12
if ($http_code !== 200) {
13
    error_log('YouTube API HTTP ' . $http_code);
14
    return [];
15
}
16
 
17
$body = wp_remote_retrieve_body($response);
18
$data = json_decode($body, true);

To nivåer av sjekk: først fanger is_wp_error() opp nettverksfeil, deretter verifiserer vi HTTP-koden. Hvis noe går galt, returnerer vi en tom array, nettstedet krasjer ikke.

Trinn 3: Vis videolisten på en side

API-et returnerer en items-array. Hvert element er én spillelistevideo. Responsstruktur:

1
{
2
  "items": [
3
    {
4
      "snippet": {
5
        "title": "Video title",
6
        "description": "Description...",
7
        "thumbnails": {
8
          "default":  { "url": "https://i.ytimg.com/.../default.jpg" },
9
          "medium":   { "url": "https://i.ytimg.com/.../mqdefault.jpg" },
10
          "high":     { "url": "https://i.ytimg.com/.../hqdefault.jpg" }
11
        },
12
        "resourceId": {
13
          "videoId": "dQw4w9WgXcQ"
14
        }
15
      }
16
    }
17
  ]
18
}

En video identifiseres av resourceId.videoId. Fra den settes lenken https://www.youtube.com/watch?v=<videoId> sammen. Miniatyrbilder ligger i thumbnails i tre oppløsninger: for et kortrutenett, ta medium, for en kompakt liste, default.

Utskriftskode for WordPress, shortcode eller sidemal:

1
if (! empty($data['items'])) {
2
    echo '<div class="yt-playlist-grid">';
3
 
4
    foreach ($data['items'] as $item) {
5
        $title     = esc_html($item['snippet']['title']);
6
        $video_id  = esc_attr($item['snippet']['resourceId']['videoId']);
7
        $thumbnail = esc_url($item['snippet']['thumbnails']['medium']['url']);
8
        $link      = 'https://www.youtube.com/watch?v=' . $video_id;
9
 
10
        printf(
11
            '<a href="%s" class="yt-card" target="_blank" rel="noopener">'
12
            . '<img src="%s" alt="%s" loading="lazy">'
13
            . '<span>%s</span></a>',
14
            $link, $thumbnail, $title, $title
15
        );
16
    }
17
 
18
    echo '</div>';
19
}

Tre ting som sparer debugging-tid:

• loading="lazy". Med 50 videoer på en side uten lazy loading vil PageSpeed falle. Attributtet forteller nettleseren: last bildet først når det rulles til.
• esc_html()** og esc_url().** Obligatorisk sanitering for WordPress. Videotitler inneholder noen ganger anførselstegn og HTML-entiteter, uten escaping vil de ødelegge layouten.
• target="_blank"** med rel="noopener".** Åpne YouTube i en ny fane, men ikke gi den tilgang til window.opener, beskyttelse mot tab-napping.

CSS for rutenettet, minimal, for et standardtema:

1
.yt-playlist-grid {
2
    display: grid;
3
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
4
    gap: 20px;
5
}
6
.yt-card {
7
    text-decoration: none;
8
    color: inherit;
9
    border-radius: 8px;
10
    overflow: hidden;
11
    transition: transform 0.2s;
12
}
13
.yt-card:hover {
14
    transform: translateY(-2px);
15
}
16
.yt-card img {
17
    width: 100%;
18
    aspect-ratio: 16 / 9;
19
    object-fit: cover;
20
}
21
.yt-card span {
22
    display: block;
23
    padding: 10px;
24
    font-weight: 600;
25
    font-size: 14px;
26
}

Rutenettet tilpasser seg automatisk til skjermbredden: auto-fill + minmax(280px, 1fr) gir fra én til flere kolonner uten media queries.

Trinn 4: Paginering, kvoter og vanlige feil

Paginering. Én forespørsel returnerer maksimalt 50 videoer. Hvis det er flere i spillelisten, vises et nextPageToken-felt i responsen. Send det med i neste forespørsel, så vil API-et returnere neste side. Løkke:

1
$all_items  = [];
2
$page_token = null;
3
 
4
do {
5
    $url = $api_url . '&pageToken=' . urlencode($page_token ?? '');
6
    // ... API request ...
7
    $all_items  = array_merge($all_items, $data['items'] ?? []);
8
    $page_token = $data['nextPageToken'] ?? null;
9
} while ($page_token && count($all_items) < 500);

Løkken stopper ved 500 videoer, et fornuftig tak for en nettside. Uten en grense risikerer du å bruke opp hele kvoten på et par innlastinger.

Kvoter. Hvert playlistItems.list-kall koster 1 kvoteenhet, dette bekreftes av Googles offisielle kvotetabell. Daglig grense er 10 000 enheter. Det er 10 000 forespørsler per dag, mer enn nok for de aller fleste nettsteder. Men hvis spillelisten oppdateres ofte, legg til mellomlagring:

1
$cache_key   = 'yt_playlist_' . md5($playlist_id);
2
$cached_data = get_transient($cache_key);
3
 
4
if ($cached_data !== false) {
5
    return $cached_data;
6
}
7
 
8
// ... API request ...
9
 
10
set_transient($cache_key, $data, HOUR_IN_SECONDS * 6);

Seks timer er en fornuftig balanse mellom ferskhet og kvoteøkonomi. For ikke-kritiske spillelister, sett 12-24 timer. get_transient() og set_transient() er native WordPress-funksjoner, de fungerer med objektmellomlager (Redis/Memcached) hvis det er konfigurert, ellers skriver de til wp_options.

Vanlige feil og hva du gjør med dem:

• 403 Forbidden. API er ikke aktivert for prosjektet i Google Cloud Console. Gå tilbake til trinn 1: Aktiver-knappen for YouTube Data API v3 må være klikket. Sjekk også om det er en IP-begrensning i nøkkelinnstillingene.
• 400 Bad Request, «API key not valid». Nøkkelen ble nettopp opprettet og har ikke aktivert seg ennå. Vent 2-5 minutter: API-begrensninger forplanter seg ikke umiddelbart.
• 404 Not Found. Ugyldig spilleliste-ID, eller spillelisten er privat. En API-nøkkel returnerer bare offentlige og ikke-oppførte spillelister. Private krever OAuth-autorisasjon.
• Tom items-array med gyldig ID. Mest sannsynlig er spillelisten tom. Åpne spilleliste-URL-en i en nettleser og forsikre deg om at det finnes videoer.

💻 Video: YouTube Data API v3 i aksjon

En kort video om emnet, viser visuelt hele prosessen fra å opprette en nøkkel til å vise en videoliste:

⁉️🤔 Ofte stilte spørsmål

Fungerer API-et med private spillelister?

Nei. playlistItems.list med en API-nøkkel returnerer bare offentlige og ikke-oppførte spillelister. For private trenger du OAuth-autorisasjon: brukeren må eksplisitt gi applikasjonen din tilgang til kontoen sin. For et offentlig aggregatornettsted er en API-nøkkel nok.

Kan jeg hente videoer fra andres spilleliste?

Ja, hvis spillelisten er offentlig. En API-nøkkel er ikke knyttet til spillelisteeieren, den identifiserer applikasjonen din, ikke YouTube-brukeren. Enhver offentlig spilleliste er tilgjengelig via ID, uavhengig av hvem som opprettet den.

Hvordan får jeg mer enn 50 videoer på én gang?

Det kan du ikke, det er en hard grense for maxResults for playlistItems, fastsatt i Googles dokumentasjon. Bruk paginering via nextPageToken (trinn 4). For en spilleliste med 300 videoer trenger du 6 sekvensielle forespørsler, til sammen vil de bruke 6 kvoteenheter av 10 000 daglige.

Hvorfor vises ikke videominiatyrbildene?

Sjekk URL-en i thumbnails: feltet heter url, ikke link og ikke src. Andre årsak, annonseblokkere kutter noen ganger domenet i.ytimg.com. Tredje: noen gamle videoer (før 2010) har ikke høyoppløselige miniatyrbilder, ta default, den er alltid der.

Hva gjør jeg hvis nøkkelen er kompromittert?

Gå umiddelbart til Google Cloud Console → Legitimasjon, finn nøkkelen og klikk Slett. Opprett en ny. Den gamle nøkkelen deaktiveres innen 5 minutter. Lagre nøkkelen via define('YOUTUBE_API_KEY', '...') i wp-config.php og ekskluder denne filen fra repositoryet via .gitignore.

Er det verdt bryet med API-et hvis du bare kan lime inn en spillelistelenke?

Hvis én statisk spilleliste via iframe er nok for nettstedet, trenger du ikke API-et, YouTube tilbyr ferdig innebyggingskode. Men så snart du trenger å automatisk plukke opp nye videoer, filtrere på dato, tilpasse layout eller vise miniatyrbilder i et ikke-standard design, blir API-et det eneste fungerende alternativet.

For et WordPress-nettsted eliminerer kombinasjonen wp_remote_get() + set_transient() fullstendig bekymringer om kvote og hastighet: én gang hver fjerde time henter skriptet JSON, mellomlagrer det, og frontenden jobber med mellomlageret umiddelbart. Spillelisten oppdaterer seg selv, redaktøren trenger ikke å klikke på noe.

Hvis temaet ditt støtter tilpasset PHP i maler, ta koden fra trinn 3, endre CSS-en for å matche ditt design. Hvis du bruker en sidebygger, pakk PHP-logikken inn i en shortcode og sett den inn hvor som helst via [youtube_playlist id="PLp0..."].

Prøv det med én spilleliste: 15 minutter for en nøkkel og den første forespørselen, så ser du om tilnærmingen fungerer for din oppgave. Og hvis du allerede har brukt API-et til andre formål, skriv i kommentarfeltet hvilket endepunkt som viste seg å være mest nyttig.