Overslaan en naar de inhoud gaan

AVG-proof social media deelknoppen

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

LinkedIn


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

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

Deel dit artikel

Ik zat net een interessant artikel te lezen: "AVG-proof social media deelknoppen".
Ik dacht dit is ook echt iets voor jou.
Zie: https://www.dijkstra.nl/blog/avg-proof-social-media-deelknoppen

Klik op de knoppen hieronder om dit artikel te delen.

Reacties (0)

Laat een reactie achter

Platte tekst

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

Was deze informatie nuttig?