Tabelle, Spielplan und Co. – Fussball.de-Widgets im Homepage-Baukasten

Tabelle, Spielplan und Co. – Fussball.de-Widgets im Homepage-Baukasten

Du möchtest den aktuellen Vereinsspielplan oder die Kreisliga-Tabelle auf Deiner Homepage einbinden? Im Homepage-Baukasten kannst Du dafür den Anbieter Fussball.de nutzen und dessen Widgets auf Deine Seite bringen. Hier erfährst Du, wie das funktioniert.

1. Erstelle Dein eigenes Widget

Grundvoraussetzung für Dein eigenes Widget ist zunächst ein Konto auf Fussball.de. Sobald Du registriert bist, kannst Du im Benutzer-Menü unter „Inhalte verwalten“ → „Deine Widgets“  ein neues Widget erstellen. Hier gibt es verschiedene Widget-Typen:

  1. Wettbewerb: Spielplan für eine Meisterschaft
  2. Vereinsspielplan: Spielplan für einen Verein
  3. Mannschaftsspielplan: Spielplan einer konkreten Mannschaft
  4. Letzte/nächste Spiele: Jeweils das nächste und das letzte Spiel
  5. Kader: Der Kader einer Mannschaft
  6. Tabelle: Die aktuelle Tabelle einer bestimmten Liga
Im Widget-Menü auf Fussball.de suchst Du zunächst einen Inhalt aus.
Im Widget-Menü auf Fussball.de suchst Du zunächst einen Inhalt aus.

2. Lasse den Code erzeugen

Anschließend wirst Du gefragt, für welche Website das Widget generiert werden soll.

Wichtig: Gib hier nicht die Adresse Deiner eigenen Website an, sondern „strato-editor-widget.com“ (ohne www., http:// oder https:// davor).

Damit der Homepage-Baukasten das Widget anzeigen kann, tippst Du als Website „strato-editor-widget.com“ ein.
Damit der Homepage-Baukasten das Widget anzeigen kann, tippst Du als Website „strato-editor-widget.com“ ein.

Du erhältst jetzt einen Code, der aus zwei Skripten besteht: Ein Teil ist für den sogenannten „head“-Bereich Deiner Seite, der andere für den „body“.

Der Code von Fussball.de besteht aus zwei Skripten: das eine für den "head"-Bereich und ein weiteres für den "body".
Der Code von Fussball.de besteht aus zwei Skripten: das eine für den-Bereich und ein weiteres für den.

3. Stelle Dir Den Code für Deine Homepage zusammen

Für den Homepage-Baukasten musst Du beide Code-Schnipsel für „head“ und „body“ in einem zusammenhängenden Code kombinieren. Dafür nutzt Du den untenstehenden Code. Die fett markierten Stellen kannst Du eins zu eins übernehmen. An den kursiven Stellen setzt Du jeweils die beiden Code-Schnipsel ein, die Du von Fussball.de bekommen hast – im oberen Teil den Code für <head>, unten den für <body>:

Code_Snippet_sept2018
Über diesen Link kannst Du den Code direkt öffnen und kopieren.

4. Binde den Inhalt in den Homepage-Baukasten ein – mit dem Embed-Widget

Nun hast Du von Fussball.de alles, was Du brauchst – lass uns im Homepage-Baukasten weitermachen.

Zum Einbinden fremder Codes in Deine eigene Seite dient das Embed-Widget. Das findest Du im Menü unter „Inhaltselemente“.

Im Homepage-Baukasten unter „Inhaltselemente“ findest Du das Embed-Widget.
Im Homepage-Baukasten unter „Inhaltselemente“ findest Du das Embed-Widget.Im Homepage-Baukasten unter „Inhaltselemente“ findest Du das Embed-Widget.

Ziehe das Embed-Widget an genau die Stelle, an der Du den Inhalt von Fussball.de haben möchtest:

Das Widget ziehst Du einfach per Drag&Drop an die entsprechende Stelle auf Deiner Seite.
Das Widget ziehst Du einfach per Drag&Drop an die entsprechende Stelle auf Deiner Seite.

Wenn Du mit der Maus auf das Widget gehst, kannst Du mit Klick auf das Zahnrad-Symbol rechts oben die Einstellungen öffnen – hier konfigurierst Du das Embed-Widget.

Über das Zahnrad-Symbol kommst Du in die Einstellungen des Embed-Widgets.
Über das Zahnrad-Symbol kommst Du in die Einstellungen des Embed-Widgets.

Die Voreinstellungen „Art der Einbindung: Embed-Code“ und „CSS Einbindung: globale css“ kannst Du beibehalten. In die Mitte fügst Du den entsprechenden CSS-Code ein.

Über das Zahnrad-Symbol kommst Du in die Einstellungen des Embed-Widgets.
Über das Zahnrad-Symbol kommst Du in die Einstellungen des Embed-Widgets.

Hat alles geklappt? Um das zu prüfen, öffnest Du die Vorschau Deiner Seite. Jetzt wird hier das Widget angezeigt:

Wenn Du alles richtig gemacht hast, zeigt die Vorschau das Widget an – in unserem Fall die Bundesliga-Tabelle.
Wenn Du alles richtig gemacht hast, zeigt die Vorschau das Widget an – in unserem Fall die Bundesliga-Tabelle.

Noch ein kleiner Tipp: Die Breite des Widgets selbst kannst Du auf Fussball.de in der Widget-Vorschau anpassen. Hier kannst Du sogar individuelle Farben festlegen:

In der Widget-Vorschau bei Fussball.de kannst Du einstellen, wie breit das Widget angezeigt wird.
In der Widget-Vorschau bei Fussball.de kannst Du einstellen, wie breit das Widget angezeigt wird.

Schau am besten, dass das Widget von Fussball.de selbst nicht breiter ist als das Embed-Widget auf Deiner Seite im Homepage-Baukasten. Andernfalls müssen Deine Besucher nämlich umständlich nach rechts und links scrollen. Die Höhe des Widgets kannst Du im Homepage-Baukasten selbst ändern, indem Du das Embed-Widget einfach größer oder kleiner ziehst.

Dein Fußballverein hat noch keine eigene Homepage?

Dann solltest Du das schleunigst ändern! Unser Homepage-Baukasten bietet Dir dafür die optimalen Design-Vorlagen – und jetzt weißt Du sogar, wie Du Fußball-Tabellen dort einbindest. 🙂


Update (25.5.18, Michael): Wir haben den Klick-Pfad zum Widget-Menü noch einmal genauer beschrieben.

Update (20.9.18, Michael): Der Code-Snippet stimmte so nicht mehr – den haben wir angepasst.

Teilen

  1. Avatar

    Thomas sagte am

    Hallo zusammen,
    die Einbindung des fussball.de Widgets hat funktioniert.
    Jetzt habe ich das Problem, dass die Breite festgelegt ist und dieses bei kleinen Bildschirmen (Handys) nicht passt. D.h. es ist zu breit.
    Man kann es sicher über „eigenes css“ auf die Breite eines jeden Bildschirms anpassen.
    Leider bekomme ich es nicht hin.
    Vielen Dank im Voraus für eure Unterstützung.
    Gruß Thomas

    Antworten
    • Avatar

      Lisa Kopelmann sagte am

      Hallo Thomas,

      ich weiß leider nicht, ob das Element von fussball.de responsiv ist. Am besten schaust Du einmal in den Einstellungen nach oder wendest Dich direkt an fussball.de.

      Viele Grüße
      Lisa

      Antworten
    • Avatar

      Daniel sagte am

      Das mit dem Responsive habe ich auch. Leider sind die Tabellen nicht für den mobilen Bereich gedacht.

      Antworten
  2. Avatar

    Ronny sagte am

    Hallo,

    super Seite, ABER
    setzen Sie bitte den Hinweis das das http“s“ fehlt bei verschlüsselten Seiten.
    Muss also heißen:
    src=“https://www.fussball.de/static/layout/fbde2/egm//js/widget2.js“>

    Antworten
  3. Avatar

    Marcel Morr sagte am

    Hallo,

    ich versuche seit Längerem die Tabelle von Fussball.de einzubinden, nur leider funktioniert das nicht. Mit anderen Widgets habe ich merkwürdigerweise keinerlei Probleme (bspw. Letzte/nächste Spiele). Wenn ich die Tabelle gemäß der Anleitung auf dieser Seite einbinden will kommt keine Fehlermeldung sondern es erscheint einfach nichts an dieser Stelle… Anbei der Code, den ich verwende:

    new fussballdeWidgetAPI().showWidget(‚widget1‘, ‚023VTDN9V0000000VS541L4HVS74CJKC‘);

    Man sieht zwar dann den Platzhalter für dieses Widget, aber die Tabelle wird nicht angezeigt…

    Habt ihr eine Idee, wie ich es endlich schaffe, diese Tabelle einzubauen?

    Vielen Dank schonmal

    Antworten
    • Avatar

      Thomas Ritter sagte am

      Hallo Marcel,

      entschuldige die späte Antwort. Wir musste erst noch einen Experten zu Rate ziehen. Wir können uns grundsätzlich zwei Fehlerquellen vorstellen:

      1. In der zweiten Zeile des Codes im Blogbeitrag kann es bei Copy & Paste passieren, dass du anstellen eines “ ein � angezeigt bekommst. Dieses müsstest Du manuell in ein “ ändern.
      2. Es kann auch sein, dass eine falsche Domain bei Fußball.de eingetragen wurde (Punkt 2 im Blog).

      Prüfe bitte einmal diese beiden Aspekte. Ansonsten können wir aus der Ferne nicht nachvollziehen, was bei Dir konkret schief ging. Wenn Du uns sagst, welche Tabellen Du konkret einbinden möchtest, können wir das aber gerne einmal selbst ausprobieren.

      Schöne Grüße
      Thomas

      Antworten
      • Avatar

        Marcel Morr sagte am

        Hallo Thomas,

        danke für die Rückmeldung. Beides geprüft, aber war soweit alles in Ordnung. Leider wird mir die Tabelle noch immer nicht angezeigt…
        Ich würde gerne die Fussball.de Tabelle ( im kleinsten Format (250 Pixel) auf unserer Seite abbilden. Das Ganze soll im rechten (grauhinterlegten) Bereich dargestellt werden.

        Danke für Eure Hilfe und Gruß

        Marcel

        Antworten
        • Avatar

          Michael Poguntke sagte am

          Hallo Marcel,

          wie Thomas oben erwähnt hat, fehlen uns leider die nötigen Hintergrundinfos, um die Fehlerquelle ausfindig zu machen. Prüfe bitte noch einmal akribisch, ob Du die obige Anleitung genau so umgesetzt hast wie beschrieben und ob der Code genau so eingebaut ist, ohne dass ein Element vergessen wurde.

          Falls das alles nicht geholfen hat, schreibe uns bitte eine Mail an presse@strato.de. In der Mail brauchen wir so viele Infos wie möglich zum Code: Welche Tabelle möchtest Du anzeigen? Welchen Code hast Du bislang wie eingebunden? Dann kann ich unseren Experten bitten, da einmal drüber zu schauen. Die Rückmeldung kann ein paar Tage dauern, da er sehr beschäftigt ist. Aber ich denke, wir können auch mal eine Fehleranalyse anstellen. 🙂

          Beste Grüße
          Michael

          Antworten
  4. Avatar

    Bernd Fiedler sagte am

    Hallo Strato,

    toller Artikel. Fussball.de hat es leider nicht nötig gehabt uns bei der Einbindung ihrer Widgets zu unterstützen. Trotz mehrmaliger Anfragen haben wir noch nicht einmal eine Stellungnahme bekommen. Hiermit klappt es jetzt

    Antworten
  5. Avatar

    Stefan sagte am

    Hallo,
    gibt es auch eine Möglichkeit Tabellen von Fussball.de in Livepages einzubetten?

    Antworten
    • Avatar

      Michael Poguntke sagte am

      Hallo Stefan,

      leider nicht. Im neuen Homepage-Baukasten geschieht das über das Embed-Widget. Das ermöglicht Dir, Codes von externen Websites in Deine Homepage zu integrieren. Eine solche Möglichkeit hast Du bei LivePages nicht.

      Es gäbe eine Alternative, die aber nicht annähernd so komfortabel aussieht: Du kannst bei Fussball.de auch Widgets erstellen und bekommst einen Link zum Widget angezeigt. Den Link kannst Du in Deine LivePages Seite integrieren. Dann öffnet sich das Widget mit Klick auf den Link. Nicht ganz dasselbe, aber vielleicht besser als nichts. 🙂

      Viele Grüße und ein schönes Jahr 2018!
      Michael

      Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen