Social Badges
Live-Badges mit Avatar, Followern und letztem Beitrag für YouTube, Instagram und LinkedIn, einbindbar mit einer Codezeile. Chrome-Erweiterung inklusive.
Wer mehrere Social-Profile verwaltet, möchte auf der eigenen Website oft einen stets aktuellen Follower-Zähler zeigen — aber die offiziellen APIs von Plattformen wie Instagram sind geschlossen oder eingeschränkt, und öffentliche Seiten wiederholt zu scrapen riskiert einen Verstoß gegen die Nutzungsbedingungen. Social Badges entstand aus einer technischen Validierungsarbeit, um das Problem nachhaltig zu lösen.
Die Architektur
Das System teilt die Rollen in drei Teile auf: eine Chrome-Erweiterung, die nur vom Profilinhaber installiert wird, liest die eigenen Daten (Follower, Avatar, letzter Beitrag), während er im bereits eingeloggten Konto surft; diese Daten werden an einen Endpunkt gesendet, der sie speichert; das öffentliche Embed auf der Website liest diese Daten nur lesend. Besucher der Website lösen selbst nie eine Anfrage an Instagram oder YouTube aus: sie fragen nur unseren Endpunkt.
Bei Instagram liest der Ablauf ausschließlich den eigenen Benutzernamen des Inhabers, entnommen aus dem "Profil"-Button der Startseite — nie beliebige Handles — genau um im Rahmen einer angemessenen Datennutzung zu bleiben und nicht wie Massen-Scraping zu wirken. Bei YouTube sind die Daten (Abonnenten, Avatar, letztes Video) im HTML der Kanalseite öffentlich, werden also direkt serverseitig via PHP abgerufen, ohne die Erweiterung zu benötigen. LinkedIn, später hinzugefügt, folgt derselben Logik wie Instagram: die Daten sind nur aus dem bereits eingeloggten Browser des Inhabers lesbar.
Das Widget
Zum Einbinden reicht ein kleines div plus ein Skript: das Widget (Shadow DOM, sodass es das Styling der Gastgeberseite weder erbt noch verunreinigt) bietet drei Varianten — card, compact und post (mit Miniaturbild und Titel des zuletzt veröffentlichten Inhalts) — und genau dieses Widget versorgt den Content-Creator-Bereich dieses Portals.
Das Einbinden ist auf das absolute Minimum ausgelegt: ein <div class="p3d-badge" data-id="..."> an der Stelle, an der das Badge erscheinen soll, plus ein einziges <script>, das nur einmal eingefügt wird, notfalls auch am Ende des Bodys. Der Code-Generator auf der Projektseite bietet außerdem die Varianten Mehrere Badges (für mehr als eines) und Compact.
Die drei Varianten decken unterschiedliche Anwendungen ab: Card ist das Basisformat mit Avatar und Abonnentenzahl; Compact ist eine Pille für Header oder Sidebars mit wenig Platz; Post fügt zusätzlich Miniaturbild und Titel des zuletzt veröffentlichten Inhalts hinzu — nützlich für alle, die nicht nur "wie viele wir sind" zeigen wollen, sondern auch "was wir gerade veröffentlicht haben".
Die riskante Frage: lässt sich Instagram auslesen?
Das ganze Projekt hing an einer einzigen Unbekannten: kann ich die Instagram-Followerzahl ohne offizielle API bekommen? Wäre die Antwort nein gewesen, gäbe es kein Produkt. Ausgeloggt wirft Instagram einem eine Consent-Wand entgegen und zeigt nichts. Eingeloggt jedoch enthält die Startseite ein nützliches Detail: der «Profil»-Button ist ein Link auf den eigenen Benutzernamen, mit dem Avatar daneben. Von dort leitet die Erweiterung ihren eigenen Handle ab und macht einen Aufruf an einen internen Instagram-Endpunkt — denselben, mit dem die Seite die Profilkarte füllt — mit einem bestimmten Header, der die Web-App kennzeichnet. Zurück kommt ein JSON mit Followern und Profilbild. Es hat beim ersten Versuch funktioniert, und deshalb wurde der Rest gebaut: zuerst prüft man die Annahme, die alles zum Einsturz bringen kann, dann baut man die Oberfläche.
Die Avatare, die verrotten
Der erste echte Bug tauchte bei bereits live geschalteten Badges auf: nach ein paar Tagen verschwanden die Instagram-Profilbilder und hinterließen das Symbol für ein kaputtes Bild. Der Grund steckt in der Avatar-URL selbst: sie trägt einen Parameter mit signiertem Ablaufdatum, ein Datum in Hexadezimal. Danach antwortet das CDN von Instagram mit «403» und das Bild lädt nicht mehr. Die Lösung ist ein kleiner PHP-Proxy: das Badge zeigt nie direkt auf den Instagram-Avatar, sondern auf eine Portal-URL, die das Bild herunterlädt, zwischenspeichert und erneut ausliefert — so zeigt das Badge auch dann das richtige Gesicht, wenn der Originallink abgelaufen ist. YouTube-Avatare sind im Vergleich stabile URLs: kein Problem, kein Proxy.
Warum das «Rezept» auf dem Server liegt
Die Erweiterung weiß nicht, wie die Seiten zu lesen sind: sie lädt die Anweisungen jedes Mal vom Server. Das klingt nach einem seltsamen Umweg, hat aber einen praktischen Grund. Instagram und YouTube ändern die Struktur ihrer Seiten ohne Vorwarnung, und an dem Tag, an dem sie es tun, hört das Badge auf zu aktualisieren. Lägen die Leseregeln in der Erweiterung, hieße sie zu korrigieren: eine neue Version veröffentlichen und die Prüfung im Chrome Web Store abwarten — Tage, bestenfalls. Mit den Regeln auf dem Server ist die Korrektur eine in dreißig Sekunden hochgeladene Datei, und jeder Nutzer bekommt sie beim nächsten Durchlauf.
Die Zeile, die alles trägt
Dieser eine Aufruf an Instagram, aus einer eingeloggten Sitzung, funktioniert mit jedem Benutzernamen, nicht nur dem eigenen. Genau hier kann ein solches Projekt zum Problem werden: es zu nutzen, um die Zahlen anderer Leute zu sammeln, in Masse, ist der schnellste Weg, das Konto sperren zu lassen — und außerhalb der Nutzungsbedingungen zu landen. Deshalb ist die Erweiterung so geschrieben, dass sie nur den Benutzernamen liest, den sie im «Profil»-Button findet, also deinen, und das sparsam: eine Prüfung alle sechs Stunden, nicht bei jedem Besuch. Es ist keine technische Einschränkung, es ist die Entscheidung, die ein Werkzeug, das Bestand hat, von einem trennt, das eine Woche lebt.
Es aktualisiert sich selbst, wenn du vorbeikommst
Ist ein Badge einmal erzeugt, gibt es nichts von Hand zu wiederholen. Im Hintergrund frischt die Erweiterung die Daten der bereits erstellten Profile auf, sobald der Inhaber die Instagram-Startseite oder seine eigene YouTube-Kanalseite öffnet — lautlos, ohne nachzufragen, und immer mit derselben Sechs-Stunden-Bremse. In der Praxis bleibt das Badge frisch, weil der Inhaber seine Social-Media-Profile früher oder später ohnehin öffnet.
Was wirklich hinter den Badges dieser Seite steckt
Der Content-Creator-Bereich des Portals wird von diesen Badges gespeist, und es lohnt sich zu sagen, was sie tatsächlich zeigen: fünf YouTube-Kanäle (die Basketball-Kanäle der Kinder, der Kanal mit den Yurrena-Mixes, der für die Spiele), ein LinkedIn-Profil mit ein paar Dutzend Kontakten und ein Instagram-Profil mit zwei Followern — das einer Sibirischen Katze gehört. Das Badge behandelt sie alle gleich: es liest die Zahl, ob zwei Millionen oder zwei, holt den Avatar und den letzten Beitrag und zeigt es an. Es begann als internes Werkzeug für eine Familie mit mehreren verstreuten Konten, und das ist es immer noch — nur ist die Infrastruktur darunter (eine schlanke Erweiterung, ein Endpunkt mit ausschließlich öffentlichen Daten, ein Proxy für die Avatare, ein im laufenden Betrieb austauschbares Rezept) inzwischen solide genug, um sie jedem in die Hand zu geben.