Przyciski udostępniania — Facebook, X, WhatsApp i siedem innych, bez skryptów firm trzecich, do PrestaShop

Zwykłe rozwiązanie kosztuje klientów ich prywatność

Większość modułów z przyciskami udostępniania osadza w sklepie firmowe widżety samych serwisów. To znaczy, że skrypt Facebooka, skrypt X i skrypt LinkedIna ładują się na Twoich stronach, ustawiają swoje pliki cookie i odnotowują, kto je odwiedził — niezależnie od tego, czy ktokolwiek cokolwiek udostępnił.

Efekt: baner zgody, kolejny akapit w polityce prywatności, trzy zapytania do serwerów firm trzecich na każdej stronie i wolniejszy sklep. W zamian dostajesz przycisk udostępniania.

Ten moduł idzie zupełnie inną drogą.

Nic się nie ładuje, dopóki ktoś nie kliknie

W Twoich stronach nie ma żadnego kodu serwisów społecznościowych. Nie odroczonego, nie ładowanego leniwie, nie ukrytego za nakładką „kliknij, aby załadować" — po prostu go nie ma.

Przyciski to zwykłe elementy <button> HTML. Adres udostępnienia składa nasz mały skrypt, na Twoim własnym serwerze, dokładnie w chwili kliknięcia — i dopiero wtedy otwiera się okno do Facebooka, X czy WhatsAppa. Przed tym kliknięciem w Twojej stronie nie ma żadnego adresu Facebooka, do którego przeglądarka mogłaby się wcześniej połączyć, nie ma czego wycieknąć w nagłówku referer i nie ma na co wyrażać zgody.

Jedyne dwa ładowane pliki są nasze i pochodzą z Twojej własnej domeny.

Dziesięć miejsc do udostępniania

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, kopiowanie linku oraz systemowy panel udostępniania telefonu.

Osiem jest włączonych od razu po instalacji. Telegram i Reddit czekają na wypadek, gdybyś ich potrzebował — domyślnie wyłączone, żeby wiersz przycisków nie robił się zatłoczony.

Dwa z nich w ogóle nie kontaktują się z internetem. Kopiuj link wrzuca adres do schowka. Przycisk Udostępnij przekazuje go systemowemu panelowi udostępniania, więc na telefonie klient dostaje swoje prawdziwe aplikacje — te, w których naprawdę pisze do ludzi — zamiast Twojego zgadywania, które z nich się liczą.

Ten natywny przycisk pojawia się tylko w przeglądarkach, które go obsługują, więc nikt nigdy nie zobaczy przycisku, który nic nie robi.

Ma wyglądać jak Twój sklep, a nie jak rok 2013

Cztery ustawienia i każda kombinacja działa: wypełniony, obrys albo minimalny; zaokrąglony, koło albo kwadrat; trzy rozmiary; oraz kolory marek albo jeden neutralny odcień.

To pięćdziesiąt cztery warianty wyglądu, zanim jeszcze zdecydujesz o etykietach tekstowych i nagłówku. Ikony są rysowane jako wbudowany SVG w Twojej stronie — bez fontu ikon do pobrania, bez sprite'a graficznego, bez CDN — więc biorą kolor z arkusza stylów i pozostają ostre w każdym rozmiarze. Jest też tryb ciemny, który podąża za ustawieniem systemowym odwiedzającego.

Jedno uczciwe ograniczenie: kolory marek są prawdziwymi kolorami tych serwisów i są ustalone na sztywno. Wybierasz między kolorami marek a neutralnym — to nie jest próbnik kolorów.

Pod produktem, przy krawędzi ekranu albo gdziekolwiek zechcesz

Domyślnie wiersz udostępniania pojawia się pod produktem. Jest też pływający pasek — przy lewej albo prawej krawędzi, na wszystkich stronach albo tylko na stronach produktów — wyłączony, dopóki go nie włączysz, i przenoszący się na dół ekranu na telefonach.

Poza tym moduł implementuje interfejs widżetu PrestaShop, więc {widget name='socialpower'} wstawia przyciski w dowolny szablon motywu. Ponieważ każde umiejscowienie przechodzi przez ten sam kod, przeniesienie modułu na inny hook z poziomu Wygląd → Pozycje działa naprawdę, a nie połowicznie.

3,7 KB i nic poza tym

Jeden arkusz stylów i jeden skrypt — razem 3,7 KB po kompresji gzip. Bez jQuery. Bez frameworka. Bez paczki polyfilli. Bez fontu webowego.

Skrypt ładuje się na końcu strony, więc nigdy nie blokuje renderowania, i natychmiast kończy działanie na stronach, na których nie ma żadnych przycisków.

Żeby postawić sprawę jasno: te dwa małe pliki są rejestrowane na każdej stronie front-office, a nie tylko na tych, które faktycznie pokazują przyciski. W normalnie skonfigurowanym sklepie PrestaShop łączy je z własnymi zasobami motywu, więc praktyczny koszt jest zerowy — ale to są dwa pliki, a nie zero, i wolimy to powiedzieć, niż pozwolić Ci odkryć to samodzielnie.

Czego moduł świadomie nie robi

Nie ma liczników udostępnień — i to decyzja, a nie brak. Facebook, X i LinkedIn wycofały swoje publiczne punkty zliczania między 2015 a 2018 rokiem. Każdy moduł, który wciąż pokazuje jakąś liczbę, albo pokazuje nieaktualną, albo płaci za nią firmie trzeciej — a płacenie firmie trzeciej oznacza wysyłanie jej danych Twoich odwiedzających. Wolimy nie pokazywać żadnej liczby niż pokazywać błędną.

Moduł nie dzwoni do domu. Bez sprawdzania licencji, bez analityki, bez jakiegokolwiek połączenia z nami.

Nic nie jest nigdzie przechowywane

Żadnych plików cookie. Żadnego magazynu w przeglądarce. Żadnych tabel w bazie danych — nie są tworzone, więc nic po nich nie zostaje. Moduł zapisuje dwanaście ustawień i nic więcej, a odinstalowanie usuwa również je.

Dwie rzeczy warto nazwać wprost, zamiast je przemilczeć, bo to interfejsy przeglądarki, a nie zupełne nic. Kopiuj link korzysta z Clipboard API, które zapisuje lokalnie i nic nigdzie nie wysyła. Udostępnij przekazuje adres systemowi operacyjnemu, a to, co system zrobi dalej, jest już jego sprawą, nie naszą. Żadna z tych rzeczy nie stanowi problemu; obie zasługują raczej na uczciwy opis niż na przemilczenie.

Zaprojektowane do obsługi klawiaturą

Przyciski to prawdziwe elementy <button>, a nie linki ani ostylowane divy, więc otrzymują fokus i uruchamiają się z klawiatury tak, jak przeglądarka tego oczekuje, a czytniki ekranu ogłaszają je jako przyciski. Każdy ma etykietę z nazwą serwisu, a ikony są ukryte przed technologiami wspomagającymi, żeby nic nie było odczytywane dwa razy.

Trzy ograniczenia, powiedziane wprost. Domyślny obrys fokusu przeglądarki zastępujemy własnym wskaźnikiem — uniesieniem i cieniem, który czytelnie działa w stylach wypełnionym i obrysie. W stylu minimalnym ten cień jest celowo wyłączony, więc fokus klawiatury objawia się tam wyłącznie drobnym uniesieniem i zmianą przezroczystości: jeśli wśród Twoich klientów są osoby korzystające z klawiatury, wybierz wypełniony albo obrys. I z trzech rozmiarów tylko duży spełnia wytyczną 44 pikseli dla celu dotykowego; najmniejszy ma 32 piksele.

Skonfiguruj, patrząc na efekt

Strona konfiguracji pokazuje podgląd zbudowany z Twoich zapisanych ustawień i adresu Twojego sklepu — prawdziwy komponent wyrenderowany tym samym kodem, którego używa Twój sklep, a nie zrzut ekranu. Zapisz zmiany, a podgląd przerysuje się zgodnie z wyborem, więc kształt i rozmiar ustalisz bez otwierania sklepu w drugiej karcie. Podgląd odświeża się przy zapisie, a nie w trakcie klikania po opcjach.

Przetłumaczone na osiem języków

Niderlandzki, angielski, francuski, niemiecki, włoski, polski, hiszpański i turecki — każdy ciąg, łącznie z tymi, które widzą Twoi klienci: nagłówek „Udostępnij", nazwy serwisów i potwierdzenie „Skopiowano!".

Polskie tłumaczenie jest dostarczane razem z modułem, więc polski klient widzi „Udostępnij", „Kopiuj link" i „Skopiowano!" — a w panelu administracyjnym „Styl przycisków", „Kolory marki", „Pływający pasek" i całą resztę po polsku, bez dopisywania czegokolwiek ręcznie.

Zgodność

PrestaShop 1.7 do 9. Trzy hooki plus interfejs widżetu, bez override'ów i bez modyfikacji motywu.

Wersja 3 to przepisanie modułu od nowa. Przy aktualizacji tabele bazy danych starego modułu są usuwane, jego osiemnaście przestarzałych hooków jest wyrejestrowywanych, a nieaktualne pliki kasowane z dysku — łącznie ze zrzutami ekranu widżetów, które kiedyś były dołączane.

Najczęściej zadawane pytania

Czy moduł ładuje na moich stronach kod Facebooka albo X?

Nie — i nie robi tego również w sposób odroczony ani leniwy. W Twoich stronach nie ma żadnego skryptu serwisu społecznościowego. Przyciski to zwykłe elementy <button> HTML, a adres udostępnienia składa nasz własny mały skrypt w chwili kliknięcia. Przed tym kliknięciem w Twojej stronie nie ma niczego pochodzącego z jakiegokolwiek serwisu społecznościowego.

Czy potrzebuję do tego banera cookie?

Moduł nie daje Ci niczego do zadeklarowania: nie ustawia plików cookie, nic nie zapisuje w magazynie przeglądarki i nie wysyła żadnego zapytania do firmy trzeciej przed kliknięciem. Gdy ktoś już kliknie, trafia na stronę udostępniania danego serwisu, a to jest jego własna relacja z tym serwisem. Co to oznacza dla Twojego konkretnego banera, to pytanie do osoby, która doradza Ci w sprawach ochrony danych — możemy dokładnie powiedzieć, co robi kod, czyli nic aż do kliknięcia, ale nie to, czego organ nadzorczy oczekuje od Twojego sklepu jako całości.

Jakie serwisy są dostępne?

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, e-mail, kopiowanie linku i systemowy panel udostępniania urządzenia. Osiem jest włączonych domyślnie; Telegram i Reddit są dostarczane wyłączone, więc dodasz je, jeśli ich chcesz.

Czy pokazuje liczbę udostępnień?

Nie, celowo. Facebook, X i LinkedIn wyłączyły swoje publiczne punkty zliczania lata temu, więc dzisiejsza liczba albo pochodzi od płatnej firmy trzeciej — co oznacza wysyłanie jej danych Twoich odwiedzających — albo nie jest prawdziwa. Wolimy nie pokazywać nic niż coś błędnego.

Gdzie pojawiają się przyciski?

Domyślnie pod produktem. Jest też pływający pasek przy lewej albo prawej krawędzi, na wszystkich stronach albo tylko na stronach produktów, wyłączony do chwili, gdy go zechcesz. A {widget name='socialpower'} umieszcza je w dowolnym miejscu szablonu motywu. Możesz też przenieść moduł na inny hook w Wygląd → Pozycje i tam też zadziała poprawnie.

Czy mogę zmienić kolory?

Możesz przełączać się między prawdziwymi kolorami marek poszczególnych serwisów a jednym neutralnym odcieniem oraz wybrać styl wypełniony, obrys albo minimalny, trzy kształty i trzy rozmiary. Czego nie możesz zrobić, to ustawić własnego koloru dla konkretnego serwisu — kolory marek są prawdziwe i ustalone na sztywno.

Czy spowolni mój sklep?

Jeden arkusz stylów i jeden skrypt, razem 3,7 KB po kompresji gzip, bez jQuery i bez zewnętrznych zapytań. Skrypt ładuje się na końcu strony, więc nigdy jej nie blokuje. Warto wiedzieć: te dwa pliki są rejestrowane na każdej stronie front-office, a nie tylko tam, gdzie widać przyciski — choć PrestaShop zwykle łączy je z zasobami Twojego motywu.

Czy moduł jest dostępny dla osób z niepełnosprawnościami?

Bardziej niż większość. Prawdziwe przyciski zamiast ostylowanych linków, więc fokus i uruchamianie z klawiatury działają natywnie, a czytniki ekranu ogłaszają je poprawnie, z etykietą dla każdego serwisu i ikonami ukrytymi przed technologiami wspomagającymi. Trzy zastrzeżenia, które warto znać: wskaźnik fokusu to nasze własne uniesienie z cieniem, a nie obrys przeglądarki; ten cień jest wyłączony w stylu minimalnym, przez co fokus klawiatury jest tam znacznie słabiej widoczny, więc wybierz wypełniony albo obrys, jeśli to dla Ciebie ważne; i tylko duży rozmiar spełnia wytyczną 44 pikseli dla celu dotykowego.

Czy przycisk WhatsApp otwiera aplikację na telefonie?

Tak, choć nie wykrywamy w tym celu urządzenia. Przycisk zawsze używa uniwersalnego linku samego WhatsAppa, a resztą zajmuje się WhatsApp — aplikacja na telefonie, WhatsApp Web na komputerze.

Czym jest przycisk Udostępnij, który widzę tylko na telefonie?

To systemowy panel udostępniania, wywoływany przez przeglądarkowe Web Share API. Daje klientowi jego prawdziwe aplikacje zamiast sztywnej listy. Pojawia się tylko tam, gdzie przeglądarka go obsługuje — moduł najpierw to sprawdza, więc odwiedzającym na komputerach nigdy nie pokazuje przycisku, który nic nie robi.

Czy moduł przechowuje cokolwiek o moich odwiedzających?

Nic. Żadnych plików cookie, żadnego magazynu w przeglądarce, żadnych tabel w bazie danych — nie tworzy żadnych, więc nie ma czego potem sprzątać. Zapisuje dwanaście ustawień konfiguracyjnych i usuwa je przy odinstalowaniu.

Czy mogę zobaczyć, jak to będzie wyglądać, zanim zapiszę?

Podgląd na stronie konfiguracji jest rysowany z ustawień już zapisanych i z adresu Twojego sklepu, tym samym kodem, który rysuje przyciski w sklepie — więc to, co widzisz, jest naprawdę tym, co dostaną klienci, a nie ilustracją. Odświeża się przy zapisie, nie w trakcie zmieniania opcji: żeby zobaczyć nowy wygląd, najpierw zapisz.

Co stanie się z moimi ustawieniami z wersji 2?

Wersja 3 to przepisanie od nowa i aktualizuje się czysto: stare tabele bazy danych są usuwane, osiemnaście przestarzałych hooków jest wyrejestrowywanych, w ich miejsce rejestrowane są nowoczesne, a nieaktualne pliki znikają z dysku. Warto potem przejrzeć ustawienia wyglądu, bo jest ich teraz więcej.

W jakich językach mówi moduł?

W ośmiu: niderlandzkim, angielskim, francuskim, niemieckim, włoskim, polskim, hiszpańskim i tureckim. Obejmuje to ciągi, które faktycznie czytają Twoi klienci — nagłówek „Udostępnij", nazwy serwisów i potwierdzenie „Skopiowano!" — a nie tylko panel administracyjny.