Realizzazione siti web Torino - Fandango Visual Design

#7 – Tutorial barra dei cookies

In Tutorial by Ale0 Commenti

Condividici! =)

Dal 2 giugno di quest’anno è diventata operativa la cosidetta Cookie Law, la legge che obbliga tutti i gestori e possessori di siti web che utilizzano cookie ad avvisare gli utenti che visitano il sito del loro utilizzo e del loro scopo.
Spesso accade che un sito web venga costruito da persone che non lo fanno per professione, ma per passione o magari per puro diletto. Così capita che al momento delle entrate in vigore di leggi come questa un gestore di siti inesperto o alle prime armi si trovi spiazzato e non sappia come rimediare.

studio-grafico-torino-cookie-bar
Le strade possibili a questo punto sono due:
aggiustarsi con un bel plugin già pronto oppure costruirsi da sé una barra di avviso dei cookie per i visitatori.
Per quanto riguarda utenti con siti costruiti mediante CMS (gestori di contenuti) di plugin ne sono saltati fuori ultimamente fin troppi, tutti con le stesse identiche funzioni. Per i siti che usano WordPress in particolare si può facilmente adattare il proprio sito alla Cookie Law grazie a questo semplice plugin gratuito: Cookie Notice by dFactory, come è stato fatto sul sito di Fandango Studio.
Per chi invece non utilizza un gestore di contenuti come WordPress o Joomla, oppure semplicemente vuole cavarsela da solo, può seguire passo passo questo semplice tutorial e imparare come inserire una barra dei cookie nel proprio sito a mano, senza bisogno di installare nulla. Un esempio lo potete vedere sul sito di .

1 – Scaricare il file necessario
Per poter creare la nostra barra dei cookie bisogna innanzitutto scaricare il file javascript creato appositamente da Google Inc. da questo link:
Questo file è stato creato appositamente da Google per rispondere alle esigenze degli sviluppatori che avrebbero dovuto adattare i propri siti alla Cookie Law.

2 – Caricare il file sul proprio spazio web
Per poter usare il file appena scaricato sarà necessario ovviamente decomprimerlo e caricarlo nello spazio web nel nostro sito. Supponiamo di avere un sito con una cartella chiamata “js”, carichiamolo al suo interno.

3 – Implementare il codice nel proprio sito
A questo punto sarà necessario aggiungere poche righe di codice all’interno della sezione <body> del nostro sito. Quindi apriamo, per esempio, la nostra index.html o index.php con un editor di codice (consiglio di scrivere subito prima del tag </body>) e aggiungiamo queste righe di codice:

<script src=”js/cookiechoices.js”></script>
<script>
document.addEventListener(‘DOMContentLoaded’, function(event) {
cookieChoices.showCookieConsentBar(“Avviso: questo sito utilizza i cookie per assicurarti una migliore esperienza di navigazione. Continuando la navigazione nel sito autorizzi l’uso dei cookies:”, “Accetto”, “La politica della Privacy”, “http://example.com”);
});
</script>

In questo modo si potrà visualizzare una barra di accettazione dei cookie fissa in alto.
Nel codice il file cookiechoices.js viene cercato nella cartella “js” come accennato prima. Se invece avete messo il file nella directory principale del sito (dove è presente l’index, per capirci) includetelo semplicemente con <script src=”cookiechoices.js”></script>, eliminando “js/”.

4 – Modificare il messaggio
Per personalizzare il messaggio bisognerà modificare i testi scritti tra le virgolette.
Il primo messaggio è quello di avviso.
Il secondo (Accetto) è il testo dell’accettazione che fa sparire la barra dei cookie all’utente.
Il terzo (La politica della Privacy) è il testo del link che porterà alla pagina con l’informativa sui cookie più dettagliata.
Il quarto ed ultimo (http://example.com) sarà il link alla pagina di informativa sui cookie.
Fate attenzione modificando questi messaggi a lasciare sempre le virgolette a inizio e fine del messaggio!

5 – Modificare lo stile della barra
(per utenti più esperti)
Per personalizzare lo stile della barra (colore, posizione, altezza…) bisognerà agire sul file scaricato prima: cookiechoices.js.
Cercare tra le righe di codice la funzione function _createHeaderElement
Alla riga che dice var butterBarStyles = viene inserito inline del codice CSS che si può modificare per ottenere uno stile diverso da quello di default.
Per cambiare il colore di sfondo della barra basterà modificare il valore di background-color:#eee; , per esempio se si vuole lo sfondo nero si potrà mettere background-color:#000; per posizionare la barra in basso e non in alto si potrà cambiare il top: 0; in bottom: 0; e così via. Per cambiare il colore al testo invece basterà aggiungere color: #fff; .

A questo punto avrete anche sul vostro sito una barra dei Cookie completamente funzionante. Non dimenticatevi però di scrivere e collegare la pagina di Informativa sull’utilizzo dei cookie che fa il vostro sito!

Nota: i file di esempio relativi a questo tutorial li potete trovare su

Al prossimo tutorial!

< Ale />

Condividici! =)

Lascia un Commento