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

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.

[ACTUALIZADO 2] – Gracias a nuestro amigo Borja por reportarnos un pequeño bug en el código

¡Compártelo!

Comentarios (49)

  • Raimundo Reply

    ¡Perfecto! Me viene fantástico este tutorial

    17 febrero, 2014 at 12:54 pm
  • Belen Reply

    Buenos días:

    ¿Este tutorial es válido también para páginas web hechas con Joomla 2005-2006?
    Muchas gracias,

    13 noviembre, 2014 at 1:10 pm
    • Jose A. Vila Reply

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

      14 noviembre, 2014 at 12:19 pm
  • endika Reply

    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?

    17 noviembre, 2014 at 12:46 pm
    • Jose A. Vila Reply

      Gracias Endika!
      Ponme por aqui tu código para poder revisar y te echo un cable

      19 noviembre, 2014 at 12:03 pm
  • Cristian Reply

    Hola Jose, a mí tampoco me deja cerrar el aviso. ¿Puedes echarme un cable?

    19 noviembre, 2014 at 6:39 pm
    • Jose A. Vila Reply

      ¡Claro! Ponme por aqui el código que tienes o envíamelo a info@estudiosurestao.com

      21 noviembre, 2014 at 8:59 am
      • Lionel Reply

        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.

        29 octubre, 2015 at 3:56 pm
        • Jose A. Vila Reply

          Aparentemente funciona correctamente. Dando al botón de “Entendido” se cierra sin problemas.

          29 octubre, 2015 at 4:05 pm
  • Diana Reply

    A mi me pasa igual, con este código no se cierra el aviso. Hay un error en el código?
    Gracias!

    22 noviembre, 2014 at 11:23 am
  • A Carter Reply

    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 diciembre, 2014 at 4:38 pm
  • jesus Reply

    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.

    11 diciembre, 2014 at 6:35 pm
  • Regina Reply

    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?

    17 diciembre, 2014 at 12:39 pm
  • Miguel Reply

    Muchas gracias. El código funciona fenomenal.

    31 marzo, 2015 at 4:06 pm
  • Malyssia Reply

    ¡Estupendísimo!

    Muchas gracias :)

    23 abril, 2015 at 8:30 am
  • Carlos Reply

    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.

    28 abril, 2015 at 7:07 am
  • alberto Reply

    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.

    20 mayo, 2015 at 11:55 am
  • Yolanda Reply

    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

    26 mayo, 2015 at 9:50 pm
  • Diego Reply

    Gracias por compartir esta información
    me funciono de primera

    31 mayo, 2015 at 4:57 am
  • Agustín Reply

    Magnífico, fácil y sencillo.

    13 junio, 2015 at 5:56 pm
  • Fede Reply

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

    15 julio, 2015 at 2:21 pm
  • carlos Reply

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

    3 agosto, 2015 at 9:13 pm
  • Lionel Reply

    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

    9 agosto, 2015 at 11:56 am
  • Salvador Reply

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

    28 septiembre, 2015 at 10:19 am
  • Salvador Reply

    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;

    28 septiembre, 2015 at 10:27 am
    • Lionel Reply

      Me pregunto como le hizo para hacer el que el botón de cerrar el cookie ejecute o válgase la redundancia cierre.

      29 octubre, 2015 at 3:51 pm
      • Jose A. Vila Reply

        Hola Lionel, dime la url de la web donde tengas implementado el código y le echo un vistazo para ayudarte. Un saludo!

        29 octubre, 2015 at 3:52 pm
        • Lionel Reply

          Bueno , intente lo que explica +Salvador, lo único nuevo fue dejo el margen inferior y aún no se cierra al darle click.

          4 noviembre, 2015 at 8:51 am
  • david Reply

    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.

    2 enero, 2016 at 1:27 pm
  • isaac Reply

    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.

    18 enero, 2016 at 5:57 pm
  • Jose Antonio Vila Reply

    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.

    21 enero, 2016 at 9:13 am
  • Borja Reply

    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.

    11 marzo, 2016 at 9:22 am
    • Jose Antonio Vila Reply

      Hola Borja.
      Dinos la página donde lo has puesto para que podamos echarle un vistazo y ayudarte.
      Un saludo!

      11 marzo, 2016 at 9:26 am
      • Borja Reply

        te la puedo enviar a un email?

        11 marzo, 2016 at 9:29 am
        • Jose Antonio Vila Reply

          Claro! Escríbenos a info@estudiosurestao.com

          11 marzo, 2016 at 9:31 am
          • Borja

            Enviado. Gracias!

            11 marzo, 2016 at 9:37 am
          • Borja

            Muchísimas gracias por responder tan rápido y resolver el problema.
            Un saludo!

            11 marzo, 2016 at 9:59 am
  • Raquel Reply

    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.

    29 marzo, 2016 at 11:17 pm
    • Jose Antonio Vila Reply

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

      Un saludo!

      30 marzo, 2016 at 3:22 pm
  • Tania Reply

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

    25 mayo, 2016 at 4:20 pm
  • javiera Reply

    Excelente artículo, pero no logro que se visualice en mi web alguna ayuda porfavor-> http://www.muchileans.cl

    14 junio, 2016 at 8:03 pm
  • Esther Reply

    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 agosto, 2016 at 6:20 pm
  • jaime Reply

    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.

    11 noviembre, 2016 at 7:39 pm
  • Candi Reply

    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

    11 diciembre, 2016 at 9:39 pm
    • Jose Antonio Vila Reply

      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!

      13 diciembre, 2016 at 10:30 am
      • Candi Reply

        Gracias Jose, lo haré así, en todas las páginas. Gracias de nuevo y felices fiestas

        24 diciembre, 2016 at 12:19 pm
  • María José Reply

    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!

    28 diciembre, 2016 at 3:55 pm
  • Carlos Reply

    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.

    28 febrero, 2017 at 1:55 pm
    • Jose Antonio Vila Reply

      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@estudiosurestao.com y nos comentes las cosas que necesites mejorar en tu web y vemos como te podemos ayudar.
      Un saludo!

      28 febrero, 2017 at 2:38 pm

Deja un comentario

Tu dirección de email no será publicada.