Ingediend door Ronald Dijkstra op

Het zal je misschien niet ontgaan zijn dat de Algemene Verordening Gegevensbescherming (AVG) per 25 mei 2018 is uitgebreid. En misschien is je dat wel ontgaan. Maar de privacyrechten van klanten of gebruikers worden er mee versterkt en uitgebreid. En door deze wet ben je als website eigenaar medeaansprakelijk voor datavergaring en -doorzending naar een derde partij. Dit is een tijdje geleden door de hoogste EU-rechter bepaald.

Oke, ik hoor je denken.... "dat zal wel".

Verantwoordelijk als website eigenaar

Maar concreet betekent dit dat wanneer je gebruik maakt van zogenaamde plugin's op je website om een Facebook like knop of deel knop weer te geven, dat jij ook verantwoordelijk bent voor alle data die door Facebook verzameld wordt. (Dit geld ook voor plugins of scripts van ander (social media) bedrijven zoals: Twitter, Instagram, Pintrest, LinkedIn. De scripts van AddThis verzamelen veel informatie waar jij verantwoordelijk voor bent. Je bezoekers moeten weten en toestemming geven dat deze social media bedrijven de gegevens van jouw bezoekers verzamelen. Je kent de (inmiddels gehate) cookie meldingen wel waarmee je je keuze kenbaar moet kunnen maken. (Als je deze cookie-melding al krijgt).

Kortom... een hoop gedoe...

Wees niet langer het speetje van social media bedrijven die hun zakken vullen met de data van jouw website!

Deel knoppen die AVG-proof zijn

Alternatief is om deel knoppen op je website te gebruiken die geen datavergaren. In plaats van dat je de scripts gebruik van de social media bedrijven (of andere bedrijven die je niet kent) kan je ook rechtstreeks via een link je data delen. De meestal social media bedrijven hebben op hun website een link die je hier voor kan gebruiken.

Bijvoorbeeld:

Je kan deze links gebruiken om direct je eigen site te delen. Je moet aan het einde van de URL een parameter toevoegen. Alleen sommige letters/karakters kan je niet gebruiken.

Bijvoorbeeld: 

[spatie] = %20
[dubbel punt] = %3A
[forward slash] = %2F

Dus: http://je-eigen-website.nl moet worden: http%3A%2F%2Fje-eigen-website.nl

