Widget scorrevole con gli avatar di chi ci segue su Facebook, Twitter e Google+.

Come installare un widget compatto con effetto hover che al passaggio del mouse mostra i follower suTwitter, chi segue la nostra pagina fan su Facebook e chi ci ha inserito nelle sue cerchie di Google+. Saranno visualizzati anche i bottoni per seguirci e il numero di follower nei vari social network,

Come probabilmente saprete Twitter ha modificato le sue API rendendo inutilizzabili tutti i widget che avevamo creato per questo social network probabilmente con l'intento di promuovere i suoi widget ufficiali. Per questa ragione hanno anche smesso di funzionare per quello che riguarda la parte di Twitter anche i widget misti che mostravano bottoni o Fanbox dei vari social. 

Ieri ho presentato il FanBox di Twitter utilizzando l'applicazione creata da uno sviluppatore. Usando questo stesso codice possiamo quindi creare un gadget molto funzionale e anche esteticamente validissimo che mostra in modo compatto gli avatar di chi ha cliccato su Mi Piace della nostra pagina Facebook, di chi ci ha inserito nelle sue Cerchie di Google+ e appunto di chi è nostro follower su Twitter

Si tratta di un gadget che può essere installato in una sidebar e che interagisce al passaggio del cursore mostrando appunto gli avatar di chi ci segue nei rispettivi social. È ovviamente personalizzabile nelle dimensioni, nei colori e nel numero di avatar da mostrare.

L'installazione è semplicissima visto che non occorre neppure modificare il modello. Dobbiamo però dare l'autorizzazione all'accesso della applicazione di Twitter. Anche se non avete installato il FanBox di di cui ho parlato ad inizio post andate comunque a crearlo solo per poter dare il consenso alla applicazione in modo da visualizzare anche i follower di Twitter.

Fatto questo andate su Layout > Aggiungi un gadget > HTML/Javascript e incollate questo codice

• Codice dello slide widget di Facebook, Twitter e Google+ -

Salvate e posizionate a piacere quindi salvate la disposizione. Si possono fare molte personalizzazioni di cui elencherò le più importanti. Per facilitare il lettore ho colorato di blu il testo visibile che si può modificare mentre ho colorato di viola i dati degli account.  Ho scelto invece il colore rosso per i parametri su cui si può operare.

1. Vanno inseriti l'ID della pagina Facebook, dell'account Google+ e del nome utente Twitter
2. Si possono usare altri vocaboli al posto di Amici Facebook, Follower Google+ e Twitter
3. Il widget prende tutta la larghezza della sidebar nella sua parte esterna quindi per quello che riguarda i vari account va configurata una larghezza coerente con quella che è il vostro layout.
4. Si può selezionare una famiglia di font diversa da Georgia
5. È possibile settare l'altezza (height) che avranno i vari widget quando ci si passa sopra con il mouse per non avere avatar tagliati a metà o mancanti
6. Sono stati settati 12 avatar per Facebook e 12 avatar per Twitter. Nel caso aveste una sidebar di dimensioni diverse potrete modificare questo parametro per evitare degli spazi vuoti.
7. I codici dei colori possono essere cambiati soprattutto quelli che riguardano il background dei tre social network e che comunque ho scelto in tono con quelli che sono i colori ufficiali.
8. Per quello che riguarda Facebook può essere scelta l'opzione dark al posto di light così come per la visualizzazione del FanBox di Twitter quando si abbia un sito con sfondo scuro.