Pubblicato il 15/03/12e aggiornato il

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

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.

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

finestra-modale-like-box

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: &quot;#000000&quot;,
overlayOpacity: &quot;0.8&quot;,
});
</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'/>

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='&quot;loading&quot; + 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 = &quot;//connect.facebook.net/it_IT/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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

configurazione-like-box-facebook

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.

codice-iframe-like-box-facebook

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>

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='&quot;loading&quot; + 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='&quot;loading&quot; + 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.




41 commenti :

  1. E' fastidiosissima questa finestra. Allontana i visitatori dal sito.

    RispondiElimina
  2. secondo me dipende da quanto tempo resta sullo schermo!

    RispondiElimina
  3. ma quindi devo incollare anche il primo codice della sezione

    "installare shadowbox in blogger"

    ?

    RispondiElimina
  4. ce l'ho fatta...ma non si chiude da solo...

    RispondiElimina
    Risposte
    1. Metti un tempo inferiore a 20000, prova con 10000 @

      Elimina
    2. avevo 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

      Elimina
    3. ho capito adesso come funziona il timing...fatto..risolto...per indicare 4 secondi devo inserire 14000 e non 4000

      Elimina
  5. Ci vorrebbe un controllo con un cookie

    RispondiElimina
  6. Funziona bene, ma non si chiude da solo. Ho provato a mettere tempi inferiori ma resta aperto. Qualche idea?

    RispondiElimina
    Risposte
    1. @GiancarloChieco
      Nella demo funziona bene, forse è un problema del tuo template.

      Elimina
    2. @GiancarloChieco
      Leggi anche i commenti 4.a, 4.b e 4.c

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

      Elimina
  7. Non funziona più. Neanche la demo. È solo un problema mio, oppure c'è qualcosa da rivedere?

    RispondiElimina
  8. No. Il problema e in Google Code. Non riesco a entrare e alcuni file non funzionano. Non so perché, ho chiesto al supporto.

    RispondiElimina
  9. Se non si risolve presto cercherò di rimediare in qualche modo.

    RispondiElimina
  10. Ti 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.

    RispondiElimina
  11. ah ecco, credevo che fosse solo un mio problema

    RispondiElimina
    Risposte
    1. @DomenicoSergioAntonacci
      Adesso con il nuovo hosting funziona nuovamente.

      Elimina
    2. allora c'è qualcosa che non va nel mio blog, eccheppalleee...ho ricontrollato tutto il codice ed è tutto ok...

      Elimina
  12. Buonasera,

    mi 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

    RispondiElimina
    Risposte
    1. @DomenicoIodice
      Non 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.

      Elimina
    2. Buongiorno,

      la 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

      Elimina
  13. Finalmente la guida perfetta !!!
    Comunque 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ì.

    RispondiElimina
  14. @Andrea___
    Si possono fare un sacco di cose, il punto è avere il tempo di farle :)

    RispondiElimina
    Risposte
    1. ahha no aspetta mi hai frainteso, non volevo inserire un bottone.
      Volevo 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'

      Elimina
  15. è 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
    Risposte
    1. @ViViTaranto
      Credo sia una cosa al di sopra delle mie capacità quindi non mi ci provo neppure :)

      Elimina
    2. e ne faremo tranquillamente a meno! grazie come sempre

      Elimina
  16. ciao 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
    Risposte
    1. @OcramRosco
      Bisognerebbe 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.

      Elimina
  17. ciao ernesto, ho provato tutta la procedura passo passo ma ho un problema!
    nella 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

    RispondiElimina
    Risposte
    1. 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
    2. Il post è questo
      http://www.ideepercomputeredinternet.com/2012/06/come-usare-open-graph-di-facebook-in.html
      @#

      Elimina
  18. 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?

    RispondiElimina
    Risposte
    1. La Demo non funziona più per due ragioni:
      1) 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

      @#

      Elimina
    2. ok grazie proverò in questo modo e ti farò sapere :)

      Elimina
    3. ciao 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
  19. @# 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>
    per 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

    RispondiElimina
    Risposte
    1. 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?

      Elimina
    2. Il 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
      http://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
      @#

      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.