Pubblicato il 22/06/14e aggiornato il

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


slide-widget-facebook-googleplus-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.

demo-widget

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




8 commenti :

  1. ciao ernesto, come sempre complimenti per l'articolo; ho avuto un problema con il like box di twitter, ho impostato sulla pagina del fan box tutte le opzioni e copiato il codice, nessun problema; poi all'improvviso dopo un paio di giorni il box di twitter risulta vuoto, senza gli avatar; ho provato a rifare il processo ma non succede niente, mi dà una schermata bianca all'interno del box, non visualizza gli avatar ma mi dà solo la scritta "SEGUI" ed il link alla pagina del fan box in basso; potresti aiutarmi a capire cosa è successo? grazie mille e ancora complimenti :)

    RispondiElimina
    Risposte
    1. Il codice di Twitter dipende da un certo Mathias che ha l'accesso alle API di Twitter e che in cambio ha messo il link al suo account. Forse sta avendo problemi con il server in cui ha caricato il codice. Non ci si può fare nulla se non aspettare che tutto torni a posto (se tornerà...).
      @#

      Elimina
    2. Anche la Demo non funziona. Purtroppo la nuova politica di Twitter è questa :(
      @#

      Elimina
  2. ora mi esce scritto "TEMPO ESAURITO PER L'OPERAZIONE"; questa scritta l'ho vista anche nella presentazione di un widget simile nel tuo blog di prova proprio nel like box di twitter

    RispondiElimina
  3. ciao ernesto, ho notato che il like box di twitter non aggiorna il numero di followers; c'è un modo per correggere questa disfunzione? grazie :)

    RispondiElimina
    Risposte
    1. Non posso che ripetere quanto ti ho già detto nei commenti precedenti. Lo script dipende da un certo MathiaS e quindi non ti so dire se abbia dei problemi con il suo server
      @#

      Elimina
  4. ok grazie :) chiedevo perchè nella tua demo di prova funziona, ma nel mio blog si è bloccato ;)

    RispondiElimina
    Risposte
    1. Purtroppo bisognerebbe clonare questo codice
      view-source:http://www.twitter-fanbox.com/twitter.html
      per affrancarsi da MatihaS ma non mi va di copiare altre persone. Se va la mia demo dovrebbe andare anche il tuo widget
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.