Come linkare la nostra Policy Privacy nel banner per i cookie di Blogger o come eliminarlo.

Come disattivare il banner di Blogger o come personalizzarlo linkando la nostra Pagina con la Policy Cookie al posto di quella generica di Google. Si possono anche modificare colori e testo del messaggio.

Da poche ore in tutti i blog di Blogger sono stati implementati i banner di Google per la cosiddetta Cookie Law come ho già illustrato in un precedente articolo introduttivo. Questo banner ha il grande merito di essere visto anche nei blog a Visualizzazione Dinamica ma ha il difetto di linkare la pagina della Informativa Estesa di Google e non la nostra. 

Molti di noi avevano usato soluzioni diverse da questa proposte da Google nel suo Cookie Choices come del resto avevo fatto anche io e adesso si trovano con ben due banner mostrati ai lettori per la accettazione dei cookie. A questo punto si possono si possono scegliere sostanzialmente due tipi di soluzione. O si sceglie di lasciare il banner di Google e si personalizza oppure si decide di disattivarlo.

COME DISATTIVARE IL BANNER DI BLOGGER

Se avete una soluzione per i cookie che vi soddisfa pienamente e che magari avete pure pagato allora la scelta migliore è la prima cioè quella di disattivare il javascript di Google. Questo per fortuna è semplicissimo. Si va su Modello > Modifica HTML, si cerca la riga </head> e subito sopra si incolla questo semplicissimo javascript

<script type='text/javascript'>
cookieChoices = {};
</script>

Si salva il modello e non si vedrà più il banner di Google ma solo l'altro cha avevamo implementato. Questo a meno che l'altro non sia stato realizzato proprio con lo script di Google cioè che abbia la funzione "cookieChoices" perché in questo caso non si vedrà neppure quello.

MODIFICARE MESSAGGIO E LINK DEL BANNER

Blogger ci ha indicato il modo come modificare messaggio, testo dei bottoni e link anche se lo ha fatto in un modo che solo in pochissimi credo che abbiano compreso e questo purtroppo non è cosa nuova. I tecnici di Blogger si devono rendere conto che non tutti i loro utenti sono ingegneri informatici. Comunque dopo un paio di test sono riuscito a venire a capo della questione. Andate sempre su Modello > Modifica HTML, cercate la riga </head> e, subito sopra, incollate

<script type='text/javascript'>
cookieOptions = {msg: "Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico. Navigando nel blog accetti la politica dei cookie.", close: "OK", learn: "+Info", link:"https://goo.gl/wuWQ2h"};
</script>

con le parti colorate di blu che possono essere modificate a piacere e l'ultima di queste è il link alla Policy Privacy che nel mio caso è una pagina esterna al blog.

SCRIPT DEI COOKIE PRESENTI IN TUTTI I SITI

Se lasciamo il banner di Google potremo eliminare dai nostri modelli i javascript utilizzati per i Cookie visto che in tutti i blog di Blogger è stato inserito uno script in modo automatico. Infatti basta aggiungere all'URL del dominio questa stringa /js/cookiechoices.js per aprire una pagina con il javascript che anche io avevo utilizzato per la creazione dei banner.  

PERSONALIZZAZIONE DEL BANNER

Se decidete di lasciare il banner di Google lo potete anche personalizzare nei colori. I CSS sono praticamente gli stessi di quelli che abbiamo già visto. Comunque se decidete di farlo andate su Modello > Modifica HTML, cercate la riga ]]></b:skin> e, subito sopra incollate questo codice

/* CSS Accettazione Cookie */
div#cookieChoiceInfo {
background-color: rgba(31,224,201,0.95) !important; /* Colore di sfondo con trasparenza */
color:#fff;
min-height: 20px;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > div > span.cookie-choices-text {color:#fff !important;}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss, #cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1), #cookieChoiceInfo > div > a:nth-child(2) {
color: #eee;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
box-shadow: 2px 2px 2px  #aaa;
text-shadow:1px 1px 1px #ccc;
text-align:center;
padding:3px 12px;
text-decoration:none;
border-radius:8px;
font-family:Georgia;
font-size:14px;
font-weight:bold;
}
#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover, #cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1):hover, #cookieChoiceInfo > div > a:nth-child(2):hover {
color:#fff;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;
left:1px;
}

Con l'ultimo blocco di codice si inserisce anche una traslazione di un pixel che produce un effetto schiacciamento quando con il mouse si passa sopra a uno dei due bottoni. Prima di incollare questo codice verificate che non ce ne sia già uno simile. I codici dei colori possono naturalmente essere modificati a piacere così come il grado di opacità scelto al 95%.

Nei prossimi post mostrerò come si possa posizionare il banner nella parte bassa sia per la versione desktop sia per quella mobile e altre possibili personalizzazioni. Concludo ricordando che per testare il funzionamento del banner bisogna aprire il blog con una pagina in incognito e per controllare se funziona nei dispositivi mobili la pagina in incognito va aperta con il tool Screenfly.