Social Badges

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 il 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. LinkedIn, aggiunto dopo, segue la stessa logica di Instagram: il dato è leggibile solo dal browser già loggato del proprietario.

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.

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

La domanda rischiosa: Instagram si può leggere?

Tutto il progetto poggiava su un'unica incognita: riesco a tirare fuori il numero di follower di Instagram senza un'API ufficiale? Se la risposta fosse stata no, non c'era prodotto. Da sloggati, Instagram sbatte in faccia un muro di consenso e non mostra niente. Da loggati, invece, la home contiene un dettaglio utile: il bottone «Profilo» è un link al proprio username, con accanto l'avatar. Da lì l'estensione ricava il proprio handle e fa una sola chiamata a un endpoint interno di Instagram — quello che il sito stesso usa per popolare la scheda profilo — con un header particolare che identifica l'app web. Torna un JSON con follower e foto profilo. Ha funzionato al primo tentativo, ed è il motivo per cui il resto è stato costruito: prima si verifica l'ipotesi che può far crollare tutto, poi si fa l'interfaccia.

Gli avatar che marciscono

Il primo bug vero è arrivato a badge già online: dopo qualche giorno le foto profilo di Instagram sparivano, lasciando l'icona dell'immagine rotta. Il motivo è nascosto nell'URL stesso dell'avatar: c'è un parametro di scadenza firmata, una data in esadecimale. Passata quella, il CDN di Instagram risponde «403» e l'immagine non carica più. La soluzione è un piccolo proxy PHP: il badge non punta mai direttamente all'avatar di Instagram, ma a una URL del portale che scarica l'immagine, la tiene in cache e la riserve — così anche quando il link originale scade, il badge continua a mostrare la faccia giusta. Gli avatar di YouTube, per confronto, sono URL stabili: nessun problema, nessun proxy.

Perché la «ricetta» sta sul server

L'estensione non sa come leggere le pagine: scarica le istruzioni dal server ogni volta. Sembra un giro strano, ma ha una ragione pratica. Instagram e YouTube cambiano la struttura delle loro pagine senza preavviso, e il giorno che lo fanno il badge smette di aggiornarsi. Se le regole di lettura fossero dentro l'estensione, correggerle vorrebbe dire pubblicare una nuova versione e aspettare la revisione del Chrome Web Store — giorni, nel migliore dei casi. Con le regole sul server, la correzione è un file caricato in trenta secondi, e tutti gli utenti la ricevono al passaggio successivo.

La riga che tiene tutto in piedi

Quella singola chiamata a Instagram, da una sessione loggata, funziona con qualunque username, non solo il proprio. È esattamente qui che un progetto del genere può diventare un problema: usarla per raccogliere i numeri di profili altrui, a volume, è il modo più rapido per farsi bloccare l'account — e per finire fuori dai termini di servizio. Per questo l'estensione è scritta per leggere solo lo username che trova nel bottone «Profilo», cioè il tuo, e lo fa con parsimonia: un controllo ogni sei ore, non a ogni visita. Non è una limitazione tecnica, è la scelta che separa uno strumento che dura da uno che vive una settimana.

Si aggiorna da solo, quando passi di lì

Una volta generato un badge, non c'è nulla da rifare a mano. L'estensione, in sottofondo, aggiorna i dati dei profili già creati ogni volta che il proprietario apre la home di Instagram o la propria pagina canale YouTube — in silenzio, senza chiedere nulla, e sempre con lo stesso freno delle sei ore. In pratica il badge resta fresco perché il proprietario, prima o poi, i suoi social li apre comunque.

Cosa c'è davvero dietro i badge di questo sito

La sezione Content Creator del portale è alimentata da questi badge, e vale la pena dire cosa mostrano davvero: cinque canali YouTube (i canali basket dei ragazzi, il canale dei mix di Yurrena, quello dei giochi), un profilo LinkedIn con qualche decina di collegamenti, e un profilo Instagram con due follower — che è di un gatto siberiano. Il badge li tratta tutti allo stesso modo: legge il numero, che sia due milioni o due, prende l'avatar e l'ultimo post, e lo mostra. È nato come strumento interno per una famiglia con più account sparsi, ed è ancora quello — solo che ora l'infrastruttura sotto (estensione magra, endpoint di soli dati pubblici, proxy per gli avatar, ricetta aggiornabile a caldo) è abbastanza solida da poterla dare in mano a chiunque.