Desde el pasado año 2013 hemos visto como practicamente todas las páginas web de internet iban incorporando paulativamente un mensaje advirtiendo sobre la política de cookies del site en el pie de página o en la cabecera.
Esto es debido a la llamada «Ley de Cookies», una ley que pretende regular el uso y seguimiento que se hace de las cookies. Mejor dicho, más que regular, quieren que el usuario sea consciente de lo que ocurre. Puedes leer más información sobre la ley aquí
Con unas sanciones bastante altas, ha habido que ponerse manos a la obra para añadir el mensaje necesario. Una tarea bastante sencilla de realizar y que resultará más sencilla todavía con este pequeño tutorial.
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.
1 2 3 4 5 6 7 |
<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
1 2 |
<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 |
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(); } } $(function() { var visit=GetCookie("cookies_surestao"); if (visit==1){ popbox3(); } }); 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.
¡Perfecto! Me viene fantástico este tutorial
Buenos días:
¿Este tutorial es válido también para páginas web hechas con Joomla 2005-2006?
Muchas gracias,
Hola Belén, para CMS como Joomla o WordPress existen complementos o plugins ya pensados para estas plataformas.
Muchas gracias por el aporte, la verdad es que es muy bueno
Tengo un ligero problema. no se me hace Responsive y por tanto no se me en el móvil.
El DIV lo he puesto después del Footer y antes del cierre del Body.
Tampoco me cierra el aviso cuando le das a cerrar, pero en cambio si que puedo ir a la página de cookies.
¿Estoy haciendo algo mal?
Gracias Endika!
Ponme por aqui tu código para poder revisar y te echo un cable
Hola Jose, a mí tampoco me deja cerrar el aviso. ¿Puedes echarme un cable?
¡Claro! Ponme por aqui el código que tienes o envíamelo a info@kidoestudio.com
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.
Más información
X Cerrar
hice una comparación y se ve idéntico y sin errores igual al suyo. Yo uso Blogger, no se si habrá algo que tenga que ver con eso, el link de más información si se ejecuta muy bien pero no cierra el recuadro.
Aparentemente funciona correctamente. Dando al botón de «Entendido» se cierra sin problemas.
A mi me pasa igual, con este código no se cierra el aviso. Hay un error en el código?
Gracias!
Hola Jose, me ha servido de mucho tu aporte, el código es muy claro y ligero. Tengo un problema que no consigo resolver en el código, cuando intento modificar la expiración, no me funciona. No consigo que la cookie pase de la sesión del ususario. Cómo podría hacerlo para que la cookie caduque al año? Muchas gracias, Saludos.
Muy buenas,
a mi me ocurre lo mismo no me cierra el mensaje, soy novato en esta materia y me gustaría por favor me echases un mano, primero trabajo con Dw cs6 y el scrits lo e insrtado entre los head y el código en el Body además de el código css en su sitio, por favor como podría hacer o modificar para que al darle a aceptar se me borrase el mensaje?.
Muchas gracias de antemano, un saludo.
excelente post de ayuda.
Hola! He copiado y pegado el código pero cuando lo pruebo me salta este error en la consola:
aceptar_cookies is not defined onclick
Que puede estar fallando?
Muchas gracias. El código funciona fenomenal.
¡Estupendísimo!
Muchas gracias 🙂
La función getCookie, solo funciona si tienes una cookie en tu página, si la página tiene más de una cookie no funciona.
No funciona el codigo, lo he copiado tal y como lo tienes y no cierra cuando le das a la x para aceptar la politica de cookies.
Revisa lo que has puesto y pon el codigo para que funcione, si no no sirve este turorial como tantos otros que existen en la web.
Hola Jose A, me puedes ayudar??? tengo una web en wordpress, pero es de las que son gratuitas y están en su servidor, es decir de las de wordpress.com no de wordpress.org, he mirado muchas maneras de poner la política de cookies pero no puedo instalar ningún plug-in ni modificar nada de código. Sabes alguna?
Muchas gracias de antemano.
Saludos
Gracias por compartir esta información
me funciono de primera
Magnífico, fácil y sencillo.
funciona perfecto!! mil gracias Jose
Al principio me pasaba loo que dicen arriba, no cerraba! pero muy amablemente Jose encontro mi eror.
Fijarse bien la ruta del scrip y donde ponen el .js en el servidor!!! ese fue mi error!
Lo aclaro por si alguno otro le pasa!!
Saludos!!
No logro averiguar donde situar las dos líneas javascript. Una mano?
Gracias por compartir el tutorial, es de gran ayuda.
Mira lo he logrado colocar después de varios remiendos al script, css y html, ¡excelente! lo integre hasta con color que combinará y me mola de maravilla, lo único que me gustaría saber por que no ejecuta la acción de cerrar el warning de uso de cookies dándole al botón [X Cerrar] o mejor dicho al hypertexto para ejecutar esa acción. También te agradecería saber cómo reducir los costados (izq, der), para dejar simétricamente al cuerpo de mi blog.
Saludos desde Panamá…
Lionel
El problema aparece cuando la web es responsive.
El mensaje de aviso se corta. ¿Como hacer para que se ajuste a todos los dispositivos?
Ya esta solucionado !!
He copiado parte del CSS, que usa esta web:
border: 0;
font-size: 10pt;
margin: 0 auto;
padding: 5px 0;
text-align: center;
width: 100%;
z-index: 9999;
Me pregunto como le hizo para hacer el que el botón de cerrar el cookie ejecute o válgase la redundancia cierre.
Hola Lionel, dime la url de la web donde tengas implementado el código y le echo un vistazo para ayudarte. Un saludo!
Bueno , intente lo que explica +Salvador, lo único nuevo fue dejo el margen inferior y aún no se cierra al darle click.
A mi me funciona en firefox y en IE, pero no en chrome. Podrias decirme como solucionarlo? Me pasa lo que dicen varios comentarios, que al pulsar el boton cerrar, no hace nada, ni cierra, ni guarda la cookie. He probado a incluir el codigo javascript debajo de la capa, y tampoco. No se como arreglarlo, la verdad.
Hola David, yo tuve el mismo problema que tu. El problema de que no te funciona en chrome está en que está haciendo las pruebas en local es decir, sube la página que tengan los códigos al servidor y veras que ahora si funciona en chrome.
Hemos añadido para descargar los ficheros originales funcionando correctamente para que podáis descargarlo y utilizarlo sin problemas. Con Chrome en local no funciona correctamente, ya que no guarda las cookies, pero subido a un servidor funcionará sin problemas.
Hola,
no me falla el código pero al ponerlo en el index y en el resto de las páginas de mi web no hace lo que debería.
Si estoy en el index y cierro el mensaje, al actualizar se vuelve a mostrar el mensaje. Esto no debería ser así ya que mi navegador contiene la cookie. Como lo he puesto en el resto de los .php de la web, al pasar de una a otra me sale siempre el mensaje aunque lo haya aceptado en la página anterior.
He comprobado que la cookie en el navegador se ha guardado correctamente.
Necesito resolver esto rapidamente sino tendré que buscar otra opción.
Gracias.
Hola Borja.
Dinos la página donde lo has puesto para que podamos echarle un vistazo y ayudarte.
Un saludo!
te la puedo enviar a un email?
Claro! Escríbenos a info@kidoestudio.com
Enviado. Gracias!
Muchísimas gracias por responder tan rápido y resolver el problema.
Un saludo!
Hola!! Ante todo muchas gracias por el aporte. Tengo un problema parecido al de Borja. Tengo varios html y el mensaje de cookies aparece en todos, al hacer clic en uno de ellos, tan sólo deja de aparecer en el index, en cambio en el resto continúa apareciendo al cambiar de uno a otro aunque lo acepte.
Te agradecería un montón que me echases un cable ya que no sé donde puede estar el error!!
Muchas gracias de antemano.
Hola Raquel. Dinos la página donde has añadido el código para poder echarle un vistazo y ayudarte.
Un saludo!
Hola! ¿Tendrá algún código con el que se bloquee la página hasta que dé clic en «Acepto uso de cookies»? ¡Gracias!
Excelente artículo, pero no logro que se visualice en mi web alguna ayuda porfavor-> http://www.muchileans.cl
Hola!
Una pregunta tonta. ¿Hay que insertar el código de las cookies en todas las páginas del sitio o basta con hacerlo sólo en el index?
Gracias!
Hola Jose Antonio,
Tengo el mismo problema que otro usuario, llamado Borja. Todo funciona bien, pero tras aceptar el aviso de cookies, cada vez que abro otra pagina o cargo la misma, me sale siempre el aviso.
Gracias de antemano.
Hola, Jose, tengo una web HTML5 (no es CMS, no es dinámica) y mi duda es si debo poner el código solamente en la página de inicio o lo debo implementar en todas las páginas
Hola Candi. Depende de si quieres que el mensaje aparezca en todas las páginas o no. Yo te recomiendo que sí, que lo añadas para que se muestre en todas las secciones de tu web. Un saludo!
Gracias Jose, lo haré así, en todas las páginas. Gracias de nuevo y felices fiestas
Hola!
Por mucho que trasteo, no consigo darle forma.
Y como es una web responsive, desde el móvil ni se ve!
Podrías por favor echarle un vistazo?
Creo que la ruta del scritp es correcta… =(
Te envío la web por email.
Muchísimas gracias y feliz navidad!
Hola Jose, no soy programador y tengo contratada una web con 1and 1, el caso es que no tengo ni idea de códigos,por eso estoy con ellos, aún así soy un emprendedor que tiene su web paralizada y no la puedo hacer pública por culpa de la ley de cookies. Te voy a pedir un favor, pues por más que lo he intentado navegando por webs donde hay códigos no lo consigo. Descargo dichas carpetas comprimas y no más… ¿puedes darme el código completo y seguido, sólo para copiar y pegar?, a modo zoquete. Te doy el nombre de mi web. Si lo haces, te estaré muy agradecido, y si no, chapoooo por ti, pues he vuelto por aquí por ser el site mas cercano, más de «tu a tu» que he encontrado y es la primera vez que me dirijo de estas formas . Mi web es manicuraadomicilio.es…..Gracias!!. Un saludo de un malagueño torpe.
Hola Carlos.
Este tutorial está hecho para gente que con un mínimo de conocimientos en programación pueda implementar el mensaje en sus webs. Si no tienes mucha idea de código, lo único que te puedo decir es que nos escribas a info@kidoestudio.com y nos comentes las cosas que necesites mejorar en tu web y vemos como te podemos ayudar.
Un saludo!
Buenas, el script esta genial pero si no acepto la cookies y cambio de pagina desaparece la ventana para aceptar la cookies. Creo que mientras no acepto las cookies debe permanecer el mensaje de las cookies hasta que acepte. No se si me he explicado bien. Saludos
Genial
Ha sido de gran ayuda. Una explicación clara y con acceso a los recursos.
He cambiado en la caja infobox3 height por min-height y de este modo se agranda con pantallas más pequeñas.
muchisimas gracias por el post!!! te sigo
Hola mi pagina esta creada con wix, esta plataforma tiene su propia aplicacion de cookies pero con google a cada rato me muestra error, y en ocaciones no se muestra. como puedo incluirle una nueva o aparte o como tu lo dices, te lo agradeceria por tu ayuda
Hola:
He querido replicar este proyecto pero me di cuenta que el .php no se encuentra disponible (ni en esta explicación ni en la colección de ficheros que se pueden descargar): ¿qué función debería tener este fichero?
Muchas gracias por el tutorial.
Saludos cordiales.
Hola de nuevo, José Antonio:
Otra cosa que me di cuenta mientras intentaba replicarlo, es que seleccionaba tu código pero no se veía lo seleccionado. Sí se copia pues pude pegarlo en el entorno de programación.
Tampoco funcionan los botones que se encuentran en la parte superior de cada comentario para poder pegar en el portapapeles lo seleccionado, ni tampoco funciona el botón que oculta las líneas, ni el que convierte el texto en plano, etc.
Usé Firefox 55.0.2 – 64 bits en Xubuntu. Tampoco funciona en Google Chrome 60.0.3112.101 (Official Build) (64-bit).
Saludos cordiales.
Hola,
por que no puedo copiar el código??
tengo que escribirlo todo??!!!
hola: lo tengo implementado en esta web http://previnsa.com/webnueva/index.html y solo se ve con Firefox, con chrome desaparece tanto en local como en el servidor y además no se cierra al darle a aceptar. ¿qué es lo que falla? gracias
Hola,
tengo un problema,
no puedo cerrar el mensaje de politica de cookies,
por favor, alguna ayuda?’
Pancha
Tampoco se me cerraba y resulto que no me cargaba el cookies.js, me asegure de añadir el script antes del div id=»overbox3″ y marchando.
Ahora el problema es que al cambiar de sección desaparece el aviso aunque no haya aceptado el uso de cookies.
Gracias!!
A mi no me funcionaba tu script cookies.js y lo he adaptado a mi manera y así si que me funciona.
Lo comparto por si le interesa a alguien:
https://pastebin.com/nz664n0i
Gracias!
No conozco de javascript y necesito crear lo siguiente: un div que uso como boton invisible, el cual debe desaparecer despues de 5 segundos, llevo 3 semanas investigando en internet algun ejemplo de lo que requiero pero no encuentro, he intentado aprender algo de js pero no he logrado entender la sintaxis (soy torpe) por ello acudo a ti o a tus lectores a ver si pueden ayudarme, mil gracias anticipadas.
Muchísimas gracias por tu valiosa aportación. ¡El código funciona perfectamente!
El código funciona de maravilla!! Muchas gracias por tu aportación!!
Sencillo, claro y útil. Mi más coordial felicitación.
Hola. El código de descarga está mal, ya que tiene un bucle que hace que siempre se acepte la cookie en la primera visita. Hay que borrar el else dentro de la functión jQuery(function() {.
Por lo demás todo funciona perfectamente, muchas gracias por compartir.
Buenos días, hace bastante tiempo que coloqué este código y funcionaba perfectamente, pero llevo varios meses que cuando quieres «aceptar» el mensaje no desaparece.
¿me podéis ayudar porfavor?
Gracias! un saludo,
Hola Nerea, si no te sale el mensaje es por que aceptaste las cookies prueba a borrar la caché para que te vuelva a salir un saludo !
debes de ser mongola para no dejar copiar los codigos
Hola, tienes algun ejemplo para borrar la cookie al cerrar sesión gracias ! un saludo buen articulo !,
lo he implementado mi proyecto de grado pero me falta para cerrar sesión 😀
No funciona la opción de cerrar.