Social-Media-Links im Footer: Facebook, Instagram, TikTok
Vierte Footer-Spalte "Folgen" auf allen fünf Seiten. Icon plus Text statt Icon allein; Icons erben currentColor statt Markenfarben, weil Farbe im Fließtext keine Information trägt. Nur einfache Links, keine Plugins, Feeds oder Folgen-Schaltflächen. Solche Widgets würden beim Seitenaufruf fremde Skripte laden und Cookies setzen und damit die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht. Gemessen nach dem Einbau: weiterhin null Fremdanfragen, keine Cookies, kein Storage. Datenschutzerklärung um Abschnitt 4b ergänzt. Alle drei Ziele vor dem Einbau im Browser aufgerufen und bestätigt. Bei Facebook steht die dauerhafte Profiladresse mit der ID 61594794906587, nicht der gelieferte Share-Link: der ist undurchsichtig, hängt an einer Weiterleitung und kann ungültig werden. Nebenbefund behoben: die 44px-Regel für Fusszeilen-Links war wirkungslos, weil die Basisregel mit min-height:30px später in site.css steht. Gemessen waren es auf dem Handy 30px. Override ans Dateiende gehängt, betrifft alle 13 Links. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
f6e98cdcbb
commit
5df349fc71
8 files changed
+143
No files matched your search
@@ -326,6 +326,56 @@ abgelöst) und `datenschutz.html`. Beide nutzen die `.prose`-Klassen. Offene Ang
|
||||
als `.todo`-Felder mit gestricheltem Coral-Rahmen im Fließtext, damit nichts davon
|
||||
versehentlich live geht, plus ein `.prose__warn`-Kasten oben auf jeder Seite.
|
||||
|
||||
## Social Media (2026-09-29)
|
||||
|
||||
Vierte Footer-Spalte „Folgen" auf allen fünf Seiten: Facebook, Instagram, TikTok.
|
||||
|
||||
**Nur Links, keine Einbettungen.** Kein Page-Plugin, kein Feed, keine Like- oder
|
||||
Folgen-Schaltfläche. Solche Widgets laden fremde Skripte beim Seitenaufruf und setzen
|
||||
Cookies — das würde die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht.
|
||||
Dieselbe Überlegung wie bei der Karte, nur mit dem angenehmeren Ergebnis: bei reinen Links
|
||||
braucht es nicht einmal eine Zwei-Klick-Lösung. Gemessen nach dem Einbau: weiterhin null
|
||||
Fremdanfragen, keine Cookies, kein Storage.
|
||||
|
||||
**Icon plus Text, nicht Icon allein.** Eine reine Icon-Reihe zwingt zum Raten und braucht
|
||||
eigene Beschriftung für Screenreader. Mit Text greift `.ftr__col a` unverändert weiter,
|
||||
inklusive Zielgrößen. Jeder Link trägt zusätzlich ein verstecktes
|
||||
„(öffnet in neuem Fenster)" und `rel="noopener noreferrer"`.
|
||||
|
||||
**Icons erben `currentColor`,** tragen also `--ink-700` statt Markenfarben. Im Fließtext
|
||||
trägt Farbe keine Information — siehe Abschnitt Farbe. Die Markenzeichen bleiben in ihrer
|
||||
Form unverändert; als Verweis auf das eigene Profil ist das zulässige Nennung.
|
||||
|
||||
**Die drei Ziele, alle vor dem Einbau im Browser geprüft:**
|
||||
|
||||
| | Adresse | Stand 29.09.2026 |
|
||||
|---|---|---|
|
||||
| Facebook | `/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/` | Seite bestätigt |
|
||||
| Instagram | `instagram.com/emmas_schatzkiste/` | 70 Follower, 112 Beiträge |
|
||||
| TikTok | `tiktok.com/@emmasschatzkiste` | 29 Videos, 64 Follower |
|
||||
|
||||
**Bei Facebook steht die dauerhafte Adresse, nicht der Share-Link.** Geliefert wurde
|
||||
`facebook.com/share/19NxMjLkKT/`. Solche Links sind undurchsichtig — beim Überfahren sieht
|
||||
niemand, wohin es geht —, sie hängen an einem Weiterleitungsschritt und können ungültig
|
||||
werden. Im Browser aufgelöst ergibt sich die Profiladresse mit der festen ID
|
||||
`61594794906587`; die steht jetzt im Footer, ohne die angehängten Tracking-Parameter
|
||||
`rdid` und `share_url`.
|
||||
|
||||
**Der Platzhalter-Mechanismus bleibt im CSS.** `.ftr__social[href^="URL-"]` zeichnet einen
|
||||
gestrichelten Coral-Rahmen, falls je wieder eine Adresse fehlt. Erfundene Profil-Links
|
||||
kommen nicht in Frage: ein Icon, das auf ein fremdes Konto führt, ist schlimmer als keins.
|
||||
|
||||
### Nebenbefund: die 44px-Regel im Footer war wirkungslos
|
||||
|
||||
Beim Messen aufgefallen: Fusszeilen-Links waren auf dem Handy **30px** hoch, nicht 44.
|
||||
Die Mobilregel steht in `site.css` bei Zeile ~245, die Basisregel mit `min-height:30px`
|
||||
im FOOTER-Abschnitt bei ~622 — gleiche Spezifität, spätere Regel gewinnt. Die weiter oben
|
||||
dokumentierte Korrektur war dadurch seit Längerem außer Kraft. Behoben durch einen Block
|
||||
am Dateiende; betrifft alle 13 Footer-Links, nicht nur die neuen.
|
||||
|
||||
Das ist im Projekt der dritte Fall derselben Falle. Merke: Overrides für Regeln aus den
|
||||
Komponentenabschnitten gehören ans **Ende** von `site.css`, nicht in den Mobile-Block oben.
|
||||
|
||||
## Mobil und Touch
|
||||
|
||||
**Überarbeitung 2026-09-24** (Kundenrückmeldung: Einstieg schwach, Header klobig, zu lang,
|
||||
|
||||
Reference in new issue
Block a user