EU cookie law

The EU cookie law (e-Privacy Directive)

If your website is visited by users from the European Union (EU), the "EU Cookie Law" requires that you advise your website visitors about any information you store about them, including browser cookies. Browser cookies are specifically noted in the Directive on Privacy and Electronic Communications that came into force July 31, 2002.

Further …

The law which applies to how you use cookies and similar technologies for storing information on a user’s equipment such as their computer or mobile device changed on 26 May 2011.

There are some who feel this Directive is a ridiculous waste of time and that it fails to meet it's own objectives, Dear ICO, Sue Us being perhaps the most visible and vocal.

However, that is not our purpose here. I am assuming you

  1. wish to comply with the E-Privacy Directive,
  2. that you run WordPress, and
  3. you use The Turning Gate's Lightroom plugins.

WordPress

I chose the Cookie Law Info plugin based on discussions from posts in the TTG Community Forum. While it hasn't been updated for some time, it functions perfectly well under the latest WordPress release 4.2 "Powell". There are other options but this is what I use. I can't comment on other options as I haven't looked at them.
Update: May 23, 2015 Cookie Law info is still being maintained; v1.2.2 was just released!
Update: Oct 1, 2015 Well, yes, this plugin is undergoing some updates but that has introduced some issues with the releases beyond v1.4! Until this is fixed, I strongly recommend you use v1.4.3 only.

The Cookie Law Info plugin consists of three components

  1. the plugin code that hooks into all the necessary places in WordPress,
  2. a new custom post type where you define all the cookies you use, and
  3. shortcodes to both display these posts and to reset this plugin's own cookie.

Install and activate the plugin from your blog's plugins admin page or download it from the Cookie Law Info website then upload it from the upload plugin page on your blog and activate it. Once activated, follow the setup directions on that same Cookie Law Info page.

Once you've finished steps 1 and 2 above, create your now required privacy page and include the Cookie Law Info shortcodes desired. Have a look at my own Privacy page for suggestions on what to include.

The Turning Gate

Support for including your own code at strategic places in the pages dynamically generated by the TTG plugins via PHPlugin hooks was delivered starting with the first release of the Core Elements versions of Matthew's plugins. The CE4 documentation website has all you need to know about enabling and using the PHPlugins feature as well as a very much appreciated nod to yours truly.

Follow the examples shown and verify that your PHPlugin hooks are being activated and called correctly. I would strongly suggest you also enable Shared Resources. This one simple, rather plain option is what The Turning Gate is all about – Core Elements (CE, version 4 or CE4). Beyond enabling better server performance, it makes maintenance of shared features, most notably PHPlugins a breeze. Once you're sure everything is working correctly, press on …

To add the Cookie Law Info bar to TTG pages, we make use of the ttg_canvas_top PHPlugin hook to insert the bar in the TTG pages desired. What we need to do is essentially duplicate what the WordPress plugin does …

  1. insert links to load the Cookie Law Info (abbreviated "cli") CSS style sheets and javascript, and
  2. insert inline javascript to invoke the cli_show_cookiebar function when the page has finished loading.

Because all the parameters and settings that are established in the WordPress Cookie Law Info settings page are specified as parameters to the cli_show_cookiebar function, we can easily duplicate those same settings outside of the WordPress environment. By copying part of the code from one of our blog pages we can duplicate this functionality in any TTG page.

