Pubblicato il 24/05/16 - aggiornato il  | 7 commenti :

Come creare una finestra popup che mostri una immagine con link a una pagina del blog.

Come mostrare una finestra popup con collegamento a una landing page per invitare il lettore a sottoscrivere la newsletter, a acquistare un prodotto o a compiere un'altra azione.
In un articolo di qualche tempo fa ho illustrato come si possa mostrare una finestra modale (o popup) che appaia ai nuovi visitatori del blog. In questa immagine ci poteva essere un testo con un invito a sottoscrivere i feed, ad acquistare un prodotto o a contribuire a una campagna di sensibilizzazione.

Il limite di quella personalizzazione è che l'immagine non poteva essere linkata cioè l'avviso presupponeva una azione diversa da un semplice click da parte del lettore. Il metodo utilizzato si serviva di un iframe che non può essere linkato e anche i link con i CSS sono molto difficili da inserire. L'utilizzo dei javascript avrebbe comportato una rifacimento completo di tutto il codice che non mi andava di fare e che forse sarebbe stato anche non alla portata delle mie modeste capacità.

Ho quindi pensato di risolvere inserendo il link direttamente all'interno delle immagini e questo lo si può fare solo con le immagini in formato SVG. Il risultato di questa nuova personalizzazione sarà una finestra modale che verrà visualizzata da tutti i nuovi lettori del sito e che avrà questo aspetto

finestra-modale-landing-page

L'obiettivo di questo post sarà quello di accompagnare il lettore nella creazione dell'avviso da mostrare nella finestra popup, nella realizzazione della immagine in formato SVG che abbia il link alla pagina desiderata e infine nella installazione nei blog di Blogger del relativo codice. Non ho testato ma presumo che il metodo funzioni anche per i blog Wordpress visto che nel codice non ci sono dei tag di Blogger.

CREARE LA LANDING PAGE E L'IMMAGINE PNG


Per prima cosa dovremmo creare una pagina o un post verso cui indirizzare i lettori, a meno che tale pagina non sia già esistente, e dovremo prendere nota del suo indirizzo. Successivamente si dovrà creare una immagine con un avviso idoneo con un programma di grafica come Photoshop o Gimp. Con Photoshop si va su File -> Nuovo quindi si impostano le dimensioni della immagine che non sono particolarmente importanti visto che poi la si potrà ridimensionare.

creare-immagine-photoshop

In Photoshop si va su File -> Salva con nome per poi dare un nome, scegliere la cartella e selezionare il formato di uscita come PNG. Questa immagine di per sé ovviamente non contiene nessun link.

INSERIRE UN LINK IN UNA IMMAGINE CON INKSCAPE


Dobbiamo adesso utilizzare il programma gratuito Inkscape per creare una immagine in formato SVG a partire da quella data che abbia un collegamento alla pagina della landing page. Come abbiamo già visto nel post sulla creazione di mappe di immagini ci sono degli strumenti su Inkscape abbastanza semplici da usare anche da chi non sia esperto di grafica vettoriale come del resto è anche il sottoscritto.

inkscape-interfaccia

Dopo aver aperto Inkscape si va su File -> Importa e si seleziona l'immagine in PNG che abbiamo appena creato con Gimp, Photoshop ma anche con Paint o Paint.NET. Se ci si clicca sopra l'immagine si selezionerà e con le maniglie potrà essere ridimensionata a piacere.

ridimensionare-immagine-inkscape

In Inkscape sopra al righello verranno visualizzati i dati della larghezza e dell'altezza della immagine. Considerando che l'immagine risultante in SVG dovrà essere di 402x230 pixel ovviamente quelle della immagine importata in PNG dovrà averne di minori (es: 395x197 pixel come mostrato nello screenshot). Ora dovremo passare alla creazione del link. Si seleziona l'immagine importata e ci si clicca sopra con il destro del mouse per visualizzarne il menù contestuale

creare-collegamento-svg

Si sceglie Crea collegamento che aprirà sulla destra un pannello di configurazione

