counter
 
 
Desde hace un tiempo comenzamos a ver como muchas páginas web estaban incorporando un mensaje advirtiendo sobre la política de cookies del sitio, el mensaje generalmente va situado en el pie de página o en la cabecera, si tienes una página web y necesitas agregar este mensaje a continuación te explicaremos de manera sencilla como hacerlo.
Tutorial para añadir botón de aceptación de cookies en una página web
Este pequeño tutorial lo puedes implementar en sitios con joomla, wordpress o en php, solo debes tener acceso a la plantilla de diseño para agregar el código necesario.
 
Este mensaje lo comenzaron a añadir las webs debido a la llamada “Ley de Cookies”, una ley en España que busca que el usuario sea consiente sobre el uso de las cookies de las páginas, por lo que principalmente lo fueron agregando las páginas web que se especializan o que tienen trafico español.
 
Sin embargo, no está demás tenerlo en tu web, ya que, aunque tu web no este enfocada para este país, es muy probable que tengas alguna visita que provenga de España y no es algo muy complicado de hacer, nosotros nos vimos en la necesidad de agregarlo recientemente.
 

A continuación, el código para la aceptación de nuestra política de cookies:

 
1. Primero vamos a añadir el código con un mensaje de advertencia con dos opciones, la primera es un enlace a nuestra política de privacidad de cookies, y la segunda para aceptar y cerrar el mensaje.
 
<div id="overbox3">
    <div id="infobox3">
    <div id="infobox">
    <div class="cookiesms" id="cookie1" style="bottom: 0px;">
Este sitio web usa cookies, puedes ver <a href="/politica-de-privacidad/">la política de cookies,</a> Si continua navegando consideramos que acepta el uso de cookies.
<a onClick="aceptar_cookies();" style="cursor:pointer;"><span class="acep_cook">Aceptar</span></a>
</div>
    </div>
    </div>
</div>


En esta zona definimos el enlace a nuestra política de privacidad o de cookies.
<a href="/politica-de-privacidad/">

2. Luego le damos el estilo que queremos, esto lo podemos hacer agregando el código a nuestros archivos .css o también añadiendo el código a antes de <body> dentro de la etiqueta <head>, si lo vas a hacer de la segunda manera debes colocar al inicio <style type="text/css"> y al final </style> para que funcione.
 
/* Inicio del CSS para cookies */

.acep_cook{

    padding: 4px;
    background: #4682B4;
    text-decoration: none;
    color: #fff;}

@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;
}
    @media (max-width: 300px) {.cookiesms{height:100px;}}
.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 */


Ahora agregamos el javascript, lo añadimos dentro de la etiqueta <head> aquí hacemos la llamada a la librería de jQuery y la llamada a un archivo llamado cookies.js que debes crear y ubicarlo en la carpeta js de la raíz de tu servidor.
 
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/cookies.js" type="text/javascript"></script>


Este javascript de cookies tiene las 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.
 
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();
    }
}
    
jQuery(function() {
    var visit=GetCookie("cookies_surestao");
    if (visit==1){
        $('#overbox3').toggle();
    } else {
        var expire=new Date();
        expire=new Date(expire.getTime()+7776000000);
        document.cookie="cookies_surestao=aceptada; expires="+expire;
    }
});
    
function popbox3() {
    $('#overbox3').toggle();
}

 
Eso es todo, ahora tenemos nuestro botón de aceptación de cookies en nuestra web que se mostrara la primera vez que un usuario ingrese a nuestra web y así cumplimos con la ley.

Aquí están los ficheros originales (descargar archivos) funcionando correctamente para que los puedas utilizar sin problemas y modificar a tu gusto, espero que les sea de ayuda.

Fuentes | joserodriguez y estudiosurestao
 
 

Escribir un comentario

Nota: Los comentarios escritos en mayúsculas o tipo SMS serán eliminados, al igual que los comentarios ofensivos o sin educación contra los lectores y/o editores de este medio.

También pueden reportar los comentarios ofensivos para ser borrados.

Código de seguridad
Refescar