Deelknoppen: Facebook, X, WhatsApp en zeven andere, zonder scripts van derden, voor PrestaShop

De gebruikelijke aanpak kost uw klanten hun privacy

De meeste deelmodules bouwen de widgets van de netwerken zelf in. Dat betekent dat het script van Facebook, dat van X en dat van LinkedIn op uw pagina's worden geladen, hun cookies plaatsen en vastleggen wie er langskwam — of er nu iemand iets deelt of niet.

Dat is een cookiebanner, een alinea extra in uw privacyverklaring, drie verzoeken aan derden op elke pagina en een tragere winkel. Daarvoor krijgt u één deelknop terug.

Deze module kiest precies de andere weg.

Er laadt niets tot iemand klikt

Er staat helemaal geen code van een sociaal netwerk in uw pagina's. Niet uitgesteld, niet lazy geladen, niet achter een klik-om-te-laden-schil: het staat er simpelweg niet.

De knoppen zijn gewone HTML-knoppen. Het deeladres wordt opgebouwd door een klein script van ons, op uw eigen server, op het moment dat iemand klikt — en pas dan opent er een venster naar Facebook, X of WhatsApp. Vóór die klik staat er geen Facebook-URL in uw pagina waar een browser alvast verbinding mee kan maken, is er niets dat een referrer lekt en is er niets om toestemming voor te geven.

De enige twee bestanden die worden geladen zijn de onze, vanaf uw eigen domein.

Tien plekken om te delen

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, link kopiëren en het deelmenu van de telefoon zelf.

Acht staan meteen aan. Telegram en Reddit staan klaar wanneer u ze wilt, standaard uit zodat de rij niet vol raakt.

Twee daarvan raken het internet helemaal niet. Link kopiëren zet het adres op het klembord. Delen geeft het door aan het deelmenu van het besturingssysteem, zodat uw klant op de telefoon zijn echte apps krijgt — die waarin hij mensen daadwerkelijk berichten stuurt — in plaats van uw gok over welke ertoe doen.

Die native knop verschijnt alleen in browsers die hem ondersteunen, dus niemand krijgt ooit een knop te zien die niets doet.

Het moet op uw winkel lijken, niet op 2013

Vier instellingen, en elke combinatie werkt: gevuld, omlijnd of minimaal; afgerond, cirkel of vierkant; drie groottes; en merkkleuren of één neutrale tint.

Dat zijn vierenvijftig varianten, nog voordat u besluit of u tekstlabels of een kop wilt tonen. De pictogrammen zijn als inline SVG in uw pagina getekend — geen pictogramlettertype om te downloaden, geen sprite, geen CDN — dus ze nemen hun kleur over uit de stylesheet en blijven scherp op elk formaat. Er is ook een donkere modus die de systeeminstelling van de bezoeker volgt.

Eén eerlijke beperking: de merkkleuren zijn de echte en liggen per netwerk vast. Uw keuze is merkkleuren of neutraal, geen kleurkiezer.

Onder het product, langs de zijkant of waar u maar wilt

Standaard verschijnt er een deelrij onder het product. Er is ook een zwevende balk — linker- of rechterrand, op elke pagina of alleen op productpagina's — die uit staat tot u hem aanzet, en die op de telefoon naar de onderkant van het scherm verhuist.

Daarnaast implementeert de module de widgetinterface van PrestaShop, dus {widget name='socialpower'} zet de knoppen in elk themasjabloon dat u wilt. Omdat elke plaatsing door dezelfde code loopt, werkt het verplaatsen van de module naar een andere hook via Design → Posities ook echt, in plaats van half.

3,7 KB, en verder niets

Eén stylesheet en één script — samen 3,7 KB gzipped (CSS 1.774 B + JS 1.974 B). Geen jQuery. Geen framework. Geen polyfillbundel. Geen weblettertype.

Het script wordt onderaan de pagina geladen, zodat het het renderen nooit blokkeert, en het stopt meteen op pagina's zonder knoppen.

Eén ding eerlijk gezegd: die twee kleine bestanden worden op elke front-officepagina geregistreerd, niet alleen op de pagina's waar knoppen staan. Op een normaal geconfigureerde winkel bundelt PrestaShop ze bij de eigen assets van het thema, dus de praktische kosten zijn nihil — maar het zijn twee bestanden, geen nul, en dat zeggen we liever zelf dan dat u het ontdekt.