(Je hebt hiervoor ook websites, waar je je url snel kan omzetten (encode). Bijvoorbeeld: https://www.url-encode-decode.com/)

Om bijvoorbeeld Facebook link toe te voegen aan je eigen HTML -code kan je deze code gebruiken.

<a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fje-eigen-website.nl" target="_blank" >Facebook</a>

Je krijgt door de bovenstaande code een link, waarmee je je eigen website kan delen. Voorbeeld: Facebook

Van link naar Facebook knop om te delen

Om nu van link naar social media knop te komen moeten we de code uitbreiden en css-code gaan toevoegen. Hieronder staat de HTML-code en de CSS-code die je nodig hebt om er een knop van te maken.

HTML Code:

CSS Code:


.avg-proof-sharing-button__link,
.avg-proof-sharing-button__icon {
    display: inline-block
}

.avg-proof-sharing-button__link {
    text-decoration: none;
    color: #fff;
    margin: 0.5em
}

.avg-proof-sharing-button {
    border-radius: 5px;
    transition: 25ms ease-out;
    padding: 0.5em 0.75em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

.avg-proof-sharing-button__icon svg {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: top
}

.avg-proof-sharing-button--small svg {
    margin: 0;
    vertical-align: middle
}

/* Non solid icons get a stroke */
.avg-proof-sharing-button__icon {
    stroke: #fff;
    fill: none
}

/* Solid icons get a fill */
.avg-proof-sharing-button__icon--solid,
.avg-proof-sharing-button__icon--solidcircle {
    fill: #fff;
    stroke: none
}

.avg-proof-sharing-button--facebook {
    background-color: #3b5998;
    border-color: #3b5998;
}

.avg-proof-sharing-button--facebook:hover,
.avg-proof-sharing-button--facebook:active {
    background-color: #2d4373;
    border-color: #2d4373;
}

Het eind resultaat ziet er dan zo uit:



Andere knoppen om te delen via Twitter, E-mail, LinkedIn, WhatsApp

Nu kunnen we ook de ander knoppen (share buttons) om te delen via Twitter, E-mail, LinkedIn en WhatsApp gaan maken.

Twitter share button

Met behulp van de onderstaande HTML code kan je de Twitter button maken.

HTML Code:

Voeg de onderstaande CSS-code toe aan de CSS-code eerder uit dit artikel voor de Twitter knop.

CSS-code:


.avg-proof-sharing-button--twitter {
    background-color: #55acee;
    border-color: #55acee;
}

.avg-proof-sharing-button--twitter:hover,
.avg-proof-sharing-button--twitter:active {
    background-color: #2795e9;
    border-color: #2795e9;
}

Voorbeeld van de Twitter knop



LinkedIn share button

Gebruik deze HTML code op de LinkedIn knop aan te maken.

HTML-code:

  
      

          LinkedIn

Voeg de onderstaande CSS-code toe aan de CSS-code eerder uit dit artikel voor de WhatsApp knop.

CSS-code:


.avg-proof-sharing-button--linkedin {
    background-color: #0077b5;
    border-color: #0077b5;
}

.avg-proof-sharing-button--linkedin:hover,
.avg-proof-sharing-button--linkedin:active {
    background-color: #046293;
    border-color: #046293;
}

Voorbeeld van de LinkedIn knop

LinkedIn


E-mail share button

Gebruik de onderstaande HTML-code voor het maken van de E-mail knop.

HTML-code:

Voeg de onderstaande CSS-code toe aan de CSS-code eerder uit dit artikel voor de WhatsApp knop.

CSS-code:


.avg-proof-sharing-button--whatsapp {
    background-color: #25D366;
    border-color: #25D366;
}

.avg-proof-sharing-button--whatsapp:hover,
.avg-proof-sharing-button--whatsapp:active {
    background-color: #1DA851;
    border-color: #1DA851;
}

Voorbeeld van de E-mail knop



WhatsApp share button

Voor de WhatsApp knop maken we gebruik van de link om direct WhatsApp (via de mobiele app) op je telefoon te starten. Als je dan op de knop drukt dan wordt de mobiele app geopent i.p.v. dat je naar de website gaat om te delen.

HTML-code:


    

        WhatsApp

Voeg de onderstaande CSS-code toe aan de CSS-code eerder uit dit artikel voor de WhatsApp knop.

CSS-code:


.avg-proof-sharing-button--whatsapp {
    background-color: #25D366;
    border-color: #25D366;
}

.avg-proof-sharing-button--whatsapp:hover,
.avg-proof-sharing-button--whatsapp:active {
    background-color: #1DA851;
    border-color: #1DA851;
}

Voorbeeld van de WhatsApp knop

WhatsApp


HTML- en CSS-code downloaden

Alle HTML- en CSS-code van dit artikel kan je ook downloaden via de zipfile hieronder:



Het Eindresultaat

Het eindresultaat kan je ook hieronder op deze pagina bekijken (of op de andere blog pagina's op deze site). Hieronder Bbij het gedeelte "Deel dit artikel" zie je de AVG-proof share buttons in de pratijk in werking. En als je dit artikel leuk vindt dan kan je het gelijk delen :-)

Image
AVG-proof social media deelknoppen
Thumbnail
AVG-proof social media deelknoppen
Blog Category
Websites
Blog Tag
Websites

Reactie toevoegen

Over tekstopmaak

Platte tekst

  • Geen HTML toegestaan.
  • Regels en alinea's worden automatisch gesplitst.
  • Web- en e-mailadressen worden automatisch naar links omgezet.
CAPTCHA
Blog Display
Thumbnail