proprietà-collegamento

In Href si incolla l'URL della landing page, in Target si può incollare _blank per aprire il link in un'altra scheda mentre in Titolo si digita quello che il lettore visualizzerà nel tooltip quando ci passa alla immagine con il mouse. Non resta che determinare le dimensioni della immagine andando nel Pannello più in basso per settare l'area da esportare in 402x230 pixel.

area-esportare-svg

Adesso dovremo salvare l'immagine in SVG andando su File -> Salva come ...

salva-immagine-svg-inkscape

Nella finestra che si apre dovremo scegliere nome, cartella di destinazione e formato SVG

formato-svg-inkscape

 


COME CARICARE NEL WEB L'IMMAGINE SVG


Le immagini in formato SVG non sono supportate da Blogger e da Picasa Web Album. Dobbiamo quindi caricarle su Google Drive o nella cartella Public di Dropbox. Google Drive cesserà il suo supporto di hosting il 31 Agosto 2016 è bene caricare il file SVG nella cartella Public di Dropbox.

copiare-immagine-dropbox 

Il caricamento della immagine potrà essere fatto con il drag & drop. Adesso dovremo trovare il link diretto di detto file. Ci si clicca sopra con il destro del cursore per aprire il menù contestuale

copiare-link-pubblico-dropbox

Si cliccherà su Copia link pubblico per copiare negli appunti il link. Avrà questa struttura

https://dl.dropboxusercontent.com/u/2574553/landingPage4.svg


Se adesso si incolla tale URL nel browser si dovrebbe visualizzare l'immagine e, passandoci sopra con il cursore, dovremmo vedere che è presente il link inserito

immagine-svg-dropbox

Se l'immagine non si visualizzasse e se non ci fosse il link significa che avete sbagliato qualcosa.

COME INSTALLARE IL CODICE


In Blogger si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice per poi salvare l'elemento.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<style> #fanpagefb{display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzPcDdpal4ySIcqgjVLRQCUTmfS3JwUdGM3YE1ZlgsYYaVJlrjbZkaHaP9ggQm76V66c-zakSpefEMenM-9IL8Od9kngDaVN-9O27EB0bvNq7yWet9MupA2j7rsGT62g5ocU0zCFCY_g/s800/sfondo.png); width:100%; height:100%; position:fixed; top:0; left:0; z-index:999999; } #fanpagexit{ width:100%; height:100%; } #likebox{ background:#fff; width:420px; height:270px; position:absolute; top:50%; left:50%; -webkit-box-shadow:inset 0 0 50px 0 #939393; -moz-box-shadow:inset 0 0 50px 0 #939393; box-shadow:inset 0 0 50px 0 #939393; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:-135px 0 0 -210px; } #chiusura{ float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aVSRfaW01YzqFSTOSMBHuh7aVH48UxXOl7uBPgBOHb7aq5e60A5ALUnvH5xW-yt-FW6oBIPBUkvypI0BJ3lZHXVA93nPBPMbkDddNUGSzMUivOApdivOBdtYoUkZhdri4xSm7ZogJLE/s56/close.png)repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .bordo{ height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } </style> <script type="text/javascript"> jQuery.cookie=function(key,value,options){ if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options); if(value===null||value===undefined){options.expires=-1;} if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);} value=String(value); return(document.cookie=[ encodeURIComponent(key),'=', options.raw?value:encodeURIComponent(value), options.expires?'; expires='+ options.expires.toUTCString():'', options.path?'; path='+ options.path:'', options.domain?'; domain='+ options.domain:'', options.secure?'; secure':''].join(''));} options=value||{}; var result,decode=options.raw?function(s){ return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;}; </script> <script type="text/javascript"> jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){ $('#fanpagefb').delay(100).fadeIn('medium'); $('#chiusura, #fanpagexit').click(function(){ $('#fanpagefb').stop().fadeOut('medium')})} $.cookie('popup_user_login','yes',{path:'/',expires:7})}); </script> <div id="fanpagefb"> <div id="fanpagexit"></div> <div id="likebox"> <div id="chiusura"></div> <div class="bordo"></div> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://dl.dropboxusercontent.com/u/2574553/landingPage4.svg" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div> </div>

Ovviamente dovrete sostituire l'URL della immagine colorato di rosso che ho usato come test con quello della vostra immagine in SVG caricata su Dropbox.  


La finestra modale sarà visualizzata una volta ogni 7 giorni. Nel senso che se un lettore apre una pagina del blog e poi chiude la finestra cliccando con la crocetta non la visualizzerà più per i prossimi 7 giorni. Questo periodo di tempo può essere personalizzato modificando il codice in expires:7}.

L'URL colorato di viola è quello della immagine di sfondo che ha una opacità del 90%. Se volete lo sfondo più chiaro per esempio con opacità del 58% lo potete sostituire con quest'altro

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5TtgINKPZPZH00rJvpRXwJhjYcG07bzY6R2Mi44qUZTddPzMIe7oXDjoL3eV0I777Y6I9nffyZmHiJEbnHYJoUgK4SKCdqwVKD2Ua3hm3dd8-ulN3h5zPfeTJa9EKl6PU_yeesJ0a9Oc/s800/sfondo-2.png

L'immagine della crocetta di chiusura ha l'URL colorato di blu. Le righe evidenziate di giallo sono la libreria jQuery che possono essere tralasciate se tale libreria fosse già presente nel modello. Gli utenti Wordpress possono provare a incollare il codice su Aspetto -> Widget -> Testo oppure incollarlo subito sopra a </body> nel file footer.php dell'Editor del Tema.

AGGIORNAMENTO 1: Il caricamento di file SVG su Dropbox non funziona più, quindi si dovrà creare una semplice immagine in formato PNG, per poi caricarla su Google Foto inserendola in una bozza di un post di Blogger e ottenerne il link diretto.  In questo modo però non si potrà inserire il collegamento ma si potrà comunque chiudere l'immagine del popup. Per verificare più volte il funzionamento della Demo aprire il link con una scheda in Incognito.

AGGIORNAMENTO 2: Per creare il file SVG e per caricarlo nel web, ho pubblicato un nuovo articolo che utilizza Inkscape come software e Firebase come hosting. 


7 commenti :

  1. Come si fa a fare sì che esca ogni volta che uno apre il sito? Non riesco a testarlo se si apre una volta ogni giorno.

    RispondiElimina
  2. Lo puoi testare aprendo una pagina in incognito
    @#

    RispondiElimina
    Risposte
    1. Perfetto, grazie!

      Non voglio approfittare della tua gentilezza e della tua pazienza, ma ho seguito tutto quello che hai detto, eppure il popup si apre bianco. L'unica differenza è nella grandezza dell'immagine che sto cercando di usare, rettangolare con il lato corto verso il basso per sfruttare l'ottimizzazione mobile.

      Elimina
    2. Leggiti l'aggiornamento. Non si può più usare SVG e Dropbox quindi si deve usare una immagine PNG, ottenerne il link diretto e inserirlo nel codice. Per vedere il risultato apri la demo con una scheda in incognito.
      @#

      Elimina
    3. Non avevo letto, chiedo scusa. Non c'è proprio modo per inserire un link? Mi servirebbe molto...

      Comunque grazie, gentilissimo come sempre.

      Elimina
    4. L'aggiornamento l'ho pubblicato due giorni fa quando mi sono accorto che Dropbox non supporta più i file SVG. Purtroppo al momento non mi viene in mente nessun servizio sostitutivo per gli Svg. Se trovo qualcosa ci faccio un altro post.
      @#

      Elimina
    5. Si può caricare il file SVG su Firebase, servizio gratuito di Google che lo supporta. Qui le istruzioni per poter usare il servizio
      https://www.ideepercomputeredinternet.com/2017/05/firebase-hosting-google.html
      L'URL ha anche una chiave per poter essere utilizzato solo dal suo proprietario ma visualizzato da tutti
      @#

      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