Mostrare il popup del Like Box di Facebook su Blogger.

Se navigate su internet in blog ma anche in altri siti avrete certamente notato come ci siano delle pagine che mostrano automaticamente il popup del Like Box di Facebook con il pulsante per la sua sottoscrizione. Una cosa da evitare quando si installano questi widget è quella di farli diventare troppo invasivi. Visualizzare un popup tutte le volte che si apre una pagina di un sito è certamente da evitare. È quindi opportuno utilizzare i cookie per attivare la visione del popup solo a chi non sia mai arrivato sul sito o a chi non abbia aperto una sua pagina da almeno un certo numero di giorni.

Ho già presentato una finestra modale con il Like Box di Facebook e con questo post riprendo il codice già utilizzato in precedenza per apportare alcune modifiche di stile. Sarà poi l'amministratore del sito a scegliere l'opzione che ritiene più interessante per il suo layout. Una particolarità di questa finestra modale è quella di utilizzare solo il CSS senza immagini di sfondo.

Like Box di Facebook che si apre in una finestra popup.

Il Social Plugin definito Like Box o Fan Box è una versione speciale del bottone Mi Piace ed è rivolto alle Pagine di Facebook denominate anche Pagine Fan. Con questo plugin si può installare un widget che mostri gli avatar di alcuni degli utenti che abbiano cliccato sul Mi Piace della rispettiva pagina.

In articoli precedenti ho presentato dei gadget in grado di mostrare il Like Box in una finestra popup ai lettori. Tali widget però avevano il difetto di dipendere da delle risorse esterne e quindi hanno smesso di funzionare quando queste risorse sono venute meno. Adesso vado invece a illustrare un metodo per mostrare ai nuovi visitatori il Like Box della nostra pagina Facebook in una finestra popup con il pulsante Mi Piace per seguirla e anche con l'icona per chiuderla. Il popup si visualizzerà con un effetto simil Lightbox dovuto a uno sfondo scuro creato con una immagine apposita. Un'altra particolarità di questo widget è che la finestra popup si mostrerà nella prima pagina del blog che si apre e poi non si visualizzerà più per un certo numero di giorni per risultare troppo invasivi con i navigatori.

Come installare il Like Box di Facebook in Blogger e in Wordpress.

In realtà il titolo dell'articolo è un po' limitativo perché il codice che andrò a presentare potrà essere incollato in Modalità HTML in qualsiasi pagina web e mostrerà un riquadro con gli avatar dei sottoscrittori di una determinata pagina fan di Facebook.

Ho utilizzato lo script con cui Facebook ci permette di pubblicare i post pubblici in un qualsiasi sito che ho già impiegato anche per una versione semplificata del bottone Mi Piace con contatore da mettere in una sidebar del blog. Per avere una anteprima del nostro Fan Box si può accedere al Like Box Social Plugin e incollare l'URL della nostra pagina fan. Ricordo che per avere una pagina ufficiale di Facebook occorre avere un account come Profilo, accedere a Create Page e seguire il wizard di istruzioni. Si può personalizzare l'URL della pagina scegliendo un apposito VanityURL, inserendo quello prescelto nel campo presente nella pagina degli Username.

Come mostrare il Like Box di Facebook nei siti a Visualizzazione Dinamica di Blogger .

Dopo aver illustrato come visualizzare il widget per la sottoscrizione del canale Youtube anche nei modelli di Blogger cosiddetti Dynamic Views, vediamo come sia possibile mediante un procedimento simile installare anche il Like Box di Facebook vale a dire l'invito a sottoscrivere la nostra pagina fan con visibili gli avatar delle persone che lo hanno già fatto.

Si usa il meccanismo già illustrato nel post su come inserire tutti i plugin di Facebook per i metadati Open Graph, il codice per iFrame ricavato da Facebook Developers e il widget Testo. Riepilogo brevemente come procedere con Facebook. Si va su Facebook Developers e si clicca su Crea Applicazione. Si digita il Titolo e si supera il controllo visivo di una captcha

Installare nel blog una finestra popup per diventare fan su Facebook che si apre e si chiude automaticamente.

Ho ricevuto molte richieste di presentare un widget che mostrasse in automatico un avviso con il pulsante per diventare fan della pagina Facebook prima di poter navigare sul sito. Premetto che trovo questo sistema per aumentare i sottoscrittore della nostra pagina un po' troppo invasivo ma la mia è una valutazione prettamente personale e sono sicuro che in molti la penseranno diversamente. Avevo già illustrato come aprire una finestra modale con il Like Box di Facebook mediante l'Effetto Shadowbox che può essere considerata una alternativa a questa nuova personalizzazione.

La finestra modale che si viene ad aprire con questo sistema potrà essere chiusa dal lettore che alternativamente può aspettare il numero di secondi che è stato settato per la sua chiusura automatica. Il widget è stato creato da Kakyheboh e si può configurare inserendo il nome della pagina fan o anche quello del Profilo di Facebook. Gli altri parametri da settare sono il Titolo, il tempo di attesa per la scomparsa della pagina popup, i minuti di attesa prima che compaia nuovamente (molto utile perché non appaia a ogni apertura di pagina), la presenza o meno del pulsante di chiusura, la lingua (oltre all'inglese c'è anche l'italiano) e lo stile della finestra

Come mostrare il Like Box di Facebook in una finestra modale con Effetto Shadowbox.

Aggiornamento: Il Like Box di Facebook è stato ritirato e su Blogger è stato introdotto il Lightbox nativo. Un widget simile a quello presentato in questo post può essere installato seguendo le istruzioni su come mostrare una Finestra Popup del Page Plugin di Facebook.

Dopo aver pubblicato l'articolo su come mostrare una finestra popup di benvenuto che sfruttava l'Effetto Shadowbox ho ricevuto numerosi commenti sulla possibilità di mostrare in questa finestra il Like Box di Facebook. Sauro, un lettore di questo blog, aveva postato un commento per spiegare come aveva risolto la questione di inserire appunto il widget della pagina fan nella finestra modale.

Alcuni commenti successivi mi hanno fatto ritenere che fosse necessario tornare sull'argomento perché mi pare che ci siano molti frequentatori di questo blog interessati al tema. Quindi vediamo come fare per visualizzare una finestra popup se si apre la homepage di un blog su Blogger, che sparisca automaticamente dopo un certo numero di secondi ma che si può comunque sempre chiudere cliccando sull'icona della crocetta. Quello che il lettore visualizzerà, invece del classico benvenuto, sarà un invito a iscriversi alla Pagina Fan di Facebook insieme agli avatar di quelli già iscritti

Like Box di Facebook, post di Twitter e widget di Google Friend Connect inseriti in Blogger con effetto slide.

Avevo già presentato un modo molto originale per mostrare la FanBox di Facebook visualizzata in modo scorrevole. Per vedere gli avatar di chi aveva cliccato su Mi Piace bisognava passare con il mouse sopra alla linguetta posizionata sulla destra. Utilizzando la stessa procedura, si possono rendere scorrevoli e visibili solo a comando anche il widget di Google Friend Connect e quello dello stream di Twitter che mostra gli ultimi aggiornamenti di stato che abbiamo postato.

Come è mia abitudine testo i widget che presento in questo blog e ho pubblicato sul web una

• Demo di GFC, FanBox e Twitter scorrevoli -

Inserire il Like Box di Facebook in modo scorrevole su Blogger.

Si può dire che quasi tutti i blog hanno una loro pagina fan su Facebook e che in quasi tutti i siti che hanno una FanPage è presente anche il widget del Like Box (o FanBox) per mostrare il numero dei sottoscrittori e gli avatar di alcuni di loro. Vediamo come rendere questo gadget più originale. Si tratta di fare in modo che rimanga sempre nella stessa posizione del layout allo scorrere  della pagina e di mostrare solo una linguetta in modo da poterlo aprire passandoci sopra con il mouse. Ho pubblicato sul web una

• Demo del FanBox di Facebook scorrevole -

Se andate sulla destra e passate il mouse sopra alla linguetta si aprirà il LikeBox

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
2. Come inserire i plugin in modo asincrono -

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

Il Mi Piace di Facebook inserito in un box insieme al collegamento per la pagina fan.

Questa personalizzazione del plugin Mi Piace di Facebook è veramente carina e sono sicuro incontrerà il favore di molti lettori. Si tratta in sostanza di inserire l'iFrame di Facebook all'interno di un box con gli stessi colori del social network e insieme a un collegamento e un invito ai navigatori per sottoscrivere la nostra pagina fan. E' quindi superfluo aggiungere che per poterlo installare occorre avere una pagina ufficiale del blog su Facebook 

Si può personalizzare riguardo alle dimensioni in larghezza e a quelle in altezza con la possibile scelta tra mostrare gli avatar o non mostrargli. Ricordo comunque che si possono vedere solo le immagini di chi ti è amico su Facebook e ha cliccato su Mi Piace. Nel caso in cui si scelga di mostrare anche le foto, per i navigatori, esiste anche la possibilità di condividere il post inserendo anche un commento personale.

Come installare il Like Box di Facebook nei blog con sfondo scuro per visualizzarne meglio il testo.

Se avete un blog con sfondo scuro avete certamente trovato difficoltà nella visualizzazione del bottone Mi Piace nel vostro blog situato in qualsiasi piattaforma. Per fortuna è stato lo stesso Facebook che ha inserito una opzione nella generazione del codice per ovviare all'inconveniente. A coloro che non sanno di cosa parlo consiglio di leggersi gli articoli

• Come inserire il pulsante Mi Piace nei blog su Blogger -
• Come visualizzare il bottone Mi Piace nei blog con sfondo scuro -

Il trucco, se così si può chiamare, è quello di sostituire il codice colorscheme=light con colorscheme=dark e il testo sarà così visualizzato in un colore chiaro con molto più contrasto. Ecco un esempio

Come potete vedere il testo è di colore bianco. Dopo la pubblicazione di quell'articolo mi fu chiesto se fosse possibile fare una cosa analoga anche per il Like Box, ovvero per il riquadro di coloro che hanno cliccato sul Mi Piace della pagina fan del nostro blog. Adesso sono finalmente in grado di indicare come risolvere anche questo problema estetico.

Come inserire i plugin di Facebook senza diminuire la velocità di caricamento della pagina.

Avevo già parlato di come inserire i plugin di facebook in modo asincrono per fare in modo di caricarli indipendentemente dagli altri elementi della pagina. Non ero però ancora riuscito a trovare lo script che permetteva di farlo usando la localizzazione in italiano.

Adesso ho trovato la strada per poterlo fare. Ricordo brevemente in cosa consiste questo metodo di inserimento. Facebook mette a disposizione degli sviluppatori l'SDK Javascript in modo da creare applicazioni personalizzate e caricarle in modo asincrono per non bloccare la visualizzazione degli altri elementi della pagina e aumentarne la velocità di caricamento.

 

METODO ANALITICO

Per fare le cose per bene bisognerebbe creare un'applicazione ad hoc per ogni sito in cui si vogliono inserire i plugin con questo sistema. Vediamo brevemente come fare e poi illustrerò invece un metodo più semplice per i meno esperti.

Aprite Firefox perché con gli altri browser ci sono delle difficoltà. Andate nella pagina di registrazione dell'applicazione e inserite il nome del vostro sito e il relativo URL, quindi cliccate su Create an Application 

Metodo per inserire i plugin di Facebook in modo asincrono per aumentare la velocità di caricamento del blog.

Questo articolo è un completamento dei post che ho dedicato all'argomento e vuole presentare un metodo alternativo per inserire alcuni plugin di Facebook nel nostro blog. Ricordo alcuni post che ho scritto su questo tema

1. Come inserire il Like Box della pagina fan -
2. Come installare il widget degli Articoli Consigliati -
3. Come installare Activity Feed, il gadget delle Attività Recenti su Facebook -

In tutti e tre questi articoli ho precisato che si poteva installare l'iFrame copiando la prima parte del codice oppure poteva essere copiata la seconda parte del codice a patto di modificare il modello.
Questa seconda opzione può risultare interessante per una maggiore velocità di caricamento del widget e, nel caso se ne inserisca più di uno, per una maggiore semplicità. Il procedimento di installazione si basa sui Tag XFBML che è uno strumento di Facebook messo a disposizione degli sviluppatori.

Come inserire il Like Box di Facebook su Blogger.

Su Facebook, dopo aver introdotto i plugin per gli sviluppatori, alcune procedure di inserimento dei widget sono mutate. Oltre al nuovissimo iFrame "Mi Piace", la novità più importante riguarda le pagine fan. Ricordo alcuni post che ho dedicato all'argomento e che sono da aggiornare in alcuni punti

   Come creare un gruppo o una pagina fan -

   Come creare le pagine sociali su Facebook -

   Promuovere il blog con Networkedblogs -

   Come importare i feed del blog nella pagina fan -

   Come importare i commenti del blog nella pagina fan con Twitterfeed -

Adesso non è più possibile inserire il badge accedendo alla nostra pagina fan e cliccando su "Aggiungi riquadro dei fan al tuo sito" in quanto il link non è più presente. 

E' stato infatti creato un nuovo widget, denominato Like Box, che è sostanzialmente identico al precedente ma che ha una diversa procedura di installazione.