Fussball.de-Widget in WordPress einbinden

22. Juli 2024Webdesign

Bis jetzt ließen sich Widgets von fussball.de für Tabelle, Spielplan & Co ziemlich einfach in WordPress einbinden: Ein Plugin bot die perfekte Lösung. Doch pünktlich zum Saison-Auftakt funktioniert das nicht mehr. Aber dafür ein anderer Weg.

​Um Ergebnisse und die nächsten Spiele anzeigen zu lassen, setzen viele kleinere Fußballvereine auf eine einfache Lösung statt eigene Statistiken: WordPress und die Widgets von fussball.de. Die Widgets müssen immer zum Saisonstart (und machmal auch für Rückrunde oder Relegation) einzeln neu erstellt und eingebunden werden. Bei vielen Mannschaften kann das schon einiges an Zeit und Nerven kosten.

WordPress-Plugin für fussball.de funktioniert nicht mehr

Nun sind die Macher von fussball.de auf die Idee gekommen, neue Widgets einzuführen. An und für sich keine schlechte Idee. Denn die bisherigen Widgets waren kaum anpassbar (Farben, Schriftarten etc.) und auf mobilen Endgeräten meist gar nicht zu gebrauchen (nicht responsiv). Zwar funktionieren die alten Widgets/Einbindungen noch. Aber für die neue Saison lassen sich Widgets ausschließlich im neuen System erstellen (next.fussball.de) – und das WordPress-Plugin „Include Fussball.de Widgets“ mit mehr als 1.000 aktiven Installationen funktioniert damit nicht mehr. Deswegen kommen in dieser Saison-Vorbereitung nicht nur die Fußballer*innen ins Schwitzen, sondern auch einige Website-Verantwortliche.

Einige von ihnen und der engagierte Plugin-Autor haben das Problem schon vor einigen Wochen erkannt. Aber er selbst nutzt das kostenlose Plugin gar nicht mehr, hat inzwischen mit komplett anderen Baustellen zu tun und deswegen bisher noch keine Lösung gefunden. Es musste also eine neue her, in meinem Fall für die Website meines Heimatvereins SG Wildeck.

Neue Lösung: WordPress + Fussball.de-Widget + Borlabs Cookie (und Divi)

Für die Wildecker WordPress-Website habe ich die Widgets mit einem weiteren Plugin und einem Theme (Designvorlage) kombiniert. Deswegen ist die hier beschriebene Lösung nicht für alle WordPress-Websites geeignet. Aber hoffentlich zeigt sie anderen betroffenen Fußballvereinen einen geeigneten Weg auf.

Grundsätzlich ist das Einbinden der neuen Widgets von fussball.de ganz einfach:

  • Für den head-Bereich der Website gibt es ein API-Javascript.
  • Für den body-Bereich (Artikel/Seite) etwas Code für das jeweilige Widget.

Code von fussball.de: a) Einbindung des API-Javascripts im -Bereich deiner Website und b) Einbindung des Widgets im -Bereich deiner Website

Das Einbinden im head-Bereich ist in der Regel schnell erledigt. Bei dem in meinem Fall verwendeten Theme Divi gibt es dafür eine eigene Option: Divi -> Theme-Optionen -> Integration.

Screnshot der Divi-Theme-Optionen zur Integration: vier Schiebeschalter und ein Textfeld mit dem Code für fussball.de

Für andere Themes gibt es passende Plugins oder auch manuelle Lösungen. Der Code für den body-Bereich der Website lässt sich ebenfalls einfach einbinden. Zum Beispiel mit dem Block für individuelles HTML.

Allerdings ist für das Abrufen aller Daten von fussball.de die Zustimmung des/der Website-Nutzer*in nötig (Stichwort: DSGVO). Und da wird die Sache kompliziert. Denn das ließ sich bisher per fussball.de-Plugin und Borlabs Cookie ganz einfach und gut dokumentiert lösen. Nun ist es etwas komplizierter.

Anleitung für fussball.de-Widgets und Borlabs Cookie

Für die Zustimmung zum Abrufen von Daten von fussball.de für die Widgets verwende ich in diesem Fall Borlabs Cookie (Version 3.X).

1. fussball.de-Script blockieren

Damit das im head-Bereich eingebundene Script erst nach Zustimmung aufgerufen wird, muss es zunächst geblockt werden. Dafür ist in Borlabs Cookie ein neuer Script-Blocker anzulegen:

Screenshot aus Borlabs Cookie: gefundenes Script mit aktiviertem Blockieren-Button

  • „Neu hinzufügen“
  • ID vergeben (am besten mit „c-“ für custom am Anfang)
  • beliebigen Namen vergeben
  • Scan: Seite/URL mit eingebundenem Skript auswählen, als Such-Phrase „fussball“ eingeben und „Scan starten“
  • bei „Übereinstimmende Tags“ anschließend den Fund blockieren
  • „Status“ unter ID auf aktiv ändern und „Alle Einstellungen speichern“

2. Service für fussball.de hinzufügen

Mit dem Service werden alle angezeigten Informationen zum Widget angelegt:

  • „Neu hinzufügen“
  • Name vergeben: zum Beispiel „fussball.de Widget“
  • Beschreibung ergänzen: zum Beispiel „Wird verwendet, um Termine, Ergebnisse, Tabellen und Statistiken von fussball.de zu laden.“
  • Provider: Haken bei Provider-Liste entfernen und neuen anlegen (mit Daten aus Impressum, keine IAB-Vendor-ID nötig)
  • Adresse hinzufügen: fussball.de und als Pfad „/“
  • Opt-in-Code: „Service Opt-in Script-Tag“ aus angelegtem Script-Blocker für fussball.de
  • „Alle Einstellungen speichern“
YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

3. Content-Blocker für fussball.de setzen

Mit einem neuen Content-Blocker lässt sich die Zustimmung in Artikeln und auf Seiten abfragen, falls noch kein generelles Cookie-Einverständnis vorliegt.

  • „Neu hinzufügen“
  • ID vergeben (am besten mit „c-“ für custom am Anfang)
  • Status auf aktiv stellen
  • beliebigen Namen vergeben
  • angelegten Service und Provider auswählen
  • Adresse hinzufügen: fussball.de und als Pfad „/“
  • bei „Vorschau gesperrter Inhalte“ zumindest einmal die „Voreinstellung anwenden“ (oder im Detail anpassen)
  • JavaScript/Global: „Content-Blocker Global-JavaScript“ aus angelegtem Script-Blocker für fussball.de
  • „Alle Einstellungen speichern“

Mit dem Short-Code des Content-Blockers ist dann jeder einzelne Widget-Code für den body-Bereich (in Artikeln/auf Seiten) einzurahmen:

Screenshot mit Shortcode für Content-Blocker und Body-Code für fussball.de-Widget

Tipp: Am Ende des body-Codes von fussball.de fehlt noch der schließende div-Tag.

Kritik & Vorschläge für fussball.de

Dieser Tag ist leider nicht das einzige, was die Macher*innen von fussball.de offenbar komplett vergessen haben. Was auch noch schön gewesen wäre – und nicht zum ersten Mal vergessen worden ist:

  • vorab Wünsche abfragen und berücksichtigen sowie laufend strukturiert Feedback ermöglichen und beantworten (bisher ohne Antworten in einem weitgehend verwaisten Forum und unter einer News aus dem Jahr 2017…)
  • frühzeitige und ausführliche Information aller Nutzer*innen (kein Widget ohne Registrierung: alle E-Mail-Adressen bekannt)
  • rechtzeitige Einbindung von externen Entwicklern für WordPress (wie dem gut erreichbaren Plugin-Autor) und anderen weit verbreiteten CMS
  • ausreichend lange Test- und Übergangs-Phase, in der auch das alte System weiterhin funktioniert (mindestens zwei bis drei Monate, vor und nach Sommerferien aller Bundesländer)

Besonders wichtig finde ich das, weil davon nun vor allem Ehrenamtliche betroffen sind: Ehrenamtliche kümmern sich nicht nur um tausende Websites von Fußballvereinen. Ehrenamtliche sind es auch, die Woche für Woche die meisten Daten für fussball.de liefern.

Was ebenfalls fehlt auf next.fussball.de: eine funktionierende Suche und Navigation. Bei der Suche nach „Widgets“ gibt es bisher null Treffer. Für die Navigation zu den Widgets ist nach dem Anmelden erst „Profil“ oder „Profil & Konto“ über das Seitenmenü (drei Punkte oben rechts) aufzurufen. Erst dann erscheint in diesem Seitenmenü auch „Meine Widgets“.

Lesenswert? Dann bitte weiterempfehlen!