Pubblicato il 21/05/11 - aggiornato il  | 54 commenti :

Come inserire una finestra popup di benvenuto con ShadowBox.

Finestra modale di benvenuto da mostrare in Blogger con l'Effetto Shadowbox.
Ho avuto modo di presentare l'Effetto Shadowbox che ritengo sia uno dei migliori per gli utenti di Blogger data la sua estrema versatilità. L'obiettivo di questo post è quello di creare una finestra popup di entrata che può essere personalizzata con una immagine o anche con qualsiasi oggetto HTML.

L'immagine che si visualizza ha un collegamento alla sottoscrizione dei feed di questo blog, può essere chiusa cliccando sulla crocetta in basso a destra oppure scomparirà automaticamente dopo 20 secondi dall'apertura della pagina. La durata dell'apertura può essere personalizzata

 Ho postato sul web una dimostrazione di questo effetto


Questo è invece lo screenshot di quello che appare al visitatore


pagina popup di invito a sottoscrivere i feed

Per l'installazione di ShadowBox si possono seguire le indicazioni del post che ho appena linkato. Per questa demo della finestra popup ho leggermente modificato il codice nei colori e nell'opacità

overlayColor: "#450808",
overlayOpacity: "0.8",

Dopo aver inserito questo script, se non si è ancora fatto, si va sempre su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e, immediatamente sopra alla riga </head>, 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: 'Codice HTML da visualizzare in apertura', height: 336, // Altezza della finestra
width: 506 // Larghezza della finestra
});
}
setTimeout('Shadowbox.close()', 20000); // Durata del tempo di apertura
// ]]>
</script>
</b:if>

Le personalizzazioni da fare riguardano:
  1. Le dimensioni della finestra popup in altezza e larghezza
  2. La durata del tempo di apertura della finestra in millisecondi (20000 significa una durata di 20 secondi)
  3. La prima e l'ultima riga impongono di visualizzare la finestra popup solo in homepage e possono essere sostituite da altri tag condizionali  
  4. Il codice dell'oggetto da mostrare in primo piano
Per il punto 4) ci sarebbero un sacco di possibilità da prendere in esame. Come esempio vi posto il codice che ho inserito nel post di demo

content: '<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G3NDcb7qzbRP04Nd_QTPcYrZNMLsuGzmVixJJYM30j8331BzTj3802hss0Sx-vnuaF5akhxrslh3F30sgdu3hi9uLFzmGKvI1VmgZbYLYsdtuOwmnYHokyl4In1zIsX6OBiVL_apLdA/"/></a>',

dove l'URL in rosso è quello dei feed di questo blog e quello in blu è l'indirizzo della immagine che ho caricato su Picasa. Adesso dobbiamo fare una ulteriore modifica che sarà diversa a seconda che utilizziamo un vecchio template o uno nuovo del Designer Modelli. Nel primo caso cerchiamo la riga

<body>


e la sostituiamo con

<body onload='AlertMessage();'>


Con in nuovi template la riga da cercare sarà

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


e dovrà essere sostituita con

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='AlertMessage();'>


Si salva il modello. Il contenuto in HTML della finestra popup dovrà essere inserito tra le due virgolette singole della riga content. Per una immagine con un collegamento il codice sarà

<a href="URL DEL COLLEGAMENTO"><img src="URL DELLA IMMAGINE"/></a>


Se si vuole mettere solo del testo si può usare questa sintassi

<div style="padding:20px 10px 20px 10px; color:#ffffff; background-color: #000000;">Testo da visualizzare</div>


Si può inserire anche un video con il relativo codice da incorporare preso per esempio da Youtube. In questo caso va scelto il vecchio codice. E' anche possibile inserire un oggetto in flash in formato SWF. Il filmato dovrà essere preventivamente caricato su DropBox. Non ho testato ma possiamo anche inserire un iFrame di una pagina web cambiando le righe players: ['html'] e player: 'html', con players: ['iframe']  e player: 'iframe',.

Concludo osservando che oltre a un invito a sottoscrivere i feed, si può inserire anche un banner pubblicitario. Meglio comunque non utilizzare quelli dei circuiti pubblicitari ufficiali perché la cosa potrebbe andare contro il regolamento del programma. Mi riferisco a una pubblicità di un evento, di un prodotto, di un libro o di qualsiasi cosa che trattiamo nel nostro sito. I blog di notizie possono inserire l'immagine di una notizia in primo piano, quelli musicali la copertina dell'ultimo CD di un artista, i blog collegati a pubblicazioni possono inserire l'immagine del libro con il link al negozio online, ecc…
Aggiornamento: L'effetto funziona con Chrome e Firefox ma non con IE
Fonte | ShadowBox -


54 commenti :

  1. Ma si visualizza ogni volta che si va in home page??

    RispondiElimina
  2. @Curiosità da Condividere
    Sì, tutte le volte che si apre la homepage si vede la finestra popup per un certo numero di secondi, però può essere eliminata immediatamente

    RispondiElimina
  3. Come posso creare una finestra pop up in cui appare la finestra della pagina fan di facebook,in modo da invitare a mettere mi piace oppure di attendere 5 seconi. Ho visto questo effetto in molti siti. Sai come si fa?

    RispondiElimina
  4. Se mi posti un link posso dare una occhiata

    RispondiElimina
  5. Esiste l'app dedicata ma se non sbaglio è a pagamento. Si chiama Facebook Traffic Pop e permette di cliccare il Mi Piace ai visitatori per aumentare i fan della pagina...

    RispondiElimina
  6. ciao, volevo chiederti se è possibile, dato un script (, praticamente è un banner in flash) farlo apparire come popup?? grazie anticipato

    RispondiElimina
  7. @Mark86
    Devi inserire il codice del banner in flash tra le due virgolette di content. Se non sai come inserire un banner in flash, devi prima caricarlo su un hosting tipo DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    Quindi incollare l'URL con le modalità di questo post
    http://www.ideepercomputeredinternet.com/2009/02/inserire-dei-filmati-in-formato-swf-nel.html

    RispondiElimina
  8. grazie lo provo subito e vi posto il risultato ;)

    RispondiElimina
  9. niente non mi funziona, durante l'Anteprima del Modello mi appare all'inizio della pagina proprio in alto questo ...height: 336, // Altezza della finestra width: 506 // Larghezza della finestra }); } setTimeout('Shadowbox.close... ciò significa che qualcosa non va

    Altre info: uso Chrome; all'interno del blog ho inserito altri tuoi widget; uso un nuovo template quindi ho sostituito quello che dici nella guida; all'interno di CONTENT ho messo un banner in flash sotto forma di script di dimensioni 728x90 (devo modificare anche le dimensioni height e width?) GRAZIE
    http://marcoparrilla.blogspot.com se vuoi dare un occhiata

    RispondiElimina
  10. @Mark86
    L'immagine che ho usato io è di 500x333 pixel, leggermente inferiore alla finestra 506x336
    Può darsi che dipenda dalle dimensioni oppure dal fatto, più probabile, che il formato flash non è supportato negli effetti del genere lightbox

    RispondiElimina
  11. Ciao Ernesto,
    prima di cominciare ti chiedo?:
    prima devo inserire l'effetto ShadowBox che descrivi qui e poi fare questa modifica, oppure questa procedura esclude/include l'altra?

    RispondiElimina
  12. Ciao Ernesto. Post molto utile ma non riesco a inserirlo nel mio blog. Seguo tutta la procedura ma sulla home page non mi compare nessuna finestra di pop up. è strano perchè non mi dà errori. Quello che vorrei fare è inserire un pop up per invitare le persone a cliccare mi piace. Come poteri risolvere? Hai qualche suggerimento?
    Grazie

    RispondiElimina
  13. @Raffaele
    Devi prima inserire l'Effetto ShadowBox
    http://www.ideepercomputeredinternet.com/2011/05/effetto-shadowbox-per-gallerie-di-foto.html
    e controllare che ti funzioni inserendo delle immagini di prova in qualche post. Se non ci sono problemi non dovrebbero esserci neppure per questa finestra popup.
    Se invece non riesci a inserire ShadowBox e a farlo funzionare, prova a caricare i javascript su DropBox, cioè questo
    https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css
    e questo
    https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js

    RispondiElimina
  14. penso di aver fatto tutto correttamente, per l'installazone dello shadowbox ho caricato anche i file su dropbox e ho testato il funzionamento sul blog.
    Come prova ho messo il codice per il testo nella riga contenent ma non mi esce nulla.. sapresti dirmi cosa ho sbagliato?

    Questo è il sito xboxbook.org

    RispondiElimina
  15. @GEKO24
    Non ci sono errori. Se sei sicuro di aver fatto tutto correttamente significa soltanto che nel tuo modello c'è un altro javascript incompatibile con quello di Shadowbox. E' purtroppo una cosa molto comune specie con i modelli già molto personalizzati.

    RispondiElimina
  16. Ciao Ernesto dopo un'infinità di correzioni al template del mio blog sono riuscito a far funzionare questo effetto, ti scrivo per rispondere a Rubel (e a chi può interessare, magari puoi fare un post tu migliore) visto che sono riuscito a fare ciò che lui chiedeva, e cioè inserire il banner per far iscrivere i miei lettori alla pagina fan di Facebook.
    Con il tuo permesso lo spiego:
    Per prima cosa si deve creare il bottone andando a questa pagina: http://developers.facebook.com/docs/plugins/ scegliendo quello che più piace, ma consiglio quello che mostra gli avatar (o foto) degli utenti iscritti e di dargli le dimensioni 450px-258px (logico che vanno modificate nello script qui pubblicato in altezza262px e larghezza454).
    Adesso si deve selezionare la versione "iframe" (qui un esempio: http://img266.imageshack.us/img266/3564/snap20111119101405002.png) e incollarla in content al posto dello spazio dell'url dell'immagine e non mettere alcun link di collegamento (qui un'altro es: http://img143.imageshack.us/img143/9901/snap20111119101213001.png).
    Fatto, basta regolare il tempo di durata di esposizione (consiglio di lasciarlo com'è) e l'effetto sarà questo:http://img171.imageshack.us/img171/4186/snap20111119104530001.png.
    Così inserito il tutto è interattivo, cioè basta cliccarle su "Mi Piace" e andrà in automatico.
    Un paio di precisazioni, Facebook non da la dimensione 258 ma 290, andrà modificata una volta inserita nel template, non va modificato 'html' e ['html'] in 'iframe' e ['iframe'] altrimenti non va.
    Da lunedì potrete vederlo nella mia home page http://sauroweb.blogspot.com/

    Scusami se mi sono permesso questa mini guida nel tuo blog, spero possa essere utile a te e chiunque voglia farsi più fans al proprio blog.
    Ciao Sauro

    P.S. sto cercando un modo per includere un titolo (es: Se ti piace il blog diventa fans su Facebook), hai suggerimenti da darmi?

    RispondiElimina
  17. @Sauro
    Grazie delle info molto dettagliate e complimenti per il lavoro fatto.

    RispondiElimina
  18. i complimenti vanno a te, seguendo le tue guide sto imparando moltissime cose, prima o poi devo sdebitarmi, dimmi tu come.... Grazie di tutto

    RispondiElimina
  19. @Sauro
    Non ho mai chiesto nulla a nessuno e non lo farò neppure adesso ;) Non ho neppure messo il bottone per le donazioni come invece hanno fatto molti miei colleghi.
    Mi basta solo che sia riconosciuto il mio lavoro, solo questo.

    RispondiElimina
  20. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Leggi il commento precedente di Sauro. Non ho testato quindi ti consiglio di usare le sue impostazioni che sembra funzionino. Quando avrò un po' di tempo magari ci faccio un post ;)

      Elimina
  21. scusate,
    ho analizzato l'html di sauro e non ho trovato neanche un "b:if cond='data:......" ne tanto meno i vari <b: etc....
    che invece ci sono normalmente all'interno di head /head.
    Quindi la domanda nasce spontanea, si possono eliminare tutti o vanno fatte particolari modifiche???
    attendo news da sauro.
    Grazie in anticipo.

    RispondiElimina
    Risposte
    1. @AgenziaMatrimoniale
      Sauro risponderà per quanto gli compete ma intanto ti posso dire che i tag condizionali del tipo b:if non si vedono nel sorgente pagina; funzionano in modo tale da mostrare un certo HTML a seconda della pagina in cui ci si trova.

      Elimina
    2. *Animazione non Matrimoniale aahahah sarà mica stato un lapsus freudiano :D

      Elimina
  22. grazie per la risposta,
    allora non capisco perchè non funzioni. ho fatto tutto quello che è stato scritto ma niente... non appare...nulla...help!!!!
    Grazie ancora

    RispondiElimina
  23. Ciao Ernesto! Intanto complimenti per gli articoli dedicati a Shadowbox, molto utili.. A tal proposito volevo chiederti una gentilezza. .sai percaso se è possibile realizzare un galeria come questo esempio? http://www.marcopoderi.net/

    Ossia, è possibile creare un box di testo da far apparire sotto ogni contenuto ingrandito? Grazie anticipatamente.. Spero mi potresti essere utile. Filippo

    RispondiElimina
    Risposte
    1. @filippoman
      L'effetto è il Fancybox
      http://fancybox.net/
      Non so se sia applicabile a Blogger.

      Elimina
    2. Grazie 1000; Sai per caso se esistono guide o tutorial in italiano per facilitare l'istallazione? Grazie

      Elimina
    3. @filippoman
      Ma chi si mette a perdere tempo per fare queste cose oltre al fesso del sottoscritto? ahahah

      Elimina
  24. Eh eh eh.. invece di gente come te ce ne vorrebbe, credimi! Ascolta, grazie al tuo supporto penso di aver risolto (in parte).
    Mi piacerebbe applicare un effetto più "customizzato".. mi spiego meglio, se dai una occhiata alla immagine seguente http://desmond.imageshack.us/Himg716/scaled.php?server=716&filename=senzatitoloy.png&res=medium vorrei sapere, se possibile, formattare il testo del titolo, ad esempio aggiungere un bold o aggiungere paragrafi.

    Grazie anticipatamente

    RispondiElimina
    Risposte
    1. @filippoman
      Sono cose che non si possono dire a priori. Se hai tempo e volontà non ti resta che provare, ti posso solo fare gli auguri :))

      Elimina
  25. ciao grazie mille per le info nel post solo che volevo chiederti.. come si fa a mettere questo pop up in tutte le pagine e non solo nella home?

    RispondiElimina
    Risposte
    1. @bellaaa
      Basta che toglie la prima e l'ultima riga del codice che sono colorate di rosso. C'era già scritto nel punto 3) delle personalizzazioni.

      Elimina
  26. ciao e complimenti per gli articoli, molto utili e interessanti, volevo fare una domanda, ci sono alcuni template per i quali questa funzione non si può attivare?
    ho provato con vari template e funziona per tutti tranne che per uno in particolare, quello che mi interessava di più:-( forse sbaglio qualche passaggio non so

    RispondiElimina
    Risposte
    1. @MarioRagosta
      No. E' tipico dei widget di questo genere non funzionare nei modelli che hanno già dei javascript incorporati.

      Elimina
    2. ...e non ci sono sotterfugi, vero? o mi tengo il template o il widget?

      Elimina
  27. Ho inserito il codice presente nell'altra guida di Shadowbox e ho inserito anche quello in questa pagina, il tutto per creare un popup come ha spiegato Sauro nei commenti, ma non mi funziona, forse perché ho inserito il javascript dei tuoi articoli simili?
    Comunque ho provato a vedere se funziona tramite un immagine ma non mi funziona ugualmente...
    Della guida di Sauro non ho capito solo questo ma penso non sia importante:
    non va modificato 'html' e ['html'] in 'iframe' e ['iframe'] altrimenti non va.

    Purtroppo non riesco a risolvere questa cosa da solo :(

    RispondiElimina
    Risposte
    1. @Andrea
      Visto l'interesse suscitato da questo commento di Sauro, pubblicai un altro post con le istruzioni per inserire il Like Box
      http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html
      possono essere adattate a un altro iframe o codice

      Elimina
  28. Mi è molto piaciuto il demo del popup di benvenuto e vorrei sapere se è possibile creare una finestra di benvenuto di 10 secondi in html senza toccare il modello?
    i miei comnplimenti!
    Grazie

    RispondiElimina
    Risposte
    1. @kamasa54
      Per la finestra di benvenuto di 10 secondi basta che metta 10000 al posto di 20000. Però bisogna per forza modificare il modello.

      Elimina
  29. Una cosa strana funziona con il dominio blogspot e non con il dominio personalizzato appena comprato. Sbaglio qualcosa. Grazie mille

    RispondiElimina
    Risposte
    1. @# Con il dominio personalizzato i javascript di Shadowbox caricati su Google Sites li devi caricare nella cartella Public di Dropbox

      Elimina
  30. Ciao Ernesto, sai se posso usarlo per fare un pop-up col form per raccogliere email? Sto provando ma non riesco, mi si apre la finestra ma è tutta nera. In pratica vorrei utilizzare o il codice html del form di mailchimp o l'indirizzo web del form. Sbaglio qualcosa o non si può fare?
    Grazie mille per i tuoi consigli, sono fantastici :)!

    Pier

    RispondiElimina
    Risposte
    1. @# Prova con quest'altro
      http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html
      dove al posto del codice della pagina di Facebook provi a mettere quello del modulo della posta (non ti so dire se funzionerà...)

      Elimina
    2. L'ho fatto, mi riesce solo a metà, cioè, si vede il form ma se ne vede solo una parte, poi si vedono gli affari per scendere, ho provato ad aumentare le dimensioni della finestra, quella aumenta ma il form no, sono stato chiaro? Ho paura di no :(

      Pier

      Elimina
    3. @# Te lo avevo detto che non è detto che avrebbe funzionato :(

      Elimina
    4. Peccato, ci mancava poco.
      Grazie lo stesso

      Elimina
  31. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  32. Ciao, io vorrei creare un pop-up con una immagine linkabile che ogni 2-3 giorni cambio.
    Di conseguenza sarebbe per me meglio avere un controllo su widget html, piuttosto che andare a modificare ogni 2-3 gg il codice.
    Dove posso trovare qualche tua "dritta"?

    RispondiElimina
    Risposte
    1. acc... e non ci sono soluzioni alternative? per esempio nel mio blog il popup social è un widget. Non è shadowbox, ma non mi interessa.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy