← SOFTWARE & PROJECTS
● ONLINE
TOOL

Social Badges

Badge live con avatar, follower e ultimo post per YouTube, Instagram e LinkedIn, incorporabili in una riga di codice. Estensione Chrome inclusa.

STATOOnline
PUBBLICATO1 luglio 2026
STACKJavaScript · Chrome Extension · API

Chi gestisce più profili social vorrebbe spesso mostrare, sul proprio sito, un contatore follower sempre aggiornato — ma le API ufficiali di piattaforme come Instagram sono chiuse o limitate, e "scrapare" pagine pubbliche a raffica rischia di violare i termini di servizio. Social Badges nasce da un lavoro di validazione tecnica per risolvere il problema in modo sostenibile.

L'architettura

Il sistema separa i ruoli in tre parti: un'estensione Chrome, installata solo dal proprietario del profilo, legge i propri dati (follower, avatar, ultimo post) mentre naviga sul proprio account già loggato; questi dati vengono inviati a un endpoint che li salva; l'embed pubblico sul sito legge quei dati in sola lettura. Chi visita il sito non innesca mai una richiesta verso Instagram o YouTube: chiede solo al nostro endpoint.

Per Instagram, il flusso legge esclusivamente lo proprio username del proprietario a partire dal bottone "Profilo" della home — mai handle arbitrari — proprio per restare entro un uso ragionevole dei dati e non somigliare a uno scraping massivo. Per YouTube invece i dati (iscritti, avatar, ultimo video) sono pubblici nell'HTML della pagina canale, quindi vengono recuperati direttamente lato server via PHP, senza bisogno dell'estensione.

Il widget

Sul sito basta incorporare un piccolo div e uno script: il widget (Shadow-DOM, così non eredita né sporca lo stile della pagina ospitante) espone tre varianti — card, compact e post (con miniatura e titolo dell'ultimo contenuto pubblicato) — ed è quello che alimenta la sezione Content Creator di questo stesso portale.

Codice di embed del badge: un div con data-id e uno script da incollare una sola volta

Incorporarlo è pensato per richiedere il minimo indispensabile: un <div class="p3d-badge" data-id="..."> nel punto della pagina dove deve comparire il badge, più un unico <script> da incollare una sola volta, anche in fondo al body. Il generatore di codice sul sito del progetto propone anche le varianti Più badge (per incorporarne più di uno) e Compatto.

Le tre varianti disponibili del badge: Card, Compact e Post

Le tre varianti coprono usi diversi: Card è il formato base con avatar e conteggio iscritti; Compact è una pillola pensata per header o sidebar dove lo spazio è poco; Post aggiunge anche la miniatura e il titolo dell'ultimo contenuto pubblicato, utile a chi vuole mostrare non solo "quanti siamo" ma anche "cosa abbiamo appena pubblicato".

#js#chrome#api
APRI IL PROGETTO ↗ ← Torna a tutti i progetti