Sie sind auf Seite 1von 9

Dokumentation FUSSBALL.DE Widget V1.

2 beta
1. Grundstzliches
Gute Nachrichten fr dich als Webmaster einer nicht kommerziellen Vereins-Website: Die neuesten Ergebnisse und Tabellen von FUSSBALL.DE lassen sich ab sofort fr den jeweils aktuellen Spieltag ganz leicht direkt als Widget in deine Seite einbetten! Einige grundstzliche Infos fr dich, danach kanns sofort losgehen!

a. Javascript muss aktiviert sein!


Das FUSSBALL.DE Widget ist eine JavaScript-Anwendung, d. h. nur Besucher deiner Seite mit aktiviertem Javascript knnen die entsprechenden Inhalte sehen.

b. Grndlich testen!
Wir knnen nicht vollstndig ausschlieen, dass die Einbindung des Widgets negative Auswirkungen (fehlerhaftes Seitenladen, fehlerhafte Seitendarstellung, etc.) auf deine Webseite hat. Wir empfehlen daher einen ausgiebigen Test der Einbettung vor einer Liveschaltung.

c. Sonderzeichendomains (IDN)?
Es werden die Zeichen nach der Definition des DeNIC erlaubt: http://www.denic.de/de/domains/idns/liste.html Funktionsweise kann generell nicht garantiert werden. Der IE6 untersttzt IDN generell nur mit einem zustzlichen Plug-In.

d. SSL?
Webseiten mit SSL knnen das FUSSBALL.DE Widget derzeit nicht verwenden.

e. Wie aktuell sind die Daten?


Die Begegnungsansichten werden immer analog zum aktuellen Spieltag auf www.fussball.de ausgegeben.

f. Welche Wettbewerbe kann ich als Widget einbinden?


Grundstzlich kannst du alle Wettbewerbe von FUSSBALL.DE einbinden. Bitte beachte aber, dass wir aus technischen Grnden keine Tabelle fr die 1. und 2. Bundesliga sowie die 3. Liga ausliefern knnen!

2. Registrierung und Vorbereitung


Einige Schritte sind notwendig, damit du spter das FUSSBALL.DE Widget flexibel fr deine Webseite nutzen kannst.

a. Registriere dich - falls noch nicht geschehen - als Mitglied der FUSSBALL.DECommunity und log dich anschlieend rechts mit deinem Benutzernamen und Passwort ein:

b. Nachdem du eingeloggt bist, klickst du dich ber die Wettbewerbsauswahl rechts


zum Wettbewerb deiner Lieblingsmannschaft:

c. Unter jedem Wettbewerb findest du eine graue Zeile mit der Saisonkennzahl und
Wettbewerbs-ID. Klicke jetzt auf "Dieser Wettbewerb als Widget fr meine Homepage

d. Klicke nun auf "Neuer Schlssel" und nenne uns die Adresse der Webseite, in die du
den Wettbewerb als sogenanntes Widget einbetten mchtest. (z. B. www.xyverein.de). Bitte verwende immer nur den ersten Teil deiner Domain! Statt z.B. http://sites.google.com/meine_vereinsseite also bitte nur http://sites.google.com/ ! Danach speichern nicht vergessen!

Du siehst jetzt den Schlssel der fr die Adresse deiner Webseite gespeichert wurde, z. B.:

Diesen Schlssel bentigst du, um grundstzlich einen oder mehrere Wettbewerbe als Widget in deine Webseite einzubetten.

Das Widget funktioniert mit einem bestimmten Schlssel nur auf der von dir bei der Schlsselerstellung angegebenen Webseite!

e. Der Schlssel ist also nicht auf einen einzelnen Wettbewerb bezogen, du musst
dir keinen weiteren Schlssel erzeugen, um auf der gleichen Webseite weitere Wettbewerbe einzubetten! Bei mehreren Wettbewerben auf der gleichen Webseite verwendest du also immer den gleichen Schlssel, der fr deinen Benutzernamen und diese Webseite

gespeichert wurde.

f. Kopiere ihn daher, wie im Beispiel direkt darunter gezeigt, in den <HEAD>-Bereich
deiner Webseite. <head> <title>Mein Verein</title> <script type="text/javascript" src="http://static.fussball.de/fbdeAPI/js/fbdeAPIFunctions.js? schluessel=B06F123456789098765432174ABBB62F3980"></script> </head>

Anders als hier gezeigt, muss der Ausdruck <script type="text/javascript"> </script> ohne Umbruch in deine Seite eingebaut werden!

Wenn deine Webseite aus mehreren Einzel-/Unterseiten besteht, muss dieser Ausdruck einfach identisch im <HEAD>-Bereich jeder Seite auftauchen! Am Besten kopierst du also zunchst den Ausdruck in den <HEAD>-Bereich jeder Seite, die spter einen Wettbewerb enthalten soll.

3. Einbindung eines einzelnen Wettbewerbs


Im Folgenden wird beschrieben, wie du einen einzelnen Wettbewerb, z. B. eine Bezirksliga in Niedersachsen, in deine Seite einbettest. Der nchste Abschnitt beschreibt dir dann, wie du mehrere Wettbewerbe in unterschiedlichen Darstellungen einbinden kannst.

a. Der zweite Kasten mit Quellcode zeigt dir am konkreten Beispiel deines Schlssels
und des von dir vorab gewhlten Wettbewerbs, wie du im <BODY>-Bereich deiner Webseite vorgehen musst. Zunchst bentigst du ein DIV-Element, in dem spter der Wettbewerb geladen werden kann. Das DIV muss eine frei whlbare ID besitzen und kann Text o. . beinhalten, um den Benutzer ber den Ladevorgang des Widgets zu informieren. <body> <div id="meinWettbewerb0">...Wettbewerb wird geladen...</div> </body> Bitte beachte, dass die ID des DIVs einzigartig innerhalb einer Seite sein muss! Nun legst du einen neuen Wettbewerb an. Hierzu bentigst du die Saison und die Wettbewerb-ID. Beide Daten findest du unter jedem Wettbewerb auf FUSSBALL.DE. Alles spielt sich in einem <SCRIPT>-Bereich innerhalb des BODY ab, unterhalb des o. g. DIV-Elements. Zunchst wird ein neuer Wettbewerb in einer Variable, die du frei benennen kannst, gespeichert: var wettbewerb0 = new fussballdeAPI(); Danach werden Saison und gewnschter Wettbewerb gesetzt, die Variable muss identisch zu oben benannt sein: wettbewerb0.setzeSaison('0910'); wettbewerb0. setzeWettbewerbID('014201'); Der Wettbewerb ist jetzt fertig angelegt und kann angezeigt werden. Du sprichst also das eingangs erwhnte DIV-Element an und befllst es mit dem Wettbewerb: wettbewerb0.setzeSaison('0910'); wettbewerb0. setzeWettbewerbID('014201'); wettbewerb0.zeigeWettbewerb('meinWettbewerb0'); Der komplette Ausdruck im BODY-Bereich noch mal im berblick: <body> <div id="meinWettbewerb0">... lade Wettbewerb ...</div> <script type="text/javascript"> var wettbewerb0 = new fussballdeAPI(); wettbewerb0.setzeSaison('0910'); wettbewerb0.setzeWettbewerbID('014201'); wettbewerb0.zeigeWettbewerb('meinWettbewerb0'); </script> </body>

Fertig, der von dir gewhlte Wettbewerb erscheint jetzt auf deiner Webseite!

4. Einbindung mehrere Wettbewerbe auf einer Seite


Selbstverstndlich kannst du mit ein und demselben Schlssel mehrere Wettbewerbe auf deiner Webseite einbetten - z. B. alle Wettbewerbe, in denen alle Mannschaften deines Vereins spielen o. .!

a. Sollen z. B. die Bezirksliga 1 & 2 auf einer Seite dargestellt werden, bleibt der HEADBereich dieser Seite unverndert: <head> <title>Mein Verein</title> <script type="text/javascript" src="http://static.fussball.de/fbdeAPI/js/fbdeAPIFunctions.js? schluessel=B06F123456789098765432174ABBB62F3980"></script> </head>

Anders als hier gezeigt, muss der Ausdruck <script type="text/javascript"> </script> ohne Umbruch in deine Seite eingebaut werden!

Fr die beiden unterschiedlichen Wettbewerbe verwendest du nun einfach zwei unterschiedliche DIV-Container und zwei unterschiedliche Variablen und selbstverstndlich die jeweils korrekten Saisons und Wettbewerb-IDs. Der komplette Ausdruck im BODY-Bereich also: <body> <div id="meinWettbewerb0">... lade Bezirksliga 1 ...</div> <script type="text/javascript"> var wettbewerb0 = new fussballdeAPI(); wettbewerb0.setzeSaison('0910'); wettbewerb0.setzeWettbewerbID('014201'); wettbewerb0.zeigeWettbewerb('meinWettbewerb0'); </script> <div id="meinWettbewerb1">... lade Bezirksliga 2 ...</div> <script type="text/javascript"> var wettbewerb1 = new fussballdeAPI(); wettbewerb1.setzeSaison('0910'); wettbewerb1.setzeWettbewerbID('010899'); wettbewerb1.zeigeWettbewerb('meinWettbewerb1'); </script> </body>

Anders als hier gezeigt, muss der Ausdruck <script type="text/javascript"> </script> ohne Umbruch in deine Seite eingebaut werden!

Fertig, beide Wettbewerbe erscheinen jetzt auf deiner Webseite!

5. Flexible Darstellung
Unabhngig davon, wie viele Wettbewerbe du auf einer Seite anzeigen mchtest, kannst du die Darstellung flexibel deinen Bedrfnissen anpassen. Als Standard zeigt dir das FUSSBALL.DE Widget immer die Begegnungen eines Wettbewerbs vorausgewhlt an:

Mit einem zustzlichen Parameter kannst du dafr sorgen, dass alternativ die Tabellen bereits ausgewhlt dargestellt werden:

a. Sollen z. B. ERST die Begegnungen der Bezirksliga Hannover und DANN die Tabelle
der Bezirksliga Hannover auf einer Seite dargestellt werden, bleibt der HEAD-Bereich dieser Seite unverndert: <head> <title>Mein Verein</title> <script type="text/javascript" src="http://static.fussball.de/fbdeAPI/js/fbdeAPIFunctions.js? schluessel=B06F123456789098765432174ABBB62F3980"></script> </head>

Anders als hier gezeigt, muss der Ausdruck <script type="text/javascript"> </script> ohne Umbruch in deine Seite eingebaut werden!

Fr die beiden unterschiedlichen Sichten verwendest du nun einfach zwei unterschiedliche DIV-Container und zwei unterschiedliche Darstellungen des gleichen Wettbewerbs, die dann diese beiden DIVs getrennt befllen. Der komplette Ausdruck im BODY-Bereich: <body> <div id="meineBegegnungen">... lade Begegnungen ...</div> <div id="meineTabelle">... lade Tabelle ...</div> <script type="text/javascript"> var wettbewerb1 = new fussballdeAPI(); wettbewerb1.setzeSaison('0910'); wettbewerb1.setzeWettbewerbID('014201'); wettbewerb1.zeigeWettbewerb('meineBegegnungen'); wettbewerb1.zeigeTabelle('meineTabelle'); </script> </body>

6. Einbindung mit mehreren Domains


Falls die Seite deines Vereins "ABC" unter mehreren Domains verfgbar ist und du noch keine Weiterleitung verwendest (was wir dir mittelfristig dringend raten wrden), kannst du folgendermaen vorgehen:

a. Angenommen, du verwendest die Domains www.sv-abc.de, www.svabc.de und


www.sportverein-abc, die alle auf die gleiche Seite verweisen.

b. Bitte erzeuge dir zunchst fr jede der Domains einen eigenen Schlssel (wie unter 1.
beschrieben). z.B. also: Domain www.sv-abc.de www.svabc.de www.sportverein-abc.de Schlssel _ERSTER_SCHLUESSEL_ _ZWEITER_SCHLUESSEL_ _DRITTER_SCHLUESSEL_

c. Im HEAD-Bereich deiner Seite verwendest du statt:


<head> <title>Mein Verein</title> <script type="text/javascript" src="http://static.fussball.de/fbdeAPI/js/fbdeAPIFunctions.js? schluessel=B06F123456789098765432174ABBB62F3980"></script> </head> diesen Ausdruck: <head> <title>Mein Verein</title> <script type="text/javascript"> if(location.host == www.sv-abc.de' || location.host == 'svabc.de') { var key = "_ERSTER_SCHLUESSEL_" } else if(location.host == 'www.svabc.de' || location.host == ' svabc.de ') { var key = "_ZWEITER_SCHLUESSEL_" } else if(location.host == www.sportverein-abc.de' || location.host == 'sportverein-abc.de') { var key = " _DRITTER_SCHLUESSEL_" } document.write('<script src="http://static.fussball.de/fbdeAPI/js/fbdeAPIFunctions.js?s chluessel=' + key + '"'+' type="text/javascript"><\/script>'); </script> </head>

Anders als hier gezeigt, muss der Ausdruck <script type="text/javascript"> </script> ohne Umbruch in deine Seite eingebaut werden!

Fertig, das Widget sollte jetzt auf deiner Seite erscheinen, egal von welcher der drei Domains aus sie aufgerufen wird!

7. Sonstige Optionen a. Alternativ zur inline Einbindung eines Wettbewerbs (siehe 2. & 3.) kannst du den
Javascript-Aufruf auch in eine Funktion fassen, die dann z. B. beim Laden der Seite oder aufgrund eines anderen Events aufgerufen wird. Ein Beispiel:

<head> <title>Mein Verein</title> <script type="text/javascript"> function meinWettbewerb() { var wettbewerb = new fussballdeAPI(); wettbewerb.setzeSaison('0910'); wettbewerb.setzeWettbewerbID('014201'); wettbewerb.zeigeWettbewerb('meinWettbewerbDIV'); } </script> </head> <body onload="meinWettbewerb();"> <div id="meinWettbewerbDIV">... lade Wettbewerb ...</div> </body>

Anders als hier gezeigt, muss der Ausdruck <script type="text/javascript"> </script> ohne Umbruch in deine Seite eingebaut werden!