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
- 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
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.
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 !
RispondiEliminaciao e grazie
Giovanni
@Giovanni
RispondiEliminaUn 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.
Hai ragione, prima o poi dovrò vincere il mio scetticismo e saltare in sella a Facebook :D
RispondiEliminagrazie per la risposta
ciao e buon lavoro
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@Bontà Pugliese
RispondiEliminaNon 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
Ciao Ernesto e complimenti per l'ottima guida...
RispondiEliminaHo 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à !!
@web75
EliminaNon ti saprei dire. Google Sites accetta i file CSS. Magari non funzionano se si ha un dominio personalizzato e allora bisogna ripiegare su DropBox.
Grazie Ernesto.
EliminaHo cambiato url, mettendo il file css nel mio server.
Con indirizzo http://.... nulla , con url protetto https:// .... và ....
Grazie comunque !!!!
@Web75
EliminaGuarda che gli URL del tipo https funzionano ugualmente come depositi di file
Ciao Ernesto, ma il file .css si è costretti a caricarlo su DropBox / Google Sites o lo si può caricare anche sul proprio spazio web?
RispondiEliminahttp://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 ?
@marcussen
RispondiEliminaSi può caricare anche su un proprio spazio. Incolla l'indirizzo nel browser, se coalizzarsi il file,deve funzionare.
* visualizzi il file
EliminaAccidenti a queste applicazioni per cellulari che cambiano le parole!!!
bè allora siamo sull'assurdo guarda un pò.. :(
EliminaCodice incollato nel html:
risultato:
http://www.dimensioneacque.com/pages/swpool1
@marcussen
RispondiEliminaGuarda 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
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@Manager
EliminaNel 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.
che strano, a me sembrava tutto un widget, grz molte.
RispondiElimina