Es überrascht mich immer wieder, wie wenig Leute ihren Youtube Kanal mit der eigenen Webseite verknüpft haben. Es gibts selbst grosse Youtuber die verzichten ganz auf eine eigene Webseite. Ist für mich alter Blogger echt unverständlich. Wenn ich nämlich die Youtube Daten so anschaue dann sieht es bei mir so aus:

Genau wie ihr sehen könnt 1/3 des Video Traffic kommt von Ausserhalb von Youtube – also auch meiner Webseite / Blog. Sowas sollte man sich natürlich nicht entgehen lassen.

Heute möchte ich euch nun zeigen wie ihr mit der Youtube API auf euren Youtube Kanal zugreifen könnt, die Daten abgreifen könnt und dann auf eurer Webseite anzeigen könnt.

Dafür braucht ihr eigentlich nur einen PHP Code und ein wenig CSS und HTML – und natürlich den Youtube API Zugang.

Hier gibts nun das passende Video und auch den entsprechenden Quellcode.

Video

Youtube API

Hier findet ihr mal eine schöne Übersichtsseite zur Youtube API. Wer das ganze selbst entdecken möchte, der findet auf dieser Seite alle Informationen darüber. Als erstes müsst ihr natürlich Google Cloud Plattform anmelden und euch mit eurem Google Konto verknüpfen. Der Zugriff zu den meisten API von Google ist kostenlos – ihr bekommt pro Monat ein gewisses Gratis-Budget und sobald ihr das Aufgebraucht habt, müsst ihr bezahlen. Ich glaub ihr dürft nicht mehr als 10’000 API Aufrufe pro Tag durchführen – denke das sollt eine Weile reichen 🙂

Nachdem ihr ein eigenes Projekt angelegt habt, könnt ihr in der Bibliothek nach Youtube APi’s suchen gehen und ihr findet dann 3 Stück davon.

Für diese Anzeige heute braucht ihr nur die Data API von Youtube, den Rest könnt ihr lassen oder ihr spielt selbst damit rum.

Danach müsst ihr nur noch die Anmeldedaten generieren und danach habt ihr die API Key. Denkt daran gebt euren API Key NIE weiter, denn damit man hat vollen Zugriff auf die entsprechende API. Wer also den Key hat könnt theoretisch allerlei Blödsinn anstellen (Lesben Pornos auf euren Kanal hochladen wäre wohl das „netteste“ – bis Youtube euch dafür dann euren Kanal löscht…). Also immer aufpassen.

HTML Code

1
2
3
4
5

<div class="container">
    <div class="button"><i class="fas fa-users"></i> <?php echo $subscriberCount; ?> Abonnenten</div> 
    <div class="button"><i class="far fa-eye"></i> <?php echo $viewCount; ?> Views</div>
    <div class="button"><i class="fas fa-video"></i> <?php echo $videoCount; ?> Videos</div>   
</div>

CSS Code

Als FontAwesome CDN Link habe ich diesen hier verwendet:

1

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

* {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #1D201F; /* Dunkler Hintergrund */
 
    }
    .container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
 
    }
    .button {
        background-color: red;
        border: none;
        color: #fff; /* Button Schriftfarbe */
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 4px 2px;
        cursor: pointer;
    }
 
    .fas, .far {
        font-size: 20px;
        color: #fff;
    }

Wenn ihr diese Anzeige zum Beispiel in eurem Livestream anzeigen möchtet, dann solltet ihr die Hintergrundfarbe durchsichtig machen. Dafür würdet ihr diesen CSS Code im Body brauchen.

1
2
3
4

body {
        background-color: rgba(255,255,255,0); /* Durchsichtiger Hintergrund */
 
    }

PHP Code

Denkt daran, bevor ihr den Code einsetzt müsst ihr noch eure Youtube Kannel ID herausfinden. Ihr findet das im Youtube Kanal Dashboard unter: Youtube Dashboard -> Anpassen -> Allgemeine Information -> Kanal-URL.

Danach müsst ihr die Variablen im PHP Code noch anpassen und zwar die Channel-ID bei UC_ASDFASDFASDFASDFASDF und den API Schlüssel bei ASDFASDFASDFASDFASDFASDFASDFASDF.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
 
$channel_id = 'UC_ASDFASDFASDFASDFASDF';
$api_key = 'ASDFASDFASDFASDFASDFASDFASDFASDF';
 
$api_response = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=statistics&id='.$channel_id.'&key='.$api_key);
$api_response_decoded = json_decode($api_response, true);
 
$subscriberCount = $api_response_decoded['items'][0]['statistics']['subscriberCount'];
$videoCount = $api_response_decoded['items'][0]['statistics']['videoCount'];
$viewCount = $api_response_decoded['items'][0]['statistics']['viewCount'];
 
?>

Sobald ihr das ganze dann auf einem Webserver hochgeladen hat, der PHP und Internetzugang hat, solltet ihr eure Daten angezeigt bekommen. Nun könnt ihr das Design noch nach eurem Geschmack anpassen und voilà eure Besucher sehen wieviele Videos ihr auf Youtube bisher hochgeladen habt, wieviele Abonnenten ihr habt und wieviele Views ihr im Totalen habt.

WordPress Plugin

Wie ich im Video angekündigt habe, gibts dafür auch ein WordPress Plugin und ja es ist noch gratis 🙂 aber im Laufe der Zeit könnte es was kosten. Hier kann man es herunterladen.

Man installiert einfach das Plugin in WordPress und aktiviert es.

Danach holt man sich sein API Key bei Google und gibt ihn im Plugin Adminbereich ein

Sobald das gemacht worden ist, kann man den gesuchten Style auswählen

Und danach kann man die Shortcodes auf der entsprechenden Seite einbauen und dort werden dann die Buttons angezeigt.

So einfach geht es mit diesem Plugin