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.
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.
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".