Effetto Shadowbox che apre una finestra modale con il Like Box di Facebook.
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.
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
posto sotto al FanBox con in basso a destra l'icona per chiudere tale finestra modale e il pulsante del Mi Piace perfettamente funzionante. Vediamo tutti i passaggi necessari per inserire tale finestra
Se non cliccherete sulla icona di chiusura, la finestra popup si visualizzerà per 20 secondi.
INSTALLARE SHADOWBOX IN BLOGGER
Potete seguire le istruzioni per Shadowbox e su come utilizzarlo per creare gallerie di foto, di video o altri effetti speciali. In questo caso è meglio disabilitare il Lightbox nativo di Blogger che invece si può lasciare attivato nel caso utilizzassimo Shadowbox solo per questa finestra del Fan Box. Ricordo di salvare sempre il template prima di qualsiasi modifica. Per quello che riguarda questo hack basta incollare il codice seguente subito sopra la riga </head> in Modello > Modifica HTML > Procedi
<!-- EFFETTO SHADOWBOX INIZIO -->
<link href='https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js' type='text/javascript'/> <script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000000",
overlayOpacity: "0.8",
});
</script>
<noscript><a href='http://goo.gl/q56FZ' target='_blank'><span style='font-size: x-small;'>Shadowbox Effect</span></a></noscript>
<!-- EFFETTO SHADOWBOX FINE - http://www.ideepercomputeredinternet.com -->
<link href='https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js' type='text/javascript'/> <script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000000",
overlayOpacity: "0.8",
});
</script>
<noscript><a href='http://goo.gl/q56FZ' target='_blank'><span style='font-size: x-small;'>Shadowbox Effect</span></a></noscript>
<!-- EFFETTO SHADOWBOX FINE - http://www.ideepercomputeredinternet.com -->
Nel caso abbiate un modello con dominio personalizzato e l'effetto non funzionasse, scaricate il file CSS colorato di rosso, caricatelo su DropBox e sostituitene l'URL nel precedente codice. I due valori colorati di viola rappresentano il colore dello sfondo (nero in questo caso 000000) e il livello di opacità. Per dare un'idea di questo parametro diciamo che con una opacità 0.8 lo sfondo del blog sarà più visibile che con una opacità 0.9 e meno visibile che con 0.7. Si salva in modello.
INSTALLARE LO SCRIPT E L'APPLICAZIONE DI FACEBOOK
Per inserire questo effetto occorre usare il codice dell'iFrame tra tutti quelli offerti da Facebook quindi è necessario creare una applicazione del blog e installare il javascript di Facebook come illustrato nel post
Occorrerà cioè incollare queste due righe
<meta content='ID UTENTE' property='fb:admins'/>
<meta content='ID APPLICAZIONE' property='fb:app_id'/>
<meta content='ID APPLICAZIONE' property='fb:app_id'/>
prima di </head> dove gli ID sono relativi alla applicazione che è stata creata. Subito dopo il tag <body>, se abbiano un vecchio modello, o dopo la riga
<body expr:class='"loading" + data:blog.mobileClass'>
se abbiamo un template del Designer Modelli, si incolla quest'altro codice
<!-- Facebook Open Graph -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebook Open Graph -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebook Open Graph -->
Si termina salvando il modello. Se avete già provveduto a installare i vari plugin di Facebook mediante questa modalità saltate questa sezione del tutorial.
ACQUISIRE IL CODICE DEL LIKE BOX DI FACEBOOK
Si accede alla pagina del Facebook Like Box Social Plugin e, nella prima riga del wizard incolliamo l'URL della nostra pagina fan. Togliamo la spunta a Show Stream e lasciamola a Show Faces. Come larghezza (width) si può scegliere il valore indicativo di 462. Si clicca sulla pagina per visualizzare l'anteprima del Fan Box quindi su Get Code
Nella finestra successiva sono presenti tre opzioni per l'acquisizione del codice: HTML5, XFBML e IFRAME. Selezionate la scheda relativa a IFRAME e, nel menù a tendina, scegliete l'applicazione di Facebook che avete associato al vostro sito web di cui alla sezione precedente.
Si seleziona, si copia in codice e si salva in un file di testo. Tale codice avrà al suo interno tutti i parametri che abbiamo configurato, inizierà con il tag <iframe src= …. e terminerà con </iframe>
INSTALLARE LA FINESTRA MODALE DEL LIKE BOX CON EFFETTO SHADOWBOX
Si va su Modello > Modifica HTML > Procedi e si cerca il tag </head>. Subito sopra si incolla il codice
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "it",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: '<iframe src="... </iframe><br/><center><h3><font color="#f2a136">Se ti piace questo blog diventa fan su Facebook</font> </h3></center>',
height: 314, // Altezza della finestra
width: 468 // Larghezza della finestra
});
}
setTimeout('Shadowbox.close()', 20000); // Durata del tempo di apertura
// ]]>
</script>
</b:if>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "it",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: '<iframe src="... </iframe><br/><center><h3><font color="#f2a136">Se ti piace questo blog diventa fan su Facebook</font> </h3></center>',
height: 314, // Altezza della finestra
width: 468 // Larghezza della finestra
});
}
setTimeout('Shadowbox.close()', 20000); // Durata del tempo di apertura
// ]]>
</script>
</b:if>
dove nella riga che inizia con content: al posto della espressione colorata di viola si incolla il codice dell'iFame acquisito da Facebook. Gli altri parametri riguardano le dimensioni della finestra modale che devono essere leggermente superiori a quelle del Like Box. Per l'altezza bisogna considerare che è stata introdotta anche un'altra riga "Se ti piace questo blog diventa fan su Facebook" che può essere personalizzata a piacere e di cui si può scegliere il colore più appropriato (f2a136 di default). L'ultimo parametro da configurare e forse il più importante è la durata del tempo di apertura della finestra modale. Di default sono stati scelti 20000 millisecondi equivalenti a 20 secondi.
All'interno di content: ' … ', possiamo inserire anche altro codice HTML se vogliamo personalizzare ulteriormente la finestra popup. Dobbiamo però ricordarci di non mettere il simbolo della virgoletta singola ma solo quello delle doppie virgolette perché in quel caso non funzionerebbe.
Adesso cerchiamo il tag
<body>
nel caso avessimo un vecchio modello, oppure quest'altra riga
<body expr:class='"loading" + data:blog.mobileClass'>
se abbiamo invece un template del Designer Modelli. Nel primo caso il tag va sostituito con
<body onload='AlertMessage();'>
mentre nel secondo caso al posto della riga si mette la seguente
<body expr:class='"loading" + data:blog.mobileClass' onload='AlertMessage();'>
Finalmente si salva il modello. Come vedete è stato inserito un tag condizionale in modo da aprire la finestra popup solo in Homepage. Nel caso voleste inserirlo in una qualsiasi altra pagina è sufficiente modificare la prima riga del codice imponendo una diversa condizione.
Questo effetto funziona con tutti i browser più importanti (Firefox, Chrome, Safari e Opera) e anche con Internet Explorer 9 mentre non ho avuto modo di testare IE8.
E' fastidiosissima questa finestra. Allontana i visitatori dal sito.
RispondiEliminasecondo me dipende da quanto tempo resta sullo schermo!
RispondiEliminama quindi devo incollare anche il primo codice della sezione
RispondiElimina"installare shadowbox in blogger"
?
@Domenico ...
EliminaE certo che sì.
ce l'ho fatta...ma non si chiude da solo...
RispondiEliminaMetti un tempo inferiore a 20000, prova con 10000 @
Eliminaavevo messo 3000 a dire il vero...e non andava...con 5000 nemmeno...con 9000 neanche..con 10000 si..quindi direi che non si può andare sotto i 10000
Eliminaho capito adesso come funziona il timing...fatto..risolto...per indicare 4 secondi devo inserire 14000 e non 4000
EliminaCi vorrebbe un controllo con un cookie
RispondiEliminaFunziona bene, ma non si chiude da solo. Ho provato a mettere tempi inferiori ma resta aperto. Qualche idea?
RispondiElimina@GiancarloChieco
EliminaNella demo funziona bene, forse è un problema del tuo template.
@GiancarloChieco
EliminaLeggi anche i commenti 4.a, 4.b e 4.c
Si, avevo visto che la demo funziona e ho già provato a variare la durata come suggerito, senza alcun risultato. Ci sarà un ignoto conflitto con qualcosa. Ti ringrazio.
EliminaNon funziona più. Neanche la demo. È solo un problema mio, oppure c'è qualcosa da rivedere?
RispondiEliminaNo. Il problema e in Google Code. Non riesco a entrare e alcuni file non funzionano. Non so perché, ho chiesto al supporto.
RispondiEliminaSe non si risolve presto cercherò di rimediare in qualche modo.
RispondiEliminaTi ringrazio molto. Dato che sono un grande fruitore dei tuoi widget, con l'occasione ti informo che anche il tasto per ritornare ad inizio pagina e la label cloud animata non funzionano.
RispondiEliminaah ecco, credevo che fosse solo un mio problema
RispondiElimina@DomenicoSergioAntonacci
EliminaAdesso con il nuovo hosting funziona nuovamente.
allora c'è qualcosa che non va nel mio blog, eccheppalleee...ho ricontrollato tutto il codice ed è tutto ok...
EliminaBuonasera,
RispondiEliminami perdoni, ma questo " Like Box ", può esser installato pur da chi non è iscritto a Facebook???!!! Visto che posseggo nel mio blog " 68 Mi piace " di Facebook.
Copioso il grazie
@DomenicoIodice
EliminaNon essendo iscritto a Facebook non puoi avere neppure una pagina fan e quindi non hai nessuno che vi si è iscritto. Il Like Box serve per mostrare gli iscritti alla pagina fan e quindi è imprescindibile possederne una.
Buongiorno,
Eliminala ringrazio per la Sua celere risposta.
Una nota di merito per il lavoro che svolge, cotanto prezioso per chi possiede d'un blog.
Deferente l'or saluto
Finalmente la guida perfetta !!!
RispondiEliminaComunque sia se volessi togliere il popup senza togliere tutto quel codice come potrei fare? C'è tipo un interruttore ON/OFF veloce?
Inoltre aggiungo che se si clicca sulla parte esterna del blog il popup scompare senza cliccare sulla X. Meglio così.
@Andrea___
RispondiEliminaSi possono fare un sacco di cose, il punto è avere il tempo di farle :)
ahha no aspetta mi hai frainteso, non volevo inserire un bottone.
EliminaVolevo dire che se volessi togliere il popup, perché al momento non mi serve (però allo stesso tempo non vorrei togliere tutti quei codici per utilizzarlo in futuro), come dovrei fare?
devo reincollare questo senza la scritta Alarm oppure mi creerà problemi x l'indicizzazione perché ho lasciato così un codice inutilizzato?
body expr:class='"loading" + data:blog.mobileClass'
è utilissima, ma la finestra all'apertura del blog in effetti è un po' antipatica! è complicato renderla una finestra iconizzabile in basso come avviene per il sito del fatto quotidiano?
RispondiElimina@ViViTaranto
EliminaCredo sia una cosa al di sopra delle mie capacità quindi non mi ci provo neppure :)
e ne faremo tranquillamente a meno! grazie come sempre
Eliminaciao scusa, ho installato e funziona bene, ma ogni volta ce lo stesso utente clicca su homepage gli appare sempre la finestra si potrebbe fare che per ogni utente la finestra appare una sola volta.
RispondiElimina@OcramRosco
EliminaBisognerebbe usare i cookie. Potresti provare a unificare questo post con quest'altro
http://www.ideepercomputeredinternet.com/2012/04/creare-una-pagina-di-introduzione-al.html
però ti avverto che è un lavoro complesso.
ciao ernesto, ho provato tutta la procedura passo passo ma ho un problema!
RispondiEliminanella finestra che si apre si visualizza il seguente messaggio " The `href` parameter must reference a valid Facebook page, but "http://cercaunlavoro.blogspot.it/" is not a valid Facebook page."
sai per caso cosavuol dire?
grz
Non è stato compilato correttamente il modulo della applicazione. Prova a dare uno sguardo a questo post con particolare riguardo agli screenshot. Bisogna inserire correttamente il dominio del sito con il dominio canonico .com
Elimina@#
Il post è questo
Eliminahttp://www.ideepercomputeredinternet.com/2012/06/come-usare-open-graph-di-facebook-in.html
@#
Salve a me non è molto chiaro il procedimento..vorrei sapere prima di tutto se questo box è possibile averlo sulla pagina principale di un blog e SOLO su alcuni post che decido io..potresti dirmi come fare?
RispondiEliminaLa Demo non funziona più per due ragioni:
Elimina1) Il Lightbox è stato introdotto anche nativamente su Blogger quindi va a interferire con lo script di questo widget
2) Il plugin di Facebook Like Box è stato ritirato da qualche mese.
Ti consiglio un widget simile con il Page Plugin che ha sostituito il Like Box
http://www.ideepercomputeredinternet.com/2015/04/page-plugin-popup-facebook-finestra-modale.html
La Demo è qui
http://prova-32.blogspot.it/2015/04/page-plugin-popup-demo-per-blogger.html
Per quello che riguarda la possibilità di mostrare questo effetto solo in Home Page bisogna seguire le istruzioni di questo post
http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
specie per quello che riguarda la sezione
COME USARE I TAG CONDIZIONALI NEI WIDGET
Per mostrare il widget solo in homepage e in altri post a scelta la cosa è più complessa ma fattibile seguendo queste istruzioni dei nuovi tag condizionali
http://www.ideepercomputeredinternet.com/2015/05/tag-condizionali-if-else-elseif.html
utilizzando l'operatore logico OR
@#
ok grazie proverò in questo modo e ti farò sapere :)
Eliminaciao sono riuscito a mettere il box a comparsa su ogni pagina, poi però andando a seguire la procedura per metterlo solo quando ho un determinato TAG, non mi esce più..come mai?
Elimina@# Purtroppo non esiste un tag condizionale per mostrare un widget nei post che abbiano una data etichetta. Fermo restando che il secondo tag condizionale è sempre </b:if>
RispondiEliminaper il primo tag puoi usare questo
<b:if cond='data:blog.url == data:blog.homepageUrl'>
per mostrare il widget solo in home, oppure provare con quest'altro
<b:if cond='data:blog.url == data:blog.homepageUrl or data:blog.url == "URL_POST"'>
per mostrare il widget nella home e in un post a scelta di cui devi incollare l'URL con il .com e non con il .it
nell'articolo stanno i vari tag condizionali tra cui uno in cui dice che si può mettere solo in determinati post che hanno uno specifico TAG..perchè dici che non esiste? mi sto sbagliando io?
EliminaIl tag a cui ti riferisci purtroppo funziona solo con le etichette nel senso che si può decidere di visualizzare o non visualizzare un widget in una pagina dinamica tipo questa
Eliminahttp://www.ideepercomputeredinternet.com/search/label/blogger
Ti riferisci a questo post immagino
http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
Se ti interessa il tema puoi leggere questi altri post che trattano proprio l'argomento a cui hai accennato
http://www.ideepercomputeredinternet.com/2015/10/blogger-tag-condizionali-etichette-modello.html
http://www.ideepercomputeredinternet.com/2015/10/blogger-tag-condizionali-etichette.html
http://www.ideepercomputeredinternet.com/2015/10/blogger-icone-titolo-post.html
@#