Fussball.de-Widget in WordPress einbinden
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.
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.
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:
- „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“
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:
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“.
Danke für den tollen und hilfreichen Artikel, Jens.
Das Plugin funktioniert seit der heutigen Version 4.0 wieder.
Jedoch ohne die integrierte Borlabs-Unterstützung. Ich hoffe, dass sie mit deinen Tipps und meinem Plugin weiterhin umsetzbar ist.
Grüße
Alex
Sehr gerne, Alex! Hut ab, dass Du jetzt doch schon für eine neue Plugin-Version gesorgt hast. Probiere ich bald aus.
Noch zwei Ergänzungen:
Zuerst einmal lieben Dank für die Tipps, zumindest das Widget konnte ich schonmal einbinden. Was bei mir nicht funktioniert ist die Einbindung in Borlabs Cookie. Bei mir sieht die Maske in WordPress auch etwas anders aus, als du es beschreibst. „2. Service für fussball.de hinzufügen“ finde ich erst gar nicht. Stehe etwas auf dem Schlauch…
Kann es sein, dass Du noch Borlabs Cookie 2.X verwendest? Da gab es „Services“ noch nicht als separate Funktion. Da der Support dafür eingeschränkt ist, bin ich zur Version 3.X gewechselt.
Vielen lieben Dank, genau das war es!!!
Hallo, ich hatte die neuen Widgets erfolgreich auf meine WordPress Website eingebunden. Nun zeigt er mir jedoch auf der Website einen Fehler, die Website Adresse würde nicht übereinstimmen, was sie jedoch tut. (hat ja auch vorher funktioniert)
Woran kann es liegen?
VG
Hallo Nils,
ohne die genaue Fehlermeldung zu kennen, würde ich mal auf die Website-Einstellung für das Widget auf next.fussball.de tippen. Dort gibt es wohl mit oder ohne „www“ ab und an Probleme. Siehe auch den Screenshot im Plugin-Forum.
Viele Grüße
Jens