There are two very important things to note here …

  1. the following code segments assume your blog is loaded into a folder named "/blog/".
  2. pay very special attention to the use of single quotes ('), double quotes (") and backslashes (\) in these code samples.

The ttg_canvas_top function is not predefined in the supplied PHPlugins.php file so we need to add it. Open the "/phplugins/phplugins.php" file in your favorite text editor and look for the following block of code (found on line 123 in my case; yours may be different) …

// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************
 
 
 
/* DELETE THIS LINE

We need to define the ttg_canvas_top function by inserting the lines below into the block of blank lines above (blank lines are ignored by the PHP processor) …

function ttg_canvas_top( $style, $path ) {
}

After ensuring the ttg_canvas_top function is enabled, we add these 5 lines in between lines 1 and 2 above …

if ( G_STYLE != 'CE4-WORDPRESS' )
echo '<script src="/blog/wp-content/plugins/cookie-law-info/js/cookielawinfo.js" type="text/javascript">// <![CDATA[
';

The if statement (line 1) above will cause the Cookie Law Info bar to be omitted from all WordPress pages (the WordPress plugin will do that for us on those pages).

That gets the prerequisite CSS and javascript in place. Now we need to add the inline javascript that invokes the cli_show_cookiebar function so that the bar displays once the page has been loaded.

What follows is a bit tricky. We need to allow for two levels of interpretation, first inside the PHP interpreter and then inside javascript interpreter and to contain all that in a PHP echo statement. Because we delineate the PHP echo statement with a single quote, all single quotes that are to be contained within the echo statement must be "escaped".

For example, consider the following …

  1. 'String with no embedded quotes.'
  2. "Special strings that have 'quotes' embedded."
  3. 'Special strings that have \'quotes\' embedded.'
  1. Line 1 is a straight forward example of a character string. Here single and double quotes can be used interchangeably. The end result would be the same.
  2. Line 2 is also rather straight forward except that two single quotes are included as part of the string. This requires that the entire string be delineated with double quotes, as shown.
  3. Line 3 shows what we need to do when we use single quotes to delineate the string yet still allow single quotes to be considered a part of the string. In this case we must "escape" the embedded single quote, causing it to be considered as data; we use a backslash character to do that. (Any preexisting backslashes must also be escaped, as shown later on.)

The end result here is that lines 2 and 3 and are identical.

OK … let's see what this ends up looking like and how to make this work for us.

Let's find the code we need. Once you have set up the Cookie Law Info plugin to your liking and verified that it works like you want it to, open your browser to any page in your blog. Then open an HTML source window.

  • On Windows, in Chrome, Firefox or Safari, right click in the browser windows and select "View Source" or "View Page Source". In Internet Explorer (whut!) select Source from the View menu (you may need to press Alt to see the menu bar).
  • On MAC OS X, in Chrome, Firefox or Safari, control click in the browser window and select "View Source" or "View Page Source".

A new window should open displaying all the HTML used to create the page you're viewing. It should look something like this …
We are looking for the call to the cli_show_cookiebar function. In my case I find the code just after line 610. It should look similar to the code below although yours will reflect your website URL address and your Cookie Law Info plugin settings.

  1. <script type="text/javascript">
  2.     //<![CDATA[
  3.     jQuery(document).ready(function() {
  4.  
  5.     // Edit 09/05: remove globals and package into Object Literal, and removed the debug function
  6.         cli_show_cookiebar({
  7. 	    html: '
  8.  
  9.  
  10. <div id="cookie-law-info-bar"><span>Like most websites we use \'cookies\'. If you\'re happy with that, just <a href=\"#\" id=\"cookie_action_close_header\" class=\"cli-plugin-main-button\" >close this banner</a> and carry on. Otherwise <a href=\"http://johnbishopimages.com/blog/privacy/\" id=\"CONSTANT_OPEN_URL\" class=\"cli-plugin-main-link\" >click here</a> to find out more.</span></div>
  11.  
  12.  
  13. ',
  14. 	    settings: '{"animate_speed_hide":"500","animate_speed_show":"500","background":"#ffffff","border":"#799a3d","border_on":false,"button_1_button_colour":"#ffffff","button_1_button_hover":"#cccccc","button_1_link_colour":"#799a3d","button_1_as_button":false,"button_2_button_colour":"#333333","button_2_button_hover":"#292929","button_2_link_colour":"#799a3d","button_2_as_button":false,"font_family":"inherit","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"left","notify_position_vertical":"top","showagain_tab":false,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"45%","text":"#000000","show_once_yn":false,"show_once":"10000"}'
  15.         });
  16.  
  17.     });
  18. // ]]></script>

Select and copy these lines to the clipboard and then paste them immediately after line 5 in the existing ttg_canvas_top function that we have been working on, now shown below …

function ttg_canvas_top(  $style, $path ) {
    if ( G_STYLE != 'CE4-WORDPRESS' )
    echo '<script src="/blog/wp-content/plugins/cookie-law-info/js/cookielawinfo.js" type="text/javascript">// <![CDATA[
<script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready(function() {
 
    // Edit 09/05: remove globals and package into Object Literal, and removed the debug function
        cli_show_cookiebar({
	    html: '
 
 
<div id="cookie-law-info-bar"><span>Like most websites we use \'cookies\'. If you\'re happy with that, just <a href=\"#\" id=\"cookie_action_close_header\" class=\"cli-plugin-main-button\" >close this banner</a> and carry on. Otherwise <a href=\"http://johnbishopimages.com/blog/privacy/\" id=\"CONSTANT_OPEN_URL\" class=\"cli-plugin-main-link\" >click here</a> to find out more.</span></div>
 
 
',
	    settings: '{"animate_speed_hide":"500","animate_speed_show":"500","background":"#ffffff","border":"#799a3d","border_on":false,"button_1_button_colour":"#ffffff","button_1_button_hover":"#cccccc","button_1_link_colour":"#799a3d","button_1_as_button":false,"button_2_button_colour":"#333333","button_2_button_hover":"#292929","button_2_link_colour":"#799a3d","button_2_as_button":false,"font_family":"inherit","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"left","notify_position_vertical":"top","showagain_tab":false,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"45%","text":"#000000","show_once_yn":false,"show_once":"10000"}'
        });
 
    });
// ]]></script>'; }

We now need to escape the single quotes and backslashes that delineate and define the two parameters that are passed to the cli_show_cookiebar function – html: on line 12 and settings: on line 13. The double quotes in the html: parameter on line 12 are already correctly escaped; we don't need to worry about them.

In my case, there are 5 single quotes (') and the three backslashes (\) on line 12 must be escaped; yours will very likely be different …

            html: \'
<div id="cookie-law-info-bar">Like most websites we use \\\'cookies\\\'. If you\\\'re happy with that, just <a id="\&quot;cookie_action_close_header\&quot;" class="\&quot;cli-plugin-main-button\&quot;" href="\&quot;#\&quot;">close this banner</a> and carry on. Otherwise <a id="\&quot;CONSTANT_OPEN_URL\&quot;" class="\&quot;cli-plugin-main-link\&quot;" href="\&quot;http://johnbishopimages.com/blog/privacy/\&quot;">click here</a> to find out more.</div>
\',

The 2 single quotes (') on line 13 (one near the beginning and one at the end) must be escaped …

	    settings: \'{"animate_speed_hide":"500","animate_speed_show":"500","background":"#ffffff","border":"#799a3d","border_on":false,"button_1_button_colour":"#ffffff","button_1_button_hover":"#cccccc","button_1_link_colour":"#799a3d","button_1_as_button":false,"button_2_button_colour":"#333333","button_2_button_hover":"#292929","button_2_link_colour":"#799a3d","button_2_as_button":false,"font_family":"inherit","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"left","notify_position_vertical":"top","showagain_tab":false,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"45%","text":"#000000","show_once_yn":false,"show_once":"10000"}\'

Save the file, upload it to your server and open a browser to any non WordPress page. As long as you haven't already closed the Cookie Law Info bar, you should see it displayed.

There are two likely causes of issues here …

  1. Both WordPress and TTG pages share the same cookie so if you have closed the info bar from any page you will have to delete the cookie to verify the ttg_canvas_top function is working as desired.
  2. Getting the single quotes escaped properly is error prone. Adding backslashes into the mix adds a bit of complexity. Getting either wrong will likely cause your hook not to function correctly. It may even seem to break your whole page.

I do almost all my website development using Firefox with the Firebug plugin. This gives me quick access to all the cookies stored on my desktop, allowing me to manually delete any one for testing purposes.

There you have it!

As always, ask away! I will help in away way I can!


Leave a Comment

Your email address will not be published. Required fields are marked *


Get Email Updates

Support

It takes money to run a website. If we have been of assistance to you, if you have found useful information on our website, or if you have enjoyed using the free Photoshop Creative Commons plugin, please consider helping to defray our costs by making a secure PayPal donation. We do not receive any of your personal information or financial data.

Disclosure

john bishop images receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, john bishop images carefully chooses affiliates based upon the quality of services and products these entities provide to our users. They must provide significant value-add. john bishop images is independently owned and the opinions expressed here are our own.