Cómo configurar la posición de cookiechoices.js
Escrito por José Manuel el lunes, 8 de septiembre de 2014 a las 2:50 pm
Si quieres pasar directamente a la información que explica cómo cambiar la posición de la barra de alerta de cookies de Google clica aquí. Inicio del artículo:
Recientemente Google publicó un pequeño código (cookiechoices.js) que permite añadir, fácilmente, la alerta de que tu sitio web usa Cookies.
Para poner este código y que se muestre a tus usuarios has de poner el archivo cookiechoices.js en la carpeta raíz de tu web. Descomprime el zip que te descargas y dale permisos de lectura al archivo .js que viene dentro (seguramente con el comando chmod 755 /ruta/a/tu/web/cookiechoices.js) y después has de añadir un código similar a este en todas tus páginas:
<script src="/cookiechoices.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
cookieChoices.showCookieConsentBar('Al usar los servicios de esta web entendemos que aceptas nuestra pol\u00edtica de Cookies',
'Entendido', 'M\u00e1s informaci\u00f3n', 'http://intercambia.net/temas/cookies#politica-cookies');
});
</script>
Seguramente tu sitio web funciona con plantillas y añadiendo este código a un archivo (por ejemplo el footer.php) se verá en toda tu web. Recuerda poner el texto que creas conveniente y poner tu url (no la de intercambia.net)
Quizás te preguntes que son los carácteres raros que ves en el texto de arriba, estos sirven para poner acentos en códigos javascript. Estas son las equivalencias entre javascript y lenguaje humano…:
\u00e1 -> á
\u00e9 -> é
\u00ed -> í
\u00f3 -> ó
\u00fa -> ú
\u00c1 -> Á
\u00c9 -> É
\u00cd -> Í
\u00d3 -> Ó
\u00da -> Ú
\u00f1 -> ñ
\u00d1 -> Ñ
Por último te explico cómo cambiar la posición que define por defecto cookiechoices.js (pegado arriba). Quizás la barra tapa algún menú y prefieres que esté abajo en vez de tocar la hoja de estilos de tu web para cambiar el tamaño de ese menú, por ejemplo. En todos los casos tendrás que abrir el archivo cookiechoices.js con un editor.
Si quieres que la barra en vez de estar pegada arriba esté pegada abajo y que no se mueva. Es decir, que cuando el usuario que visita tu web la vea siempre pegada a la parte de abajo de su navegador, haga scroll o no. Entonces has de cambiar esta línea (la número 35):
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0;top:0;padding:4px;z-index:1000;text-align:center;’;
Por esta otra:
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0;bottom:0;padding:4px;z-index:1000;text-align:center;’;
Por último, si lo que quieres es que la barra de alerta esté arriba de tu web fijada, es decir, que cuando el usuario se desplace hacia abajo la barra se quede en la parte de arriba de tu web y él la pierda de vista en el navegador, entonces has de cambiar este código (línea 34):
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0;top:0;padding:4px;z-index:1000;text-align:center;’;
Por este:
var butterBarStyles = ‘position:absolute;width:100%;background-color:#eee;’ +
‘margin:0; left:0;top:0;padding:4px;z-index:1000;text-align:center;’;
Hay que tener en cuenta que dependiendo de la hoja de estilos de tu sitio web o del navegador estas configuraciones pueden no hacer lo previsto.
Ahora, para acabar, lo que queda es que escribas tu aviso de cookies y enlaces ese texto desde el código de arriba del todo que pusiste en tu web.
Suerte!
