Pubblicato il 17/01/13e aggiornato il

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

Come mostrare solo una volta ai nuovi arrivati sul blog una finestra popup con l'invito a iscriversi alla nostra pagina fan. Si possono settare i parametri della durata, del titolo e della lingua oltre a scegliere lo stile del popup.
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

pagina-fan-avviso

Ho postato anche una pagina di demo con questa finestra modale


Dopo la configurazione del gadget di Kakyheboh si va su Generate My Code e si scorre la pagina verso il basso fino a trovare il codice giusto per la nostra piattaforma


pagina-modale-facebook
Se avete un blog su Blogger selezionate il codice relativo a Blogspot e copiatelo. Andate su Modello > Modifica HTML > Procedi e cercate la riga </head>. Incollatelo subito sopra e salvate il template.

codice-copiare-.modello

Aprite il blog per controllare che la finestra modale si veda effettivamente. Nella Demo ho settato un tempo di attesa di 15 minuti per una nuova ricomparsa della finestra mentre nello screenshot avevo lasciato lo zero. Se volete rivedere prima di 15 minuti la finestra nella pagina demo, apritela in una scheda del browser con Navigazione Anonima o in Incognito.




47 commenti :

  1. Ernesto una curiosità, come si può inserire adsense all'interno dei post come nel tuo? grazie

    RispondiElimina
    Risposte
    1. Leggi la parte finale di questo post
      http://www.ideepercomputeredinternet.com/2012/10/adsense-blogger-modello.html
      R @

      Elimina
  2. Come da te consigliato, il like box funziona, ma non ha un'altezza sufficiente a visualizzare tutto ciò che contiene, compreso il pulsante di chiusura anticipata. Riesci a rimediare??

    RispondiElimina
    Risposte
    1. @ Nevio
      Si tratta del codice del sito. Mi sono accorto anche io del pulsante di chiusura. Ti confesso che non me la sento di andare a controllare il codice :) Prova a cercare tutti i valori height e prova a modificarne il valore. Però dovresti prima scaricare i due file javascript. E' un lavoro non da poco. Potresti anche scrivere un commento sul sito del widget.

      Elimina
    2. Grazie, gentilissimo, come sempre.

      Elimina
  3. Ernesto,
    sai se è possibile inserire una finestra di questo tipo coniugando i tre social Google+, Facebook e Twitter?

    RispondiElimina
    Risposte
    1. @ Giuliana
      Non so se qualcuno a livello mondiale si sia mai cimentato in questa realizzazione. Se la trovassi la riproporrei.

      Elimina
  4. Ma nemmeno utilizzando una normale finestra pop-up creata da soli inserendo delle icone e i rispettivi link?
    Una pagina di benvenuto non mi va bene perchè copre tutto il resto del blog, e le altre finestre pop-up che ho trovato si aprono ogni volta che il visitatore cambia pagina, e allora diventa troppo invasivo.
    Mi piacerebbe una finestrella che si apre solo la prima volta che il visitatore entra sul blog, (nella homepage o nelle altre pagine), e che poi rimane chiusa per il resto della navigazione. Almeno fino al giorno seguente.

    RispondiElimina
    Risposte
    1. @ Giuliana
      E' cosa complicata. Ti linko alcuni articoli che potrebbero aiutarti
      http://www.ideepercomputeredinternet.com/2011/05/come-inserire-una-finestra-popup-di.html
      http://www.ideepercomputeredinternet.com/2012/04/creare-una-pagina-di-introduzione-al.html

      Elimina
    2. Sai che mi piacciono le cose complicate ;p
      Ti ringrazio e vado a spulciare!

      Elimina
    3. Piccolo aggiornamento: alla fine ho optato per un'altra soluzione.
      Avendo tutte le finestre dei followers a piè di pagina, ho utilizzato il tuo post dei pulsanti floreali che portano a fine e inizio pagina per inserire due frecce gif, e quella che porta verso il basso reca una scritta del tipo "I nostri fans/Diventa fan anche tu".
      Mi sembrano abbastanza visibili ma meno invasive del pop-up, magari dò uno spunto a chi come me ha i widgets dei social in fondo al blog :)
      Ciao!
      Giuliana

      Elimina
    4. @ Giuliana
      Anche io non amo per nulla le finestre popup. Le presento perché riscuotono comunque sempre il loro successo :)

      Elimina
  5. Non mi funziona. Ho provato forse per il dominio personalizzato?
    Ho provato a scaricare http://kakinetworkdotcom.googlecode.com/svn/01/files/likeboxfbfanpro.js
    per caricarlo su dropbox ma si apre e non riesco a scaricarlo

    RispondiElimina
    Risposte
    1. @ Marco Rinaldi
      Si tratta di un javascript caricato su Google Code e quindi dovrebbe funzionare anche con i domini personalizzati. Sul sito c'è una seconda opzione per il codice di Blogspot se non funzionasse la prima.
      In ogni caso per scaricare un file quando si apre in una scheda del browser, clicchi nella pagina con il destro del mouse e scegli Salva con nome per poi selezionare la cartella di download

      Elimina
  6. Ciao Ernesto,

    ho provato ad inserire il codice seguendo le coordinate, tuttavia il popup non si visualizza. probabilmente è perché ho il template con visualizzazioni dinamiche....
    a proposito di questo, scusa l'OT, sai come è possibile modificare attraverso l'HTML la larghezza della colonna sinistra nel modello dinamico "Sidebar"? in quella colonna vengono inseriti i titoli degli ultimi post pubblicati, solo che è troppo stretta e il titolo lo leggo parzialmente. grazie mille!

    RispondiElimina
    Risposte
    1. @ DavideMarco
      Se hai un blog a Visualizzazione Dinamica non si possono praticamente fare personalizzazioni. Potresti tentare da solo con Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      e inserendo i CSS su Avanzato > Aggiungi CSS ma spesso non funzionano.

      Elimina
  7. Grazie Ernesto, ho provato ma niente da fare. Continuo a seguirti, soprattutto sugli aggiornamenti delle visualizzazioni dinamiche :)

    RispondiElimina
  8. ciao, anche a me non piacciono particolarmente e per questo ho settato 10 secondi alla chiusura e 60 minuti per farla riapparire :)ma il tasto per chiuderla non appare :| Grazie mille

    RispondiElimina
  9. ora vedo nel js per il problema del tasto di chiusura e della grandezza in generale..vi faccio sapere

    RispondiElimina
  10. allora, non si tratta del file js. per far visualizzare le foto aumentate i px a 80 qui:

    #fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:80px;}

    il bottone di chiusura è qui:
    #fblikepop #closeable{float:right;margin:7px 15px 0 0;}
    non capisco perchè non esca..

    RispondiElimina
  11. per chi volesse far visualizzare il popup ogni 3 giorni, basta impostare 4360 nel valore di attesa, sono 72 ore

    RispondiElimina
    Risposte
    1. @ Domenico
      Non mi stupirei che per il bottone di chiusura mancasse l'immagine. Ci dovrebbe essere una icona che però non mi ricordo di aver trovato nel codice

      Elimina
    2. ci sono solo due png nel js, uno è la firma..l'altro non so, il link non funziona:

      http://kakinetworkdotcom.googlecode.com/svn/01/skin/"+kakinetworkdotcom01skin+".png

      Elimina
    3. @ Domenico...
      Appunto. Forse è l'URL della crocetta ...

      Elimina
  12. Eh eh, molto bello, ma se Ernesto non lo usa...
    Mi hanno detto oggi che hai 40.000 followers, COMPLIMENTI!!!!!!!!!!

    RispondiElimina
  13. Ciao posso chiederti come si può eliminare ?? Grazie

    RispondiElimina
    Risposte
    1. @# Basta fare il procedimento opposto e andare su Modello, cercare il codice e eliminarlo quindi salvare il template.

      Elimina
    2. ho provato, mi dice modello non corretto...

      Elimina
    3. @# Probabilmente non lo selezioni bene. Ritorna nel sito da cui lo hai preso e guarda l'inizio della riga del codice che hai incollato per essere più precisa.

      Elimina
  14. Io le odio le finestre pop-up, ma google non dava una penalizzazione ai siti con i pop-up? Ora il web ne è strapieno, sono inguardabili..

    RispondiElimina
  15. Ciao Ernesto a me non funziona nè con un codice nè con un altro. Cosa posso fare?

    RispondiElimina
    Risposte
    1. @# Il codice non è mio è del sito che ho linkato. Prova con questi altri sistemi
      http://www.ideepercomputeredinternet.com/2013/02/blogger-social-popup.html
      http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html

      Elimina
  16. Segnalo che il codice non funziona più bene, infatti compare una finestra che chiede dei dati d'accesso

    RispondiElimina
    Risposte
    1. @# Quando si sceglie di inserire widget su hosting esterno questo è il rischio. Ci sono però delle alternative
      http://www.ideepercomputeredinternet.com/2013/02/blogger-social-popup.html

      Elimina
    2. hai mica il js sul tuo pc?
      questo per intenderci:
      http://kakinetworkdotcom.googlecode.com/svn/01/files/likeboxfbfanpro.js

      Elimina
    3. trovato questo:

      pras-project.googlecode.com/files/likeboxfbfanpro.js

      posso caricarlo sul mio google site e provare, vero?

      Elimina
    4. confermo, funziona...nello script però bisogna cambiare anche la fonte dell'immagine

      Elimina
    5. @# OK grazie della info che potrebbe tornare utile anche a qualche altro lettore

      Elimina
  17. hemm possibile che io non riesca a trovare in nessun modo la riga < /head> ? Non sono pratico di HTML, ma andando nel modello non salta fuori da nessuna parte (ovviamente usando ctrl+F)

    RispondiElimina
    Risposte
    1. Il tag /head c'è per forza altrimenti non sarebbe valido come modello. Leggiti questo post e eventualmente guarda anche il video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      @#

      Elimina
  18. Il codice non sembra funzionare più e il sito dove si trovava il widget da configurare adesso reindirizza ad un sito di dropshipping!

    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.