El código para nuestra política de cookies
Lo primero de todo será añadir el código. Una pequeña capa fijada en la parte superior o inferior del site con un mensaje de advertencia y dos enlaces: uno a la página correspondiente con la información necesaria sobre la política de cookies y otra para aceptar y cerrar el mensaje.
|
|
<div id="overbox3">
<div id="infobox3">
<p>Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Si continúas navegando consideramos que aceptas su uso.
<a href="politica-privacidad.php">Más información</a>
<a onclick="aceptar_cookies();" style="cursor:pointer;">X Cerrar</a></p>
</div>
</div>
|
Después, le damos un poco de estilo a esta capa. Lo más importante será el atributo position que será el que mantenga la capa siempre visible en el lugar que creamos oportuno (en nuestro caso, pegado al pie de página).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#overbox3 {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 999999;
display: block;
}
#infobox3 {
margin: auto;
position: relative;
top: 0px;
height: 58px;
width: 100%;
text-align:center;
background-color: #eeeeee;
}
#infobox3 p {
line-height:58px;
font-size:12px;
text-align:center;
}
#infobox3 p a {
margin-right:5px;
text-decoration: underline;
}
|
Y por último, el javascript. Lo único que tenemos que hacer es hacer la llamada a la librería de jQuery y la llamada a un archivo llamado cookies.js
|
|
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/cookies.js" type="text/javascript"></script>
|
Este javascript de la política de cookies tiene un par de funciones que crean y/o detectan si tienes una cookie llamada cookie_surestao y muestran o no el mensaje en función de si existe dicha cookie.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "1";
i=document.cookie.indexOf(" ",i)+1;
if (i==0)
break;
}
return null;
}
function aceptar_cookies(){
var expire=new Date();
expire=new Date(expire.getTime()+7776000000);
document.cookie="cookies_surestao=aceptada; expires="+expire;
var visit=GetCookie("cookies_surestao");
if (visit==1){
popbox3();
}
}
jQuery(function() {
var visit=GetCookie("cookies_surestao");
if (visit==1){
$('#overbox3').toggle();
} else {
var expire=new Date();
expire=new Date(expire.getTime()+7776000000);
document.cookie="cookies_surestao=aceptada; expires="+expire;
}
});
function popbox3() {
$('#overbox3').toggle();
}
|
¡Et voilà, con pocas líneas tendremos nuestro aviso y un problema legal menos!
————————
[ACTUALIZADO] – Añadimos los ficheros originales (
descárgalos aquí) funcionando correctamente para que podáis descargarlo y utilizarlo sin problemas. Con Chrome en local no va como debería, ya que no guarda las cookies, pero subido a un servidor funcionará sin problemas.
¿Y como colocarlo abajo de mi web?.
Sencillo coloca este código justo debajo de esta etiqueta. <head>
|
|
<style type='text/css' class='singleton-element'>
#cookieChoiceInfo {
bottom: 0;
top: auto;
}
</style>
|
