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.
Muchísimas gracias! Nos ha sido de gran ayuda. Muy fácil y funcional.
Buenos dias y gracias por el aporte. Quisiera saber como hacer para que al aceptar la politica de cookies no vuelva aparecer si regreso nuevamente a la pagina donde inserté el codigo.
saludos
Muchas gracias…
Muy bueno el Post. Muchísimas gracias por ponerlo a disposición del publico y encima gratuitamente.
Al principio no se me escondía la barra al aceptar, pero revisando los comentarios ya lo solucioné.
Lo que no he podido hacer es hacer que se modifique la barra cuando veo la pagina desde el movil. Tengo una plantilla en HTML5 Responsive , se me modifica todo menos eso.
La pagina es http://totalservicios.hol.es
Un placer y muchísimas gracias
Gracias por el aporte, fácil y funcional. También me gustaría adicionar para que se oculte permanentemente al aceptar. Alguien lo ha completado ?
me a gustado mucho vuestro blog y me gustaría colaborar con ustedes aportando como he solucionado yo el problema en blogger
http://youtu.be/kiQjnEupbfg
Muchas gracias!!! Me acabas de quitar un montón de trabajo :-)
Hola, ante todo decir que mis conocimientos de programación son muy escasos. En segundo lugar agradecer tu tiempo y esfuerzo. En tercero, Houston! …tengo un problema!
He probado varias soluciones para integrar la pestaña en la web
y no consigo hacerla funcionar.
He copiado el código 1 en el BODY de la página, el 2 en el HEAD, y el .js en la carpeta de scripts alojada en el servidor.
Se me queda bloqueado en la página, aparentemente no funciona el botón aceptar, y no se quita la barra.
En algunas de las pruebas que hice conseguía que desapareciese la barra, pero al refrescar la página volvía a aparecer.
¿Alguna idea de lo que me está sucediendo, o lo que estoy haciendo mal?
Un saludo
¿Pero es que nadie ve que “DEBORA” va con V. Programador excelente pero un poco animal…
buah!!! gracias campeon, eres l mejor!!
Soy neófito en el tema, pero la verdad es que me has sacado del apuro. No te imaginas lo que había montado para cumplir con la ley. Bueno, a quien quiera reírse un rato lo invito a visitar http://www.aia-consultores.esy.es. En 1 semana la quito..tampoco soy masoquista.
Por cierto, como estoy seguro que hay muchos que sabemos poco de programar y utilizamos tu código, valdría la pena explicar cada una de las lineas de ordenes que es lo que hace…es solo una sugerencia, la verdad es que con lo que tengo…con un canto en los dientes.
En los comentarios leo que me pasaba lo mismo que a Juan Carlos, pero es que no había quitado los script en el archivo .js…es lo que pasa con los que empezamos.
Juan Carlos, así quedó mi archivo “politicacookies.js”. Yo llame el js y el css “politicacookies.*” por eso de ser original.
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
}
Muy imnportante: En tu archivo *.html o *.php donde quieres que aparezca la pestaña de cookies, tienes que tener estas referencias donde estan los css y los js, arriba del todo del archivo:
Si quieres mira mi código, dond e puedes ver tanto las lineas de css, js como el código incrustado en el BODY de la pagina de inicio de http://www.aia-consultores.com
Espero poder haber ayudado en algo y nuevamente gracias por tu trabajo Jose.
Hola! estoy un poco pez en estos temas y estoy tratando de incorporar estos códigos en mi página web. a pesar de que la primera vez que lo hice a modo de prueba pude ver resultados satisfactorios, ahora no lo consigo.
para que os resulte más fácil ayudarme, os indico lo que hago en el web creator de one.com
1. copio el primer código en el head
2copio el segundo código tb en el head (como código aparte)
3. copio el tercero en el body
cuando los copio los hago agregando “casillas de código” una para cada una de las tres secuencias.
no sé cuál es el problema para que esta segunda vez no vea el aviso flotante…
¡gracias de antemano!
Gracias por el artículo! Después de intentar implantar otras soluciones sin que fuera posible en mi web, he visto como esta cumplía su cometido a la perfección, así que la he usado en mi web.
De nuevo gracias y feliz año!
Muy bueno, me ha sevido perfectamente.
Muchas gracias.
Gracias por la entrada, es muy fácil de implementar y elegante para la Página web.
¿es código libre? ¿Lo puedo incorporar a mi web sin tener que pedir ningún tipo de permisos? Gracias y muy buen artículo
Bea:
Puedes utilizarlo allí donde creas sin ni siquiera citar al autor. Todo tuyo.
Muy bueno!
Gracias me resulto muy útil, es lo que estaba buscando :) éxitos!!!
Muy buen trabajo
Solo una pregunta…¿si quiero abrir el texto de la politica de cookies en una pagina nueva, sin menu ni barra y dimensionada que debo añadir?, todo lo que encuentro afectaria al script y no me atrevo
No podrias colgar el codigo responsive?
lo que estaba buscando hace tiempo. Algo fácil, rápido de agregar y cómodo para el visitante de mi página. Muchas gracias
Se me caen las lágrimas al ver que, por fin, alguien se queja de la dictadura de la ley de cookies. No lo digo por los que hacen webs sino por el estrés y la ansiedad que causa en un usuario este spam legislativo tiranico que provocan los mediocres del Gobierno.
No lo hacen sólo para amargar la vida a la gente, yo creo que sólo lo hacen para demostrar que ellos mandan y que la gente no es libre de hacer lo que quiera.
Además, esa ley de cookies es una chapuza y no hay quién entienda a qué se aplica y a qué no.
Copio el código y muchas gracias.
Muchas gracias por el código. Ya lo tenía implementado en mi web pero he disipado varias dudas gracias a él. Un saludo.
He visto que en algún iPhone (quizá antiguo) la animación no funcionaba al pasar el ratón por encima. Aparecía y deslizaba hacia abajo tras unos segundos, pero al pasar con el dedo por encima no se volvía a mostrar, de modo que la política de cookies, tras esos primeros segundos, no era accesible a través del aviso. No había forma de “reflotarlo”.
Por si es de utilidad para alguien, lo solucioné sustituyendo esta línea de código:
Por esta otra:
Muy buena explicacion; lo he aplicado en wordpress copiando todo en un widget (asi, a lo burro) y funciona de pelotas; gracias.
Dios! muchas gracias ya estaba cansado de esto de los cookies, ya por fin lo tengo en mi blog y gracias a ti. El único problema es que en el móvil no me aparece , puedes decirme que puedo hacer? gracias de antemano y gracias por todo. Saludos
Buenísimo, me funcionó, muchas gracias. Esto es especialmente útil para los que sabemos poco y nada de código HTML… la verdad que si es obligatorio, blogger podría establecer una herramienta para usarlo, porque veo que no soy el único que estaba bastante perdido xd
Perfecto, gran aporte!!!!
Gracias, gracias, eses lo maximo. me encanta el codi. gracias por compartirlo.
Este mensaje obligatorio sobre la ley de cookies me parece una gran perdida de tiempo y de dinero. Si sumamos lo que tarde cada ciudadano en desactivar esta mosca cojonera cuantas horas de trabajo perdidas y dinero tirado a la basura. ¿quien va a dejar de leer una pagina por los cookies, si es que son codigos que hacen parte de internet? ya todos sabemos de su existencia y si no sabemos no hace falta que se nos metan por las narices.
Muchas gracias por el codigo, muy a mi disgusto la pongo en mi site
Se debe incluir en todos los htmls de la web?
Cual es la forma más rápida de hacerlo?
Gracias por el post:)
Hola:
Al igual que le sucedía a un compañero que planteó su consulta hace algo más de un año, yo también administro una página web construida a partir de “PHP Nuke” y no he encontrado información sobre la inclusión de dicho aviso en este tipo de portales.
Si fueras tan amable, ¿podrías guiarme paso a paso sobre la manera de llevarlo a cabo?
Gracias anticipadas.
como modificar el boton “aceptar”
X Cerrar Yo lo tengo así, pero no ejecuta el botón para cerrar el letrero.
Hola:
¿Se puede poner en la parte de arriba de una web?
Si es afirmativo, ¿cómo, por favor?
Muchas Gracias, encontrar aportes asi es de agradecer.
desde bilbao con amor
infinitas gracias por tu aportación
Muchísimas gracias!!!
He implementado los códigos con éxito en mi web http://recordis.es, y acabo de publicar un post recomendando éste tuyo, y añadiendo unas cosillas (media queries, y como lo he implementado a mano en Joomla y WordPress, pues tengo el sitio con multi-instalaciones).
Gracias de nuevo!
Muchísimas gracias. Lo he puesto en mi web creada con iweb de mac y funciona casi a la perfección. El único problema es que sale solo al final de la pagina y no flotante como aqui ?¿?¿?
Muchas gracias Jose, es lo que estaba buscando. Sólo una pregunta ¿es necesario que el mensaje se muestre cada vez que entras en la página? No recuerda la respuesta una vez que aceptas? Gracias!
Gracias a este tutorial, he instalado el script de cookies en todos los formatos posibles (HTML, WordPress, Joomla y Prestashop, me falta en Drupal).
Aquí explico como:
http://recordis.es/blog/la-dichosa-politica-de-cookies/
Gracias y saludos!
Hola,
Gracias por el código, funciona estupendamente. Lo único que me está fallando es que, aunque acepte la política de cookies, el mensaje me vuelve a aparecer si reinicio la página… Me pasa en todos los navegadores y también me pasa con esta misma página tuya… ¿Qué podría estar pasando?
Gracias de nuevo y un saludo.
Hola el codigo es necesario meterlo en cada una de las paginas de la web? Si se acepta en una pagina cualquiera de la web es aceptada automaticamente en toda la web??
Es de gran ayuda este aporte, aunque es engorroso para el usuario hacer clic en aceptar si ves la web desde una pantalla de móvil. Tengo una duda, este código de políticas de cookies se debe de poner en todas las páginas o solo en la página index.