Wat het bewust niet doet

Er zijn geen deeltellers, en dat is een keuze, geen tekortkoming. Facebook, X en LinkedIn hebben hun publieke telendpoints tussen 2015 en 2018 allemaal uitgezet. Een module die u vandaag toch een getal toont, laat ofwel een verouderd getal zien ofwel betaalt een derde partij ervoor — en een derde partij betalen betekent uw bezoekers naar hen sturen. Wij tonen liever geen getal dan een verkeerd getal.

Het belt niet naar huis. Geen licentiecontrole, geen analytics, geen enkel verzoek naar ons toe.

Nergens iets opgeslagen

Geen cookies. Geen browseropslag. Geen databasetabellen — er wordt er geen aangemaakt, dus blijft er ook geen achter. De module schrijft twaalf instellingen weg en verder niets, en bij het verwijderen gaan die ook weg.

Twee dingen die het benoemen waard zijn in plaats van weggemoffeld, omdat het browser-API's zijn en niet helemaal niets. Link kopiëren gebruikt de clipboard-API, die lokaal schrijft en nergens iets naartoe stuurt. Delen geeft het adres door aan het besturingssysteem, en wat het OS daarna doet is zijn zaak, niet de onze. Geen van beide is een probleem; beide zijn eerlijker beschreven dan onvermeld gelaten.

Gebouwd om met het toetsenbord te gebruiken

De knoppen zijn echte <button>-elementen, geen links of opgemaakte divs, dus ze krijgen focus en activeren vanaf het toetsenbord zoals een browser dat verwacht, en schermlezers kondigen ze als knop aan. Elke knop draagt een label met de netwerknaam, en de pictogrammen zijn verborgen voor hulptechnologie zodat er niets dubbel wordt voorgelezen.

Twee beperkingen, ronduit gezegd. De focusring is vervangen door een lift met schaduw — duidelijk zichtbaar, maar een ontworpen indicator in plaats van de browseromlijning. En van de drie groottes haalt alleen groot de richtlijn van 44 pixel voor het aanraakgebied; de kleinste is 32 pixel.

Stel het in terwijl u ernaar kijkt

De configuratiepagina toont een voorbeeld dat is opgebouwd uit uw opgeslagen instellingen en het echte adres van uw winkel — het werkelijke component, weergegeven door dezelfde code die uw winkel gebruikt, niet een schermafbeelding ervan. Slaat u op, dan wordt het voorbeeld opnieuw getekend met wat u koos, zodat u vorm en grootte kunt vastleggen zonder de winkel in een ander tabblad te openen.

Vertaald in acht talen

Duits, Engels, Frans, Italiaans, Nederlands, Pools, Spaans en Turks — elke tekst, ook die uw klanten zien: de kop «Delen», de netwerknamen en de bevestiging «Gekopieerd!».

Compatibiliteit

PrestaShop 1.7 tot en met 9. Drie hooks, plus de widgetinterface, geen overrides en geen themawijzigingen.

Versie 3 was een herschrijving. Bij het upgraden worden de eigen databasetabellen van de oude module verwijderd, de achttien verouderde hooks uitgeschreven en de overbodige bestanden van schijf gewist — inclusief de widgetschermafbeeldingen die er vroeger bij zaten.

Veelgestelde vragen

Laadt dit de code van Facebook of X op mijn pagina's?

Nee — en ook niet uitgesteld of lazy geladen. Er staat helemaal geen script van een sociaal netwerk in uw pagina's. De knoppen zijn gewone HTML-knoppen en het deeladres wordt door ons eigen kleine script opgebouwd op het moment dat iemand klikt. Vóór die klik staat er niets van welk sociaal netwerk dan ook in uw pagina.

Heb ik er een cookiebanner voor nodig?

De module geeft u niets om te melden: hij plaatst geen cookies, schrijft niets naar browseropslag en doet geen enkel verzoek aan derden vóór een klik. Klikt iemand wel, dan gaat die naar de deelpagina van dat netwerk zelf, en dat is diens eigen relatie met dat netwerk. Wat dat voor uw specifieke banner betekent, is een vraag voor wie u over gegevensbescherming adviseert — wij kunnen u precies vertellen wat de code doet, namelijk niets tot er geklikt wordt, maar niet wat uw toezichthouder van uw winkel als geheel verwacht.

Welke netwerken zitten erbij?

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, link kopiëren en het deelmenu van het apparaat zelf. Acht staan standaard aan; Telegram en Reddit worden uitgeschakeld geleverd, zodat u ze kunt toevoegen als u ze wilt.

Toont het deelaantallen?

Nee, met opzet. Facebook, X en LinkedIn hebben hun publieke telendpoints jaren geleden uitgezet, dus een getal komt tegenwoordig ofwel van een betaalde derde partij — wat betekent dat u die de gegevens van uw bezoekers stuurt — ofwel is het niet echt. Wij tonen liever niets dan iets verkeerds.

Waar verschijnen de knoppen?

Standaard onder het product. Er is ook een zwevende balk voor de linker- of rechterrand, op elke pagina of alleen op productpagina's, uitgeschakeld tot u hem wilt. En {widget name='socialpower'} zet ze overal in een themasjabloon. U kunt de module ook naar een andere hook verplaatsen via Design → Posities, en daar werkt hij dan naar behoren.

Kan ik de kleuren aanpassen?

U kunt wisselen tussen de echte merkkleuren van elk netwerk en één neutrale tint, en kiezen uit gevuld, omlijnd of minimaal, drie vormen en drie groottes. Wat niet kan, is per netwerk een eigen kleur instellen — de merkkleuren zijn de echte en die liggen vast.

Maakt het mijn winkel trager?

Eén stylesheet en één script, samen 3,7 KB gzipped, geen jQuery en geen enkel extern verzoek. Het script laadt onderaan, dus het blokkeert de pagina nooit. Goed om te weten: die twee bestanden worden op elke front-officepagina geregistreerd, niet alleen waar de knoppen staan, al bundelt PrestaShop ze normaal gesproken bij de assets van uw eigen thema.

Is het toegankelijk?

Meer dan de meeste. Echte knoppen in plaats van opgemaakte links, dus toetsenbordfocus en -activering werken van nature en schermlezers kondigen ze correct aan, met een label per netwerk en de pictogrammen verborgen voor hulptechnologie. Twee kanttekeningen die u moet kennen: de focusindicator is een lift met schaduw in plaats van de browseromlijning, en alleen de grote maat haalt de richtlijn van 44 pixel voor het aanraakgebied.

Opent de WhatsApp-knop de app op een telefoon?

Ja, al detecteren we het apparaat daar niet voor. De knop gebruikt altijd de universele link van WhatsApp zelf, en WhatsApp regelt de rest — de app op een telefoon, WhatsApp Web op een computer.

Wat is die Delen-knop die alleen op mijn telefoon verschijnt?

Dat is het deelmenu van het besturingssysteem zelf, bereikt via de Web Share API van de browser. Het geeft uw klant zijn echte apps in plaats van een vaste lijst. Hij verschijnt alleen waar de browser hem ondersteunt — de module controleert dat eerst, dus desktopbezoekers krijgen nooit een knop te zien die niets doet.

Slaat het iets over mijn bezoekers op?

Niets. Geen cookies, geen browseropslag, geen databasetabellen — die worden niet aangemaakt, dus er valt achteraf niets op te ruimen. Het schrijft twaalf configuratie-instellingen weg en verwijdert die weer bij het deïnstalleren.

Kan ik zien hoe het eruitziet voordat ik opsla?

Ja. De configuratiepagina rendert een voorbeeld op basis van uw opgeslagen instellingen en het adres van uw eigen winkel, met dezelfde code die de knoppen in uw winkel tekent — dus wat u ziet is werkelijk wat uw klanten krijgen, geen illustratie. Het wordt opnieuw getekend wanneer u opslaat, niet terwijl u typt.

Wat gebeurt er met mijn instellingen uit versie 2?

Versie 3 is een herschrijving en werkt netjes bij: de oude databasetabellen worden verwijderd, de achttien verouderde hooks uitgeschreven, de moderne in hun plaats geregistreerd en de overbodige bestanden van schijf gehaald. Loop daarna de weergave-instellingen even na, want het zijn er nu meer.

Welke talen spreekt het?

Acht: Duits, Engels, Frans, Italiaans, Nederlands, Pools, Spaans en Turks. Daaronder ook de teksten die uw klanten echt lezen — de kop «Delen», de netwerknamen en de bevestiging «Gekopieerd!» — niet alleen de back office.