AVG-proof social media deelknoppen

Aangemaakt 24 februari 2020
Aangepast 19 september 2021

Door Ronald Dijkstra Websites 0 Reacties

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:

<!-- AVG Proof Sharing Button Facebook -->
<a class="avg-proof-sharing-button__link"
    href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fje-eigen-website.nl" target="_blank" rel="noopener"
    aria-label="Facebook">
    <div class="avg-proof-sharing-button avg-proof-sharing-button--facebook 
    avg-proof-sharing-button--medium">
        <div aria-hidden="true" class="
        avg-proof-sharing-button__icon 
        avg-proof-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" />
            </svg>
        </div>
        Facebook
    </div>
</a>

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:

<!-- AVG Proof Sharing Button Twitter -->
<a class="avg-proof-sharing-button__link"
    href="https://twitter.com/intent/tweet/?text=AVG-proof%20social%20media%20knoppen%20om%20te%20delen.&url=http%3A%2F%2Fje-eigen-website.nl"
    target="_blank" rel="noopener" aria-label="Twitter">
    <div class="avg-proof-sharing-button avg-proof-sharing-button--twitter avg-proof-sharing-button--medium">
        <div aria-hidden="true" class="avg-proof-sharing-button__icon avg-proof-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z" />
            </svg></div>Twitter
    </div>
</a>

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:

    <!-- AVG Proof Sharing Button LinkedIn -->
  <a class="avg-proof-sharing-button__link"
      href="https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Fje-eigen-website.nl"
      target="_blank" rel="noopener" aria-label="LinkedIn">
      <div class="avg-proof-sharing-button avg-proof-sharing-button--linkedin avg-proof-sharing-button--medium">
          <div aria-hidden="true" class="avg-proof-sharing-button__icon avg-proof-sharing-button__icon--solid">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                      d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z" />
              </svg></div>LinkedIn
      </div>
  </a>

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

E-mail share button

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

HTML-code:

<!-- AVG Proof Sharing Button E-Mail -->
<a class="avg-proof-sharing-button__link"
    href="mailto:?subject=AVG-proof%20social%20media%20knoppen%20om%20te%20delen.&body=http%3A%2F%2Fje-eigen-website.nl"
    target="_self" rel="noopener" aria-label="E-Mail">
    <div class="avg-proof-sharing-button avg-proof-sharing-button--email avg-proof-sharing-button--medium">
        <div aria-hidden="true" class="avg-proof-sharing-button__icon avg-proof-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z" />
            </svg></div>E-Mail
    </div>
</a>

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:

<!-- AVG Proof Sharing Button WhatsApp -->
<a class="avg-proof-sharing-button__link"
    href="whatsapp://send?text=AVG-proof%20social%20media%20knoppen%20om%20te%20delen.%20http%3A%2F%2Fje-eigen-website.nl"
    target="_blank" rel="noopener" aria-label="WhatsApp">
    <div class="avg-proof-sharing-button avg-proof-sharing-button--whatsapp avg-proof-sharing-button--medium">
        <div aria-hidden="true" class="avg-proof-sharing-button__icon avg-proof-sharing-button__icon--solid">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z" />
            </svg></div>WhatsApp
    </div>
</a>

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

HTML- en CSS-code downloaden

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

Download: AVG-proof-share-buttons.zip

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 :-)

Auteur

Ronald Dijkstra

Ik ben een ondernemer in hart en nieren. Sinds 1983 hebben computers mijn interesse. In 1991 ben ik begonnen als ICT-er bij diverse bedrijven (Racall datacom, PTT Telecom/KPN, Atos Origin). Sinds 2000 ben ik full-time ondernemer. In de afgelopen jaren heb ik veel ervaring opgedaan met servers, het beheer en ervoor te zorgen dat servers "het altijd blijven doen” of het "weer gaan doen". Dit is begonnen met Novell servers en als snel groeide dit uit naar Microsoft Windows servers en netwerken. Ik heb een uitgebreide ervaring in producten van Microsoft. In 1997 kwam ik in aanraking met het internet en kreeg ik ook interesse in Linux servers en websites. Sindsdien heb ik dagelijks naast Windows servers ook veel met Linux systemen te maken. Inmiddels doen we ook veel in de cloud met Microsoft 365 diensten zoals Office 365. Met R. Dijkstra Automatisering maken we (slimme) websites, we beheren al onze servers zelf en leveren diverse diensten zoals: hosting, VPS servers en dedicated servers. Ook zijn we in te huren als Consultant voor problem-solving en advies .