15 déc. 2014

A quoi servent les cookies sur un blog ? + {Tutoriel}

Depuis quelques temps, vous apercevez cette barre sur le dessus du blog qui vous parle de "cookies". Mais mais, rien à voir avec une quelconque gourmandise...

Qu'est-ce que c'est ?

"Un cookie est une information déposée sur votre disque dur par le serveur du site que vous visitez. 
 
Il contient plusieurs données :
  • le nom du serveur qui l'a déposée ; 
  • un identifiant sous forme de numéro unique ;
  • éventuellement une date d'expiration…
Ces informations sont parfois stockées sur votre ordinateur dans un simple fichier texte auquel un serveur accède pour lire et enregistrer des informations".

A quoi servent les cookies ?

"Les cookies ont différentes fonctions. Ils peuvent permettre de reconnaître un internaute, d'une visite à une autre, grâce à un identifiant unique. Certains cookies peuvent aussi être utilisés pour stocker le contenu d'un panier d'achat, d'autres pour enregistrer les paramètres de langue d'un site, d'autres encore pour faire de la publicité ciblée".

Et sur le blog ? 

Les cookies me permettent de voir certaines informations à visée statistique : l'heure à laquelle vous vous connectez, les pages que vous consultez et le temps de lecture, votre pays, votre ville, votre navigateur.

Je n'ai pas configuré mes statistiques pour voir votre âge, votre sexe, vos données géographiques plus loin que la ville. Mes configurations statistiques sont basiques, mais il est possible de les personnaliser et d'ajouter la récupération de ces données et de bien d'autres !

Que dit la loi ? 

"La réglementation prévoit que les sites internet doivent recueillir votre consentement avant le dépôt de ces cookies, vous indiquer à quoi ils servent et comment vous pouvez vous y opposer. En pratique, un message doit apparaître quand vous vous connectez au site pour la première fois pour vous indiquer comment accepter ou au contraire refuser les cookies".

Autrement dit, n'importe quel site doit désormais vous informer lorsqu"il récupère vos données personnelles, et c'est la moindre des choses je trouve étant donné tout ce qu'il est possible de récolter.

Voici la raison pour laquelle j'ai installé cette barre sur le haut du blog. Pour les blogueurs qui se posent la question du "comment l'installer" un tutoriel se trouve plus bas dans l'article. 

Pour les simples "lecteurs", merci de m'avoir lue, vous savez maintenant ce que je fais de vos données que vous fournissez malgré vous. :) Pour en savoir plus, je vous invite à consulter le site de la CNIL (Commission Nationale de l'Informatique et des Libertés) en cliquant ici.

{Le tutoriel}

Et maintenant, place au tutoriel pour installer cette fameuse barre et informer nos chers lecteurs. Personnellement, je blogue depuis la plateforme Blogger. Je pense néanmoins, que si vous avez déjà modifié plus ou moins le code html de votre blog, la barre s'installera de la même manière. 


Pour être honnête, ce code, je ne l'ai pas inventé. J'ai moi-même installé cette barre en suivant le tutoriel de ce blog : DearJoy.

Étape 1 : 

Vous rendre dans le menu de votre plateforme qui vous permet de modifier le code html (sous Blogger choisissez "Modèle" puis "Modifier le code html"). 

Étape 2 :

Rechercher l'entrée " </body> " (sans les guillemets) en utilisant le raccourci "ctrl + F" de votre clavier.  

Étape 3 : 

Juste au dessus de cette balise " </body> ", sautez une ligne pour insérer ce code qu'il vous faut copiez puis coller (je l'ai surligné pour que vous y voyez un peu plus clair) : 

<div id='barritaloca' style='display:none;position:fixed;center:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #FEA7B0;color:#ffffff;z-index: 99999;'>
<div style='width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;'><div style='text-align: center;'>
VOTRE PHRASE A MODIFIER
 <a href='javascript:void(0);' onclick='PonerCookie();' style='padding:4px;background:#FFC3DB;text-decoration:none;color:#fff;'><b>OK</b></a>
 <a href='https://www.google.com/intl/fr_fr/policies/technologies/types/' style='padding-left:5px;text-decoration:none;color:#ffffff;' target='_blank'>En savoir plus</a>
</div>
   </div>
</div>
<script>
function getCookie(c_name){
 var c_value = document.cookie;
 var c_start = c_value.indexOf(&quot; &quot; + c_name + &quot;=&quot;);
 if (c_start == -1){
  c_start = c_value.indexOf(c_name + &quot;=&quot;);
 }
 if (c_start == -1){
  c_value = null;
 }else{
  c_start = c_value.indexOf(&quot;=&quot;, c_start) + 1;
  var c_end = c_value.indexOf(&quot;;&quot;, c_start);
  if (c_end == -1){
   c_end = c_value.length;
  }
  c_value = unescape(c_value.substring(c_start,c_end));
 }
 return c_value;
}
function setCookie(c_name,value,exdays){
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + exdays);
 var c_value=escape(value) + ((exdays==null) ? &quot;&quot; : &quot;; expires=&quot;+exdate.toUTCString());
 document.cookie=c_name + &quot;=&quot; + c_value;
}
if(getCookie(&#39;aviso&#39;)!=&quot;1&quot;){
 document.getElementById(&quot;barritaloca&quot;).style.display=&quot;block&quot;;
}
function PonerCookie(){
 setCookie(&#39;aviso&#39;,&#39;1&#39;,365);
 document.getElementById(&quot;barritaloca&quot;).style.display=&quot;none&quot;;
}
</script>


Étape 4 : 

Je vous invite à faire une prévisualisation de votre modèle pour vérifier que la barre s'affiche bien. Normalement si elle s'affiche, elle se trouve en bas et sa couleur est rose. Maintenant il faut la personnaliser. 

Étape 5 : 

C'est là qu'on s'amuse ! ^^ Pour personnaliser, il va falloir regarder uniquement le début du code.Voici mon code une fois personnalisé :

 <div id='barritaloca' style='display:none;position:fixed;center:0px;right:0px;top:0px;width:100%;min-height:40px;background: #f3f3f3;color:#3d85c6;z-index: 99999;'>
<div style='width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;'><div style='text-align: center;'>
Ce site utilise des cookies pour améliorer votre navigation. En continuant, vous en acceptez l&#39;utilisation.
 <a href='javascript:void(0);' onclick='PonerCookie();' style='padding:4px;background:#cfe2f3;text-decoration:none;color:#3d85c6;'><b>OK</b></a>
 <a href='https://www.google.com/intl/fr_fr/policies/technologies/types/' style='padding-left:5px;text-decoration:none;color:#3d85c6;' target='_blank'>En savoir plus</a>
</div>

J'ai utilisé un code couleur pour vous détailler tout ce qui peut-être personnalisable : 


top : Permet de choisir l'orientation de la barre "top" pour en haut ou écrivez "bottom" (sans guillemet) pour que la barre s'affiche en bas.

background: #f3f3f3 : Permet de choisir le fond de couleur de la barre. Ceci "#f3f3f3" est le code couleur à changer.

color:#3d85c6
: Permet de changer la couleur de l'écriture de la barre.

center;'> Ce site utilise des cookies pour améliorer votre navigation. En continuant, vous en acceptez l&#39;utilisation.<a href : Vous pouvez changer le texte explicatif.

background:#cfe2f3 : Permet de changer la couleur de fond de la case "OK".

color:#3d85c6 : Permet de changer la couleur de l'écriture de la case "OK".

OK : Vous pouvez changer le texte de la case "OK", et mettre "J'accepte" par exemple.

color:#3d85c6 : Permet de changer la couleur de l'écriture de l'onglet "En savoir plus"

En savoir plus : Vous pouvez changer le texte "En savoir plus" par autre chose. 

Étape 6 :   

Pour personnaliser les couleurs vous devez toujours mettre " # " suivis de six chiffres ou lettres. Pour consulter les codes des différentes couleurs, cliquez ici (et ne regarder que les codes hexadécimaux) ou juste là.

Codes des couleurs les plus répandues le noir (#222222), le blanc (#ffffff), le transparent écrire "transparent" (pas de #), le rouge (#ff0000), le jaune (#ffff00), le orange (#ff9900), le vert (#00ff00), le bleu foncé (#0000ff) et le violet (#9900ff).

Je trouve personnellement que le mieux est de rester dans des teintes basiques (noir/blanc) ou en accord avec le blog.


J’espère que ce tutoriel vous aidera !


Sources :

A bientôt !
Samia 

8 commentaires :

  1. Coucou !! Merci pour cet article fort intéressant !
    Je viens d'essayer & ça marche donc vraiment merci à toi tu gères :D
    En plus tu expliques très bien :)
    J'ai repris la même phrase que toi en attendant d'avoir de l'imagination et d'écrire autre chose concernant la phrase de réglementation des cookies, j'espère que cela ne te dérange pas! hihi
    Merci encoooooore
    Bisous !!!

    RépondreSupprimer
    Réponses
    1. Coucou !! Merci beaucoup, j'ai essayé d'être claire et ça m'a pris du temps alors si ça marche c'est cool, je vais aller voir sur ton blog :)
      Pas de problème, je n'ai pas mis de copyright sur la phrase ^^
      Bises !

      Supprimer
  2. Merci pour ce super tuto, hyper bien expliqué.
    J'ai réussi à le faire toute seule et pourtant je suis nulle pour ce genre de chose. Cela marche du tonnerre.
    Le lien de mon blog si tu as envie de voir : http://gameofbeautymode.blogspot.fr/
    Bises et merci

    RépondreSupprimer
    Réponses
    1. Ca me fait plaisir, je vais aller voir ton blog ! :)

      Supprimer
  3. Bonsoir,
    Merci pour ce super article. Ton explication est très bien faite.
    Leçon du jour comprise et appliquée sur mon petit blog.
    Bonne soirée.
    Delphine
    NB : j'ai moi aussi repris ta phrase...

    RépondreSupprimer
    Réponses
    1. Coucou Delphine, merci pour tes compliments :-D
      Je vais aller visiter ça sur ton blog.
      Bises

      Supprimer
  4. Ouh là tu as du en faire fuir certaines avec ton code html : - )
    Sous wordpress (.org je précise) c'est même encore plus simple, on installe un plug in et le tour est joué. Je recommande celui que j'ai sur mon site qui est top facile à installer (Cookie Notice)

    RépondreSupprimer
    Réponses
    1. Lol ! Je ne sais pas, moi ça ne me dérange pas trifouiller dedans, autrement je n'aurai pas pu personnaliser moi-même mon thème. Sous Wordpress il y a des plug in pour tout ;-)

      Supprimer

✿ Laisser un petit mot. Je réponds toujours ✿

Related Posts Plugin for WordPress, Blogger...