Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 25. Oktober 2017

Aktualisiert am: 20. September 2018

Fußball-Widgets auf der eigenen Website

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.

Der Autor:

Autor: Michael Poguntke

Hallo, ich bin Michael und Public Relations Manager bei STRATO.

14 Kommentare

  1. Stefan sagte am 2. Januar 2018 um 14:54:

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

    Antworten
    • Michael Poguntke sagte am 2. Januar 2018 um 15:01:

      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
  2. Bernd Fiedler sagte am 19. März 2018 um 10:54:

    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
  3. Marcel Morr sagte am 5. Juli 2018 um 9:54:

    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
    • Thomas Ritter sagte am 16. Juli 2018 um 11:47:

      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
      • Marcel Morr sagte am 19. Juli 2018 um 8:20:

        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
        • Michael Poguntke sagte am 19. Juli 2018 um 9:15:

          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. Ronny sagte am 20. September 2018 um 13:08:

    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
  5. Thomas sagte am 2. Oktober 2018 um 22:07:

    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
    • Lisa Kopelmann sagte am 4. Oktober 2018 um 15:25:

      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
    • Daniel sagte am 31. Januar 2019 um 21:23:

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

      Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen