Pubblicato il 01/07/11e aggiornato il

Come personalizzare il Like Box (o FanBox) di Facebook.

La grande maggioranza dei siti hanno la loro brava Pagina Fan su cui interagiscono con i sottoscrittori. Facebook attraverso il suo Social Plugin ci consente di installare un riquadro in cui sono visibili il numero di fan e l'avatar di alcuni di essi mostrati in modo casuale. Ricordo che per inserire tale Fan Box si possono seguire le istruzioni di questi due articoli

  1. Come inserire il Like Box - versione vecchio codice

Vediamo come si possa in qualche modo personalizzare l'aspetto di questo widget, oltre le configurazioni che lo stesso Facebook offre di default. Occorre andare innanzitutto sulla nostra pagina fan e cliccare su Modifica pagina in alto a destra. Si aprirà un link con un indirizzo simile a questo

https://www.facebook.com/pages/edit/?id=XYZXYZXYZXYZ

dove la parte finale rappresenta l'ID della nostra pagina fan. Adesso scaricate questo file ZIP e scompattatelo con Zip Genius o 7-Zip. Si tratta dello stile del nostro riquadro dei fan. Si può personalizzare a piacere usando un editor quale Notepad++, si possono lasciare solo le parti che ci interessano e cancellare le altre. Per una trattazione completa, quasi riga per riga di questo CSS, vi rimando a DaddyDesign, autore del widget. Ho anche pubblicato il codice per dare una sua visione di insieme

in cui ho anche inserito dei commenti sul significato di alcuni parametri. Il file modificato va caricato su DropBox o Google Sites con la modalità Schedario. Se volete usare la configurazione creata dall'autore del gadget potete tralasciare questo passaggio. Andate su Design > Aggiungi un gadget > HTML/Javascript e incollate questo codice in Sezioni del sito

<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
<fb:fan profile_id="XYZXYZXYZXYZ" stream="0" connections="6" logobar="0" width="200" css="https://sites.google.com/site/scriptperilblog/widget-1/stile-likebox.css"></fb:fan>

dove al posto di XYZXYZXYZXYZ va inserito l'ID della Pagina Fan. Le altre personalizzazioni riguardano il numero degli avatar da visualizzare e la larghezza del widget da calibrare in funzione di quella della sidebar. L'URL colorato di viola è il file CSS così come proposto da DaddyDesign (o quasi). Se volete cambiare qualcosa, sostituite questo URL con quello del vostro CSS caricato su uno dei servizi menzionati sopra. L'aspetto del LikeBox sarà simile a questo

mi piace fan box facebook  con il Mi Piace nella parte bassa del riquadro. Ho anche postato una

Nel caso in cui si sia seguita la procedura per inserire i Social Plugin di Facebook in modo asincrono sarà sufficiente inserire questo codice

<fb:fan profile_id="XYZXYZXYZXYZ " stream="0" connections="6" logobar="0" width="200" css="https://sites.google.com/site/scriptperilblog/widget-1/stile-likebox.css"></fb:fan>

da personalizzare con le stesse modalità del precedente.

 





17 commenti :

  1. Ciao Ernesto, sono un blogger alle primissime armi e spero che il mio commento sia in tema con il tuo post. Inutile dirti che il mio piccolissimo blog è frutto quasi esclusivamente degli articoli che leggo sul tuo sito. La domanda che volevo farti è questa: sul mio blog ho inserito il plug-in 'Mi piace' di Facebook sulla home page (e non in ogni singolo post). Fino ad esso "ben" 8 utenti hanno cliccato il pulsante (lo so, un numero ridicolo, ma ogni volta che il contatore aumenta è un piccolo tuffo al cuore...). E' possibile creare sulla sidebar di destra del blog un riquadro dove vengano "conservati" e mostrati gli avatar di chi ha cliccato il pulsante Mi piace ? magari anche con il link al proprio profilo Facebook ? Ti premetto che io non ho una pagina fan (ovviamente) del blog e nemmeno un profilo su Facebook, ma è possibile fare in modo che chi ce l'ha, dopo aver premuto il pulsante Mi piace, si "ritrovi" in un box sulla sidebar del blog ? Forse il LikeBox di cui parli in quest'articolo è proprio quello che cerco ma, perdonami, non ne sono affatto sicuro !
    ciao e grazie
    Giovanni

    RispondiElimina
  2. @Giovanni
    Un blogger senza Profilo e Pagina Fan su Facebook è come un ciclista senza la bicicletta :D
    Non credo esista un metodo per fare quello che dici tu. Siamo tutti dipendenti dai plugin di Facebook e quelli sono. Il LikeBox è quello che consente di vedere gli avatar di chi ha cliccato su Mi Piace ma presuppone una pagina fan.

    RispondiElimina
  3. Hai ragione, prima o poi dovrò vincere il mio scetticismo e saltare in sella a Facebook :D
    grazie per la risposta
    ciao e buon lavoro

    RispondiElimina
  4. come posso fare per inserire “trovaci su Facebook” e “mi piace” in italiano, anzichè in inglese? Grazie! Scusa la banalità della domanda, ma sono una principiante!

    RispondiElimina
  5. @Bontà Pugliese
    Non lo so che codice hai usato ma si può sempre sostituire lo script inglese con quello italiano. Basta modificare en_US con it_IT.
    Puoi per esempio seguire le istruzioni di questo post
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html

    RispondiElimina
  6. Ciao Ernesto e complimenti per l'ottima guida...

    Ho seguito tutto alla lettera però al momento di caricare il file .css, quello tuo me lo carica, quello mio, che ho messo su google sites che da url funziona, non mi prende il css. In cosa posso sbagliare? Ciao e grazi 1000 per la tua disponibilità !!

    RispondiElimina
    Risposte
    1. @web75
      Non ti saprei dire. Google Sites accetta i file CSS. Magari non funzionano se si ha un dominio personalizzato e allora bisogna ripiegare su DropBox.

      Elimina
    2. Grazie Ernesto.
      Ho cambiato url, mettendo il file css nel mio server.
      Con indirizzo http://.... nulla , con url protetto https:// .... và ....
      Grazie comunque !!!!

      Elimina
    3. @Web75
      Guarda che gli URL del tipo https funzionano ugualmente come depositi di file

      Elimina
  7. Ciao Ernesto, ma il file .css si è costretti a caricarlo su DropBox / Google Sites o lo si può caricare anche sul proprio spazio web?

    http://www.dimensioneacque.com/theme/cec/css/stile-likebox.css
    come si può vedere ho provato a caricarlo sul mio spazio, e da codice uso questa stringa, ma nulla, non viene preso!

    Motivo ??
    Ho a disposizione solo l'http:// non credo sia un problema o sbaglio ?

    RispondiElimina
  8. @marcussen
    Si può caricare anche su un proprio spazio. Incolla l'indirizzo nel browser, se coalizzarsi il file,deve funzionare.

    RispondiElimina
    Risposte
    1. * visualizzi il file
      Accidenti a queste applicazioni per cellulari che cambiano le parole!!!

      Elimina
    2. bè allora siamo sull'assurdo guarda un pò.. :(

      Codice incollato nel html:


      risultato:
      http://www.dimensioneacque.com/pages/swpool1

      Elimina
  9. @marcussen
    Guarda che io ho aperto il link
    http://www.dimensioneacque.com/theme/cec/css/stile-likebox.css
    e non ho trovato la pagina. Prova a caricare il file su un'altra cartella e non su quella del tema di Wordpress. Certamente avrai una cartella upload, prova con quella

    RispondiElimina
  10. Ciao scusa ti volevo chiederti, ho visto questo sito: http://www.gratisdalweb.com/ ed ha un fan box davvero bella, vorrei mettere la stessa ma non capisco le personalizzazioni che ha apportato, ho provato ad usare firebug ma nnt, sai per caso come estrapolare il codice per mettere la stessa fan box?

    RispondiElimina
    Risposte
    1. @Manager
      Nel sito che hai incollato la Fan Box (o Like Box) è esattamente identica alla mia. E' il classico codice di Facebook. Solo che quel modello ha i widget raccolti all'interno di quadrati.

      Elimina
  11. che strano, a me sembrava tutto un widget, grz molte.

    RispondiElimina

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.