• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage YouTube Abozahl einbinden

InvisibleQuantum

InvisibleQuantum

Neues Mitglied
Hay, ich hoffe, dass ich in der richten Kategorie bin ;),
Folgendes: Ich habe mir eine einzelne Seite erstellt, die eigentlich nur aus einem Hintergrundbild besteht. Jetzt möchte ich, dass in der Mitte meiner Seite die Anzahl der Abonnenten eines YouTube Kanals angezeigt wird. Hört sich zwar ein bisschen sinnlos an, aber egal ^^. Ich hab schon ein wenig gegooglet, aber bisher nur die Funktion gefunden, um den ganzen Abobutton einzubinden... Mir geht es aber nur um die Zahl. Ich habs auch schon mit der YouTube API, versucht, aber leider versteh ich das nicht, da ich ja noch Anfänger bin. Aber vielleicht könnt ihr mir helfen...

Damit das ganze besser aussieht, würd ich gern die Zahl nicht nur normal als Text stehn haben, sondern in solchen Kästchen:
3lzfxnmx.jpg

Hier ist noch der Hintergrund.
lq4zc95q.jpg
In dem Feld in der Mitte sollte später die Zahl drinnen stehn... natürlich sollten die Kästchen auch ungefähr die selbe größe haben, nur eben ein wenig kleiner, je nachdem was besser aussieht :),

Die Anzahl der Abos sollte sich auch immer anpassen :)

LG
 
Werbung:
Guten Morgen,
also eins vorweg, wenn du willst, dass dies jemand für dich erstellt, dann wäre der Beitrag in der Jobbörse besser aufgehoben. Wenn du es allerdings selbst machen willst und Hilfe brauchst, dann werden wir versuchen dir zu helfen

Hier sind einige Infos bzgl. der Youtube API.
https://developers.google.com/youtube/v3/getting-started

Da musst du den Bereich "Before you start" abarbeiten. Denn du bräuchtest einen API Key. Damit könntest du denn die Statistic deines Channels abfragen oder von einem anderen Channel

Code: 
https://www.googleapis.com/youtube/v3/channels?key=<API_KEY>&forUsername=<USERNAME>&part=statistics

Wenn du die Platzhalter, die in < > klammern stehen mit den dazugehörigen Werten austauscht und im Browser eingibst. Bekommst du einen Response in Form von Json zurück. Und da hast du denn den Eintrag "subscriberCount".

Um dir weiter helfen zu können bräuchte man einen Teil deines Quellcodes, womit du nicht klar kommst um dir da weiter zu helfen ;)
 
Danke, hat mich einen ganzen Schritt weitergebracht.
Jetzt hab ich leider das Problem, dass ich nicht genau weiß wie ich die Daten (Abozahl) in die HTML so einbinde, dass diese ausgegeben wird...

So weit bin ich gekommen:
Code: 
<html>
<head>
<title>InvisibleQuantum Abonnenten</title>
    <script type="text/javascript">
    window.onload = function() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://www.googleapis.com/youtube/v3/channels?key=AIzaSyBbRR6VW9mq1p8xnFkBHQpMio1hyvBXMBY&forUsername=InvisibleQuantum&part=statistics", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                var channels = JSON.parse(xhr.responseText);
               
                var a = document.createElement("a");
                a.innerHTML = channels.subscriberCount;
               
                var body = document.getElementByTagName("body")[0];
                body.appendChild(a);
            }
        }
        xhr.send(null);
    };
    </script>
</head>
<body style="background-image: url('background.jpg'); background-size: cover;">

</body>
</html>

Leider ist die Seite nach wie vor leer. Aber die Verbindung zu der JSON-Datei wird aufgebaut.. Kann man ja mit dem Firefox Netzwerk-Tool sehn.

Ich versteh nicht ganz, wie man die Daten aus der JSON ausgibt...
 
Werbung:
Okay, habs fertig... funktioniert super ;)
Jetzt nur noch die Zahl stylen und das wars's:

Habt ihr noch Verbesserungstipps?
Code: 
<html>
<head>
<title>InvisibleQuantum Abonnenten</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

    $(function loadAPI() {
   
        function formatNumber (num) {
        return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
    }
   
    var i = "";
    $.getJSON("https://www.googleapis.com/youtube/v3/channels", {
                        key: "AIzaSyBbRR6VW9mq1p8xnFkBHQpMio1hyvBXMBY",
                        forUsername: "Gronkh",
                        part: "statistics",
                    }, function(data) {
                        if (data.items.length === 0) {
                            $("<p style='color: #F00; position: fixed; left: 44%; top: 49%;'>Kanal derzeit nicht ereichbar!</p>").appendTo("#kanal_");
                            return;
                        }
               
                    $abos = data.items[0].statistics.subscriberCount ;
               
                    $("<p style='text-indent: -10000px;'></p>").text($abos + " Abonnenten").appendTo("#abos_" + i);
                    $("<p style='position: fixed; left: 50%; top: 49%;'></p>").text(formatNumber($abos)).appendTo("#abos_" + i);
                    });
               
    });
    </script>

</head>
<body style="background-image: url('background.jpg'); background-size: cover;">
    <div id="kanal_">
    </div>
    <div id="abos_">
    </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben