17 febrero, 2014 Jose Antonio Vila

Política de cookies: como añadir el mensaje a tu web

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.

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).

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

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.

¡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.

Raiola Networks
Tagged: , ,

Sobre mí

Jose Antonio Vila Desarrollando webs desde hace más de 10 años. Hace mucho que dejé atrás la vida en agencias y me abracé a la vida de freelance.
🖥 Si tienes algún proyecto en mente, contacta conmigo.
📖 Si quieres leer más cosas que escribo, echa un ojo a mi web personal

Comments (79)

    • Jose A. Vila

      Hola Belén, para CMS como Joomla o WordPress existen complementos o plugins ya pensados para estas plataformas.

  1. 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?

      • 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.

        • Jose A. Vila

          Aparentemente funciona correctamente. Dando al botón de «Entendido» se cierra sin problemas.

  2. 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.

  3. 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.

  4. Regina

    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?

  5. Carlos

    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.

  6. alberto

    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.

  7. 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

  8. Fede

    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!!

  9. No logro averiguar donde situar las dos líneas javascript. Una mano?
    Gracias por compartir el tutorial, es de gran ayuda.

  10. 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

  11. Salvador

    El problema aparece cuando la web es responsive.
    El mensaje de aviso se corta. ¿Como hacer para que se ajuste a todos los dispositivos?

  12. Salvador

    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;

  13. david

    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.

  14. isaac

    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.

  15. Jose Antonio Vila

    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.

  16. Borja

    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.

  17. Raquel

    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.

    • Jose Antonio Vila

      Hola Raquel. Dinos la página donde has añadido el código para poder echarle un vistazo y ayudarte.

      Un saludo!

  18. Tania

    Hola! ¿Tendrá algún código con el que se bloquee la página hasta que dé clic en «Acepto uso de cookies»? ¡Gracias!

  19. 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!

  20. 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.

  21. Candi

    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

    • Jose Antonio Vila

      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!

  22. 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!

  23. Carlos

    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.

    • Jose Antonio Vila

      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!

  24. Paco

    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

  25. Ferran

    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

  26. 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

  27. Abelardo

    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.

  28. Abelardo

    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.

    • Adrián

      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.

  29. Victor

    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.

  30. 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.

  31. 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,

    • David

      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 !

  32. David

    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 😀

  33. Pingback: URL
  34. Pingback: power wheels
  35. Pingback: trío málaga
  36. Pingback: PGZEED

Responder a Jose A. Vila Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *