Esta versión incluye mejoras:
– Si la política de cookies se acepta, el DIV de “política” de cookies se oculta para sesiones siguientes.
– Se ha introducido algunos elementos responsive para facilitar su visión en versiones móvil de webs.
España es especialmente absurda en su legislación de internet. Absurda o excesivamente garantista. Existe una legislación explícita de cookies en la UE, que en España es de la más exhaustiva (nos va la sobrelegislación en casi cualquier ámbito).
La ley de cookies es una especie de tortura para webmasters ya que cualquier web requiere cookies para su funcionamiento ordinario, desde cookies para seleccionar que tipo de plantilla prefiere el usuario, a cookies para las estadísticas de navegación. Algunas cookies pueden tener un uso que podemos considerar inapropiado o que atente nuestro anonimato y aprovechar información para realizar publicidad que utilice nuestros datos de navegación. Pero independientemente que en tu web no utilices este tipo de cookies has de informar de ellas.
Por suerte la ley no es especialmente restrictiva en la forma de informar y aceptar cookies y permite el consentimiento implícito siempre que el aviso sea visible, aparezca al usuario que aún no haya hecho la aceptación y se le informe de como tratar las cookies que le estamos instalando y que cookies estamos instalando y su utilidad y funcionalidad.
Lo cuál nos permite soluciones técnicas sencillas, que podemos instalar en cualquier web. Para WordPress hay algunos plugins, pero prefiero no quedarme en soluciones “justo para un tipo de web”, sino libero este pequeño código que nos permite resolverlo para cualquier web.
El código tiene tres partes y se ha de desarrollar una página donde expondremos nuestra política de cookies.
La primera parte es un código JavaScript que podemos incluir entre el código HEAD de nuestra página web, o mejor aún, incluirlo en los ficheros .js que nuestra web utiliza.
<!-- SCRIPT CONTROL DE COOKIES -->
<script type="text/javascript">
function controlcookies() {
// si variable no existe se crea (al clicar en Aceptar)
localStorage.controlcookie = (localStorage.controlcookie || 0);
localStorage.controlcookie++; // incrementamos cuenta de la cookie
cookie1.style.display='none'; // Esconde la política de cookies
}
</script>
La segunda parte incluye un código CSS que podemos variar para adaptarlo a la estética de nuestro portal y que hace la animación del aviso. He hecho especialmente complejo este código incluyendo algunas funcionalidades de animación de HTML5 pero cualquier webmaster podrá adaptarlo de forma sencilla. Este código también lo incluiremos en el HEAD de la página o bien, mejor, en el CSS de nuestra web.
<!--- Codigo para la política de cookies-->
<style type="text/css">
/* CSS para la animación y localización de los DIV de cookies */
@keyframes desaparecer
{
0% {bottom: 0px;}
80% {bottom: 0px;}
100% {bottom: -50px;}
}
@-webkit-keyframes desaparecer /* Safari and Chrome */
{
0% {bottom: 0px;}
80% {bottom: 0px;}
100% {bottom: -50px;}
}
@keyframes aparecer
{
0% {bottom: -38px;}
10% {bottom: 0px;}
90% {bottom: 0px;}
100% {bottom: -38px;}
}
@-webkit-keyframes aparecer /* Safari and Chrome */
{
0% {bottom: -38px;}
10% {bottom: 0px;}
90% {bottom: 0px;}
100% {bottom: -38px;}
}
#cookiesms1:target {
display: none;
}
.cookiesms{
width:100%;
height:43px;
margin:0 auto;
padding-left:1%;
padding-top:5px;
font-size: 1.2em;
clear:both;
font-weight: strong;
color: #333;
bottom:0px;
position:fixed;
left: 0px;
background-color: #FFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition: bottom 1s;
-webkit-transition:bottom 1s; /* Safari */
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
z-index:999999999;
}
.cookiesms:hover{
bottom:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute;
left:1%;
top:-30px;
font-size:15px;
height:30px;
padding-left:25px;
padding-right:25px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
}
/* Fin del CSS para cookies */
</style>
Por último incluiremos este pequeño código en el BODY para tener la marquesina flotante para indicar nuestra política de cookies.
<!--Código HTML de la política de cookies -->
<!--La URL incluida es la parte que se ha de modificar -->
<div class="cookiesms" id="cookie1">
Esta web utiliza cookies, puedes ver nuestra <a href="tu-url-donde-explicas-la-politica-de-cookies">la política de cookies, aquí</a>
Si continuas navegando estás aceptándola
<button onclick="controlcookies()">Aceptar</button>
<div class="cookies2" onmouseover="document.getElementById('cookie1').style.bottom = '0px';">Política de cookies + </div>
</div>
<script type="text/javascript">
if (localStorage.controlcookie>0){
document.getElementById('cookie1').style.bottom = '-50px';
}
</script>
<!-- Fin del código de cookies --->
Tienes que crear una página a donde apuntar la política de cookies donde informas de las cookies que estás utilizando. La mía por ejemplo, es esta.
Otras formas de meter el código
Para webs que utilicen un CMS como WordPress podemos estar variando la plantilla de tanto en tanto y modificar los diferentes CSS, JS y tocar el fichero PHP de turno para meter el código puede ser muy engorroso, una forma sencilla de conseguir que cualquier plantilla siempre incluya nuestro código de cookies es copiar los tres elementos de código y colocar un Widget de texto libre/html con él en una posición permitida por la plantilla. En Joomla podemos hacerlo con un plugin de HTML que ubicamos en una posición que cargue correctamente, en este caso lo copiaremos y pegaremos sin tener ningún editor activado y si es posible con el usuario de SuperAdmin para evitar problemas.
Badget “comedor de galletas”
En el caso de mi blog hay un pequeño “extra”, si aceptas las cookies permanentemente tendrás un badget de comedor de galletas en la parte derecha de mi blog. Es un pequeño ensayo de “gamificación” que aún estoy perpretando.
Muy bueno, hacerlo responsive sería lo máximo
Muchas gracias Crack, me has ahorrado un montoooooon de curro ;)
Amifo mio esta estupendo realmente lo utilce y me parecio genial , gracias por tu aporte realmente simple, rapido , sencillo y util. Un abrazo
Muchas gracias, me ha sido de mucha utilidad. Lo he personalizado un poco para ponerlo en la parte superior y para que se viese correctamente en dispositivos móviles he añadido al css unas líneas con @media (max-width: 480px) http://www.patchworkcerezo.com/
Lo que echao en falta es que quien acepte no volviese a ver el mensaje, ¿cómo podría adaptarlo para eso?
Gracias
Acabo de implementarlo en blogger insertando un Widget de texto libre/html como señalas en el artículo y funciona a las mil maravillas. El CSS fácilmente configurable. Muchísimas gracias. Un saludo.
¡Muchas gracias por las indicaciones! Me gustaría saber si después de aceptarla, podríamos no volver a ver la información de la política cuando volvemos a entrar en la página. Saludos.
GRACIASSSSS!!!!!!
¡¡¡Genial!!! Muchas Gracias
Gracias por compartir!
El problema que me encuentro es que pese a aceptar el uso de Cookies ahora no instala ninguna. Voy a seguir investigando…
He actualizado el código:
Ahora tiene elementos responsive, y al aceptar el uso de Cookies la “política de cookies” queda ya de inicio parcialmente oculta (solo queda el div 2 con la pestaña, si alguien no lo quiere, puede, simplemente eliminar este div del código HTML al introducirlo).
Alex, sobre lo que me comentas mira tu navegador, seguramente tengas bloqueada la aceptación de cookies. El código lo único que hace es introducirte una cookie de aceptación en tu navegador que evita que republique el código, no actúa nada más, si el resto de cookies que actúan en tu web no cargan, no tiene que ver con mi código ya que no actúa a ningún nivel en la aceptación o no de cookies tuyas o de terceros. El código lo que hace es “informar” o “ocultar la información” sobre la política de cookies cuando esta ya se acepta.
Fantástica aportación, gracias por compartirla José. Entiendo que esta solución no bloquea la carga de cookies hasta aceptar la política y condiciones, si no que simplemente hace más visible el aviso, ¿sí?
Hola, antes de nada darte las gracias por el código.
Lo primero decir que no tengo mucha idea de programación web. Tengo una página el php nuke. He modificado uno de los php con los que se cargan la página (header.php) con tu código y aparece correctamente el aviso, pero al dar al botón de aceptar no desaparece.
¿Qué estoy haciendo mal?
Gracias
Pepe:
No bloquea ninguna cookie ni antes, ni después de la aceptación de la política de Cookies, la ley de cookies obliga a informar de las cookies utilizadas y permite la aceptación implícita. Hacer un script que bloquee la aceptación de cookies es algo que va más allá de mi capacidad y las soluciones que he buscado no son genéricas (hay plugins para WP, otros para Joomla, etc…) y no son fáciles de poner en cualquier tipo de desarrollo.
Speedfroggy:
No conozco PHP-Nuke, así que te daré una orientación general si puedes pon la función controlcookies() en el fichero de funciones de JS que invoca tu plantilla, será la manera más elegante de ponerlo y te recomiendo que la parte de “HTML” la pongas en algún plugin o en el footer antes de finalizar el
Hola, perdona que vuelva a molestar.
He creado un HTML simple y he incluido lo siguiente
He copiado el código 1 y el 2
He copiado el código 3
Y me hace lo mismo. El div aparece ya desplegado y cuando le doy a aceptar no hace nada.
Ya te digo que soy un ignorante total en programación Web ;-(
Muchas gracias y perdona la molestia
En el mensaje anterior se ha comido las etiquetas “HTML”
Quería decir que el código 1 y 2 lo he copiado entre las etiquetas “HEAD” y el código 3 lo he copiado dentro de la etiqueta “BODY”.
Hola,
Yo después de tiempo buscando he encontrado esta solución, no hay que saber nada de programación:
http://lssi.trianguloesferico.es/
Rebs:
Respetando todas las soluciones que haya, la solución que plantean no es personalizable si no pagas (mi código lo puede tocar el que quiera, lo puede personalizar, adaptar y darle las vueltas que crea).
Por otro lado, por lo que he mirado sirve sólo para la cookie de Google Analytics.
Speedfroggy:
Puede que lo estés poniendo en un espacio que se zampa el JS, si me envías la URL lo puedo mirar con las herramientas de webmaster del Mozzilla.
Hola,
gracias por la publicación, me está resultando muy útil. Sin embargo, tras hacerlo tal cual como lo explicas, a mí la pestaña se me queda siempre levantada, es decir, siempre me queda visible el texto de “Este sitio web usa cookies…” ¿A qué puede deberse?
Y otra pregunta, ¿qué cambios deberían realizarse en el código para que en vez de aparecer abajo apareciera arriba?
Muchas gracias y disculpa las molestias :)
Saludos,
Mire
Mire:
Lo que te quede visible siempre “Este sitio web usa cookies…” puede producirse en que el código JavaScript no es interpretado correctamente (el código genera una cookie si se acepta y una vez aceptado ya fuerza a que no aparezca el texto). Si me das la URL de tu sitio podré mirarlo con las herramientas de debut del Firefox.
Sobre lo que comentas, tocando el CSS un poco bastante, por ejemplo, en lugar de la posición de la clase cookiesms ir indicada por bottom = 0px; debe hacerse con top = 0px; igual que con las animaciones, el div secundario, etc… con un poco de trabajo lo puedes adaptar rápidamente.
Muchas gracias por tu rapidez en contestar :)
¡Claro! La url es http://www.maquinasyherramientasonline.com.
He cambiado todos los “bottom” por “top” y me ha quedado al final un poco extraño, aunque sí que se ha puesto arriba. Si entras en la web verás lo que te digo. Ahora solo me faltaría girar la pestaña de Política de cookies +, que como ves está al revés.
Gracias por tu ayuda.
Mire
Mire:
En tu código HTML tienes metida una versión más antigua que la que tengo publicada:
<div class="cookiesms" id="cookie1"> Este sitio web usa cookies, puede ver la política de cookies, <a href="./privacy.asp" rel="nofollow">aquí</a>. Por favor, si está conforme haga clic en Aceptar. <button onclick="controlcookies()">Aceptar</button> <div class="cookies2">Política de cookies + </div> </div> <script type="text/javascript"> if (!localStorage.controlcookie>0){ cookie1.setAttribute("style","animation: desaparecer 5s;-webkit-animation: desaparecer 5s;"); } </script>En cambio la nueva es esta:
<div class="cookiesms" id="cookie1"> Esta web utiliza cookies, puedes ver nuestra <a href="tu-url-donde-explicas-la-politica-de-cookies" rel="nofollow">la política de cookies, aquí</a> Si continuas navegando estás aceptándola <button onclick="controlcookies()">Aceptar</button> <div class="cookies2" onmouseover="document.getElementById('cookie1').style.bottom = '0px';">Política de cookies + </div> </div> <script type="text/javascript"> if (localStorage.controlcookie>0){ document.getElementById('cookie1').style.bottom = '-50px'; } </script> <!-- Fin del código de cookies --->Muchas gracias, Jose. Ya está solucionado.
Seguiré siguiendo tus publicaciones :) ¡Gracias!
Hola, estupendo post y script, me da un error en la línea 5 al crear el archivo cookies.js concretamente error de sintaxis al editarlo con dreamweaver en esta línea:
localStorage.controlcookie = (localStorage.controlcookie || 0);
No sé por que puede ser…Funciona perfecto pero al darle al botón aceptar no desaparece ni hace nada
Arreglado, me sobraba la línea de apertura y cierre del script.
al crear el archivo cookies.js
Funciona perfecto. Gracias Jose.
Hola que tal!..está genial tu código..muchas gracias.
luego posteare las web donde irá XD
Me ahorraste mucho tiempo. Gracias.
Muchas gracias, por el codigo…!!
Me pasa lo que alguno… se me queda fijo, y no funciona el botón aceptar…
http://internetseguro.es
Muy interesante esta solucion.
En firefox y chrome funciona perfecto, pero en IE 11 me sale una advertencia: internet explorer no permitió que esta página web ejecutara scripts o controles activex en el equipo. Me pregunta si deseo permitirlo le digo que si, pero aun asi el boton aceptar del script no funciona y se ve lo de la politica todo el rato.
Gracias.
Perfectoooooooo, funciona de maravilla!!! Solo decir que en la tercera parte, el codigo
da fallo y lo tengo que borrar, supongo que es que tiene que estar dentro del script, pero tu lo escribistes fuera.
Por lo demás, genial!!!
“Fin del código de cookies” Es la parte del texto que tenía que eliminar :)
Perfecto, muchas gracias!!
Muy buena explicación, me ha sido de gran ayuda. Pero tengo un problema como a muchos, se me queda fijo el aviso. http://www.hidraulica-bomel@hotmail.com
perdón la web sería, http://www.hidraulica-bomel.com
Muchísimas gracias, era algo que me preocupaba muchísimo! Mil gracias!
Perfecto. Después de Googlear un montón este código me ha servido, y ha sido el más claro que he encontrado. Lo he modificado para que al cabo de “X” segundos se vuelva a ocultar (bajar) la barra.
Lo único que me falta es que cuando se pulse en Aceptar la barra no salga más, sin embargo me sale en todas las páginas se pulse o no el botón. Si me pudieras ayudar te lo agradecería.
Gracias. Un saludo!
Hola antes de nada agradecerte el trabajo y las respuestas.
Te planteo una duda, he introducido el código en mi web que utiliza un CMS en un apartado que tiene precisamente para eso, para introducir código, pero hay algo que no se solucionar.
La web se adapta al dispositivo que la visita pero la barra de cookies no, cuando entro a la web con un movil por ejemplo la barra no se adapta y le da problemas a la gente, te agradezco si tienes un hueco que me digas que puedo hacer.
La web es esta por si quieres echar un vistazo : http://www.memeo.org
Gracias de antemano.
Por el momento lo he cambiado por otro porque era muy engorroso al no funcionar correctamente pero si me decís como lo puedo arreglar os lo agradezco.
Un saludo.
Muchas gracias, buen trabajo, y has solucionado mi falta de conocimientos sobre esto.
Hola intento implementar tu codigo en mi web y me funciona a la perfección cuando copio el codigo del js y del css en el head. Pero me deja de funcionar cuando en vez de pegar el js en el head guardo el codigo js en un archivo cookies.js y este en la carpeta js de la raiz; en el head pongo el enlace . Por lo que veo el javascript falla al cargarse cuando esta en un archivo externo a la pagina. Alguna idea? Muchas gracias
Arreglado, me sobraba la línea de apertura y cierre del script.al crear el archivo cookies.js
¿Obliga la ley a ponerla en cada una de las pestañas de las que se componga tu web? o simplemente basta con la index.
Gracias por el aporte. Buenísimo :D
Roberto Alonso ha comentado: “Lo he modificado para que al cabo de “X” segundos se vuelva a ocultar (bajar) la barra.”
¿Podrías indicarnos por favor cómo lo has hecho para que todos podamos aplicar esa mejora?
Gracias…y gracias tambien a Jose A. Rodriguez por el código.
Hola! Muy bueno el código. Tampoco encontraba por ningún lado algo que pudiese editar fácilmente y adaptar a mi gusto.
Lo único que no me funciona la animación, me aparece el div desplegado desde el principio y no se muy bien por qué. Seguiré mirando a ver si me he cargado algo (aunque no he modificado mucho aún) pero ¿a alguien le ha pasado algo similar?
Al final lo resolví sola. Resulta que al copiar el código completo se me sustituían algunos caracteres (comillas principalmente) por sus códigos html y no se interpretaba bien el código entero.
También he conseguido modificarlo para que una vez que se acepten las cookies, no vuelva a mostrarse el mensaje nunca más. Para el que esté interesado son solo tres líneas:
Sustituir
Política de cookies +
Por lo siguiente
Política de cookies +
Y también
if (localStorage.controlcookie>0){
document.getElementById(‘cookie1’).style.bottom = ‘-50px’;
}
Por esto otro:
if (localStorage.controlcookie>0){
document.getElementById(‘cookie1′).style.display=’none’; // Esconde la política de cookies
document.getElementById(‘cookie2′).style.display=’none’; // Esconde la política de cookies
}
Un saludo y gracias de nuevo por la ayuda ;)
Muchas Gracias, es simplemente perfecto, sencillo y efectivo . Y lo mejor es que cumple la ley de Cookies y encima es gratis. Más no se puede pedir, y además das soporte ..!!! y gratis.. !! , estoy sin palabras. Lo tengo instalado aqui y cumple a la perfeccion http://www.t-cuido.es
Excelente post!!! Funciona genial!
Gracias!
Llevo unos meses con la programación personal de webs. Y desde que salio el tema de las cookies estoy intentando interpretarlas y el post els genial y me funciona correctamente ahora solo me falta adaptarlo a mi web.
Pero mi gran duda es que, siempre se habla de que el usuario al aceptar las cookies, se genera un pequeño archivo con toda esa información (idioma, país, inicio de sesión, características de su navegador, información de uso de nuestra Web, etc.), así como webmaster donde puedo ver yo ese archivo si se genera en el pc del usuario para adaptarme a la necesidades del usuario??
Muchas gracias por este excelente post!!!
Muchas gracias, reutilizar pequeños (o grandes) codigos como este quita mucho trabajo.
Referente a: “si después de aceptarla, podríamos no volver a ver la información de la política cuando volvemos a entrar en la página” simplemente hay que crear una session con ajax en el boton aceptar y si la session esta inicilaizada no cargar el código.