Banner per l'accettazione dei cookie con tre link e stile dark.

Come installare un banner per l'accettazione dei cookie di profilazione secondo i dettami del Garante della Privacy con bottone OK, link alla informativa estesa e collegamento a una pagina con le istruzioni su come cancellare i cookie.

Quando mancano circa due settimane al termine ultimo per mettersi in regola con le disposizioni del Garante della Privacy in materia di informativa sui cookie il web è in subbuglio per tutta una serie di dubbi che naturalmente non spetta a me risolvere. 

Nella versione del banner che ho proposto nell'articolo appena linkato il lettore viene informato dell'esistenza di cookie di profilazione di terze parti e quindi può decidere di accettare la cosa continuando la navigazione. In una visione più restrittiva si può obiettare che però già aver aperto una pagina significa aver comunque già ricevuto dei cookie. Non entro nel merito legale della vicenda però per informare ulteriormente i lettori, oltre al link alla informativa estesa, si può aggiungere anche un altro collegamento a una pagina web in cui si illustra come eliminare tutti i cookie o solo quelli di un determinato dominio.

In questa nuova versione del banner ho pure modificato il suo aspetto in uno stile più dark che si visualizza nella parte bassa della pagina sia su desktop sia su dispositivi mobili

Oltre al bottone OK per l'accettazione dei cookie e al bottone +Info con link alla informativa estesa c'è anche il collegamento a una pagina web in cui si illustra come eventualmente cancellare i cookie che fossero già presenti nel browser. Per l'installazione, dopo aver salvato il template, si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla questo codice

<!-- Accettazione Cookie - Inizio --><div id='banner_cookie'>
Questo sito utilizza cookie tecnici propri e dei cookie di profilazione di terze parti.
<br/>
Se continui nella navigazione accetti il loro uso. <a href='javascript:void(0);' onclick='var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie(&apos;info_cookie&apos;,&apos;1&apos;,expiration,&apos;/&apos;);document.getElementById(&apos;banner_cookie&apos;).style.display=&apos;none&apos;;'><b>OK</b></a> | Per <a href='http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html' target='_blank'>+Info</a> sui cookie | Come <a href='http://www.ideepercomputeredinternet.com/2012/10/cookie-browser-chrome-firefox-ie-eliminare.html' target='_blank'>eliminare i cookie</a> già presenti.
</div>
<!-- Stile del Banner -->
<style>
#banner_cookie {
display: none;
z-index: 99999;
position:fixed;
left:0px;
right:0px;
bottom:0px;width:100%;
min-height:40px;
padding:5px;
background: #000; /* Colore di sfondo */
color:#F2F97F;  /* Colore del testo */
line-height:20px;  /* Interlinea */
font-family:Georgia;  /* Famiglia di font */
font-size:12px; /* Dimensione font */
text-align:center;
}
#banner_cookie a:nth-child(2),#banner_cookie a:nth-child(3),#banner_cookie a:nth-child(4) {
padding:2px;
background:#f72c1d; /* Colore sfondo bottoni */
 border-radius:4px;   /* Arrotondamento */
text-decoration:none;
}
#banner_cookie a {
color: #1FE0C9; /* Colore testo bottoni */
font-weight:bold;  /* Grassetto */
 text-decoration: none;
}
#banner_cookie a:hover {
color:#FFF; /* Colore testo bottoni passaggio cursore */
}
#banner_cookie a:nth-child(2):hover,#banner_cookie a:nth-child(3):hover,#banner_cookie a:nth-child(4):hover {
position: relative;
top:1px; /* Spostamento di 1 pixel al passaggio del mouse */
left:1px;
}
</style>
<!-- Script dei cookie -->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+&quot;=&quot;+escape(value)+((expires==null)?&quot;&quot;:&quot;; expires=&quot;+expires.toGMTString())+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+((secure==null)?&quot;&quot;:&quot;; secure&quot;)}function getCookie(name){var cname=name+&quot;=&quot;;var dc=document.cookie;if(dc.length&gt;0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(&quot;;&quot;,begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+&quot;=&quot;+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+&quot;; expires=Thu, 01-Jan-70 00:00:01 GMT&quot;}}</script>
<!-- Gestione barra dei cookie -->
<script type='text/javascript'>
var ckeck_cookie = getCookie(&quot;info_cookie&quot;);
if (ckeck_cookie != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie(&quot;info_cookie&quot;,&quot;1&quot;,expiration);
document.getElementById(&quot;banner_cookie&quot;).style.display=&quot;block&quot;; }
</script>
<!-- Accettazione Cookie - Fine -->

Si salva il modello. Si apre quindi il blog con una scheda in Navigazione Anonima per controllare il funzionamento del banner. Le personalizzazioni riguardano il testo da visualizzare che nel codice è stato colorato di blu. Ci sono i link a due pagine di questo sito che sono la Policy sui cookie, vale a dire la informativa estesa che può essere usata liberamente come modello, e un vecchio post su come cancellare tutti i cookie del browser o solo quelli relativi a un determinato dominio. Ovviamente si può usare anche un'altra fonte per dare al navigatore queste informazioni. La demo che ho pubblicato online va aperta con una scheda In Incognito per visualizzarne il banner

Demo
Clicca qui

Per gli altri parametri in particolare per quello che riguarda i codici dei colori ho inserito dei commenti colorati di verde che spiegano a cosa si riferiscano. Si può mostrare il banner anche nella parte alta sostituendo bottom:0px; con top:0px;  . Quando si passa con il mouse sopra a un bottone questo muterà di colore e farà un piccolo salto di 1 pixel per un effetto schiacciamento. Il cookie tecnico che questo script installerà nel browser del navigatore avrà la durata di un anno.