viernes, 25 de octubre de 2013

Poner aviso sobre el uso de cookies en mi web


¿Cómo poner un aviso sobre el uso de cookies propias y de terceros en nuestra web?
Tras la inclusión de esta nueva ley son muchas las páginas web que ya se han adaptado a la legislación y muestran un aviso sobre el uso de cookies propias y de terceros en su web. En este blog te presentamos una manera sencilla de incorporar este mensaje en tu web sin tener que poner patas arriba tu diseño y contenidos
Incorporarlo en tu web es muy sencillo tanto si se trata de una web desarrollada solo en HTML como si utilizas PHP para su desarrollo. También es muy sencillo de incorporar a páginas que se hayan desarrollado con Joomla o similares


Para aquellos que lleguen a este blog con prisa puden descargarse el código PHP, HTML y todos los recursor del siguiente enlace:
También puedes ver con tus propios ojos la página de ejemplo en: http://www.suformulario.com/blog/avisocookies/index.php

AVISO IMPORTANTEEn el caso de que estéis usando un servidor en vuestro equipo local (EasyPHP, Wimp, Apache a secas o cualquier otro servidor) no  funcionará el botón de "Aceptar y ocultar".  Solo falla ejecutando desde vuestro ordenador local, una vez que lo instaléis o subáis a un servidor con DOMINIO podréis comprobar que funciona a la perfección. 

Las cookies son validadas contra un dominio (http://www.suformulario.com por ejemplo), cuando ejecutas un servidor local, no dispones de dominio, certificado ni acridetición que indique al navegador que estás usando que la página es real, existe y tiene unas propiedades. 
Cuando el usuario pincha sobre "Aceptar y ocultar" nuestra web instala en el PC/Ipad/Teléfono/etc... del cliente/usuario una cookie (totalmente inofensiva). Cada vez que el usuario acceda nuestra web, el código que vais a copiar comprobará si ya existe esa cookie en su equipo. En el caso de que exista no mostrará más el mensaje.

Pásate por nuestra página de google+ para conocer las últimas novedades disponibles en nuestra web: +suformulario com 
El código publicado en este blog hace uso de la librería jquery de javascript.
Código PHP: (avisocookies.php)


<!-- Es necesario importar la hoja de estilos 'avisocookies.css', la librería 'jquery.js' y los recursos -->
<?php
$rutaRelativa = ".";
$param = "off";
$hayCookie = false;

//Controlamos si el usuario ha pulsado sobre la opción de aceptar de la capa emergente
if (isset($_POST["aceptar_cookie"]) && $_POST["aceptar_cookie"] != "")
   $param = $_POST["aceptar_cookie"];

if(!isset($_COOKIE["cookieaceptada"]) && $param == "acepta")
{
   //La cookie Caduca en un año
   setcookie("cookieaceptada", $param, time() + 365 * 24 * 60 * 60, "/", "suformulario.com", 0);
   $hayCookie = true;
   $retornoJson["resultado"]= array("ok"=>$param);
   echo json_encode($retornoJson);
}
else if(isset($_COOKIE["cookieaceptada"]))
{
   //Si hay cookies
   $hayCookie = true;
}
else
{
   $hayCookie = false;
}

//Si este valor es false, entonces volvemos a motrar la capa con el aviso
if (!$hayCookie)
{
?>
<script type="text/javascript">
<!--
function cerrarCookie()
{
  //Ocultamos la capa poco a poco
  $("#avisocookie").toggle("slow");
}

function mostrarCookie()
{
  //Mostramos la capa poco a poco
    $("#avisocookie").show("slow");
}

function aceptarCookie()
{
  cerrarCookie();
  $.ajax({
     url: "<?php echo $rutaRelativa;?>/avisocookies.php",
     data: "aceptar_cookie=acepta",
     contentType: "application/x-www-form-urlencoded",
     type: "POST",
     success: function(retorno){
     try
     {
        if (retorno == null || retorno == "")
            mostrarCookie();
     }
     catch (e){
       alert(e);
       mostrarCookie();
      }
     }
  });
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="<?php echo $rutaRelativa;?>/css/avisocookies.css">
<div id="avisocookie">
  <div class="cpMSGcookies">
     <div class="mCookie1"><div class="mCookie2"><div class="mCookie3"><div class="mCookie4"><div class="mCookie5">
      <span class="textocookie">El sitio web suformulario.com utiliza cookies propias y de terceros para poder ofrecerte una mejor experiencia de navegaci&oacute;n, recordar tus preferencias y mejorar constantemente seg&uacute;n los h&acute;bitos de navegaci&oacute;n.<br/>
Si sigues navegando sin cambiar la configuraci&oacute;n, aceptas el uso de cookies en nuestro sitio.</span>
     <div class="btnAceptarCookie">
          <input type="button" value="Aceptar y ocultar" id="aceptarCookie" onclick="aceptarCookie();"/>
     </div></div></div></div></div></div>
     </div>
     <div id="cerracookies" class="cpMSGcerrarcookie">
       <img alt="Cierra el mensaje emergente" src="<?php echo $rutaRelativa;?>/img/cerrar_ventana.png" onclick="cerrarCookie();" style="cursor:pointer"/>
     </div>
</div>
<?php }?>
<!-- Fin del fuente -->

Si copias y pegas este código, no funcionará correctamente ya que necesitas su hoja de estilos para poder visualizarlo bien (*.css). Puedes descargarte todos los fuentes de pinchando aquí.

El ejemplo que te puedes descargar tiene fondo gris claro y bordes gris oscuros. Puedes cambiar los colores a los que te plazcan, tan solo tienes que modificar las siguientes entradas del fichero avisocookies.css:

-- En esta entrada puedes cambiar el borde de la capa, dentro de recursos hemos incorporado 3 bordes más. Si quieres puede crear tu propio borde o bien eliminarlo
.cpMSGcookies, .cpMSGcookies .mCookie1, .cpMSGcookies .mCookie1 .mCookie2, .cpMSGcookies .mCookie1 .mCookie2 .mCookie3 {
background:url('../../estatico/img/redondoG.png') transparent no-repeat;
}

-- En esta entrada puedes cambiar el color de fondo. Tanto el color de fondo como el color y tamaño del borde deberían de encajar con la entrada anterior.
.cpMSGcookies .mCookie1 .mCookie2 .mCookie3 .mCookie4, .cpMSGcookies .mCookie1 .mCookie2 .mCookie3 .mCookie4 .mCookie5 {
background-color:#F2F2F2;
border:3px solid #777777;
}


Otros elementos que te pueden ser útiles para tu web, blog, foro, red social o cualquier otro contenido son los formularios (Formulario de contacto, reserva, compra de artículos, intercambio, etc...). A través de www.suformulario.com puedes configurar todo tipo de formularios de forma gratuita.


Puedes dejar tu comentario a continuación.

Si tienes alguna duda, sugerencia o cualquier otra cuestión y no quieres registrarte puedes ponerte en contacto con nosotros a través del formulario de contacto de nuestra web http://www.suformulario.com/?contactar=yes

Si te gusta este blog, no te olvides de hacer +1.

No hay comentarios:

Publicar un comentario