De afgelopen weken zie ik op de websites van grote uitgevers steeds nadrukkelijker waarschuwingen dat ze van cookies gebruik maken. Dat wijst erop dat de overheid begonnen is met de betreffende wetgeving te handhaven. Hoe hinderlijk die dingen ook zijn, om met de grote jongens mee te doen, moet je dus een cookie waarschuwing op je site hebben. Die kun je kopen, maar je kunt ze ook makkelijk zelf maken. Bij deze het recept, inclusief de ingrediënten.
Het eerste wat je nodig hebt om zo’n waarschuwing te maken is de mogelijkheid om zelf cookies in te stellen. Je moet immers kunnen onthouden dat iemand al een keer toegestemd heeft. Anders zeurt de site bij iedere nieuwe pagina aan het hoofd van de bezoeker. Cookies maak je met een stukje javascript, of liever gezegd, jquery, een ‘boekje’ met veelgebruikte uitdrukkingen die de taal javascript behapbaar maakt. Als je WordPress gebruikt, is jquery vanzelf geïnstalleerd. In het andere geval moet je het zelf jquery in je site stoppen. Kwestie van drie regels code knippen en plakken.
Ook het jquery cookie script staat kant en klaar voor je te wachten. Ze het bestand jquery.cookie.js op je server en neem de regel <script src="/path/to/jquery.cookie.js"> op in de <head> van je site (vergeet het pad naar de directory niet aan te passen). Zet deze NA de aanroep van jquery zelf, want anders snappen browsers je cookiecode uiteraard niet. Als je WordPress gebruikt is dat na de regel <?php wp_head(); ?> in het bestand header.php in je themafolder.
De volgende stap is het toevoegen van enkele regels html. Dat kan op iedere plek, maar omdat de cookiewarning doorgaans bovenaan de site staat, ligt het voor de hand het meteen na de <body> tag te doen.
<div class="cookiewarning"><span class="cookiewarning_introduction">Deze website maakt gebruik van Cookies</span><span class="cookiewarning_explanation">Uitleg over cookies, met een link naar de pagina met privacy beleid</span><span class="cookiewarning_help"><a href="javascript:void(0)">Meer informatie</a></span><span class="cookiewarning_yes"><a href="javascript:void(0)">Cookies toestaan</a></span></div>
Opnieuw een stukje jquery zorgt ervoor dat de uitgebreide tekst verschijnt als iemand op ‘meer informatie’ drukt en dat de cookie waarschuwing verdwijnt als op ‘cookies toestaan’ wordt geklikt. Deze code moet je knippen en plakken na de jquery code voor de opslag van cookies.
<script type="text/javascript">$(document).ready(function() {if($.cookie('COOKIE_CONSENT')) {$('body').addClass($.cookie('COOKIE_CONSENT'));}else {$('body').addClass('cookies_not_ok');}$('.cookiewarning_yes a').click(function() {$('body').addClass('cookies_ok');$('body').removeClass('cookies_not_ok');$.cookie('COOKIE_CONSENT', 'cookies_ok', { path: '/', expires: 10000 });return false;});});$(document).ready(function(){$("span.cookiewarning_help a").click(function () {$(this).parent().parent().toggleClass("showhelp");});});</script>
Let op dat er een nauwe samenhang bestaat tussen de html en de jquery code. Je kunt niet de ene wijzigen zonder iets aan de ander te moeten doen. De laatste stap is zorgen dat het er een beetje leuk uitziet. Dat doe je door de volgende regels toe te voegen aan je style sheet. Als je WordPress gebruikt is dat het bestand style.css.
.cookiewarning {display:none; z-index:200;}body.cookies_not_ok .cookiewarning {display:block; background:#dddddd; color:#000000; width:20em; max-width:50%; padding:1em; position:fixed; top:10px; right:10px; z-index:120; border:1px solid #000000;}body.cookies_not_ok .cookiewarning a {color:#00ff00;} /* Vervang deze zescijferige kleurcode door de kleur die links op je site hebben */body.cookies_not_ok .cookiewarning_explanation {display:none;}body.cookies_not_ok .cookiewarning.showhelp .cookiewarning_explanation {display:block;}body.cookies_not_ok .cookiewarning.showhelp .cookiewarning_introduction {display:none;}
De stijlelementen kun je uiteraard wel naar believen aanpassen, zolang je de display elementen maar met rust laat, want die zorgen in samenhang met de jquery wanneer wat getoond wordt.
