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!
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.
a. Registriere dich - falls noch nicht geschehen - als Mitglied der FUSSBALL.DECommunity und log dich anschlieend rechts mit deinem Benutzernamen und Passwort ein:
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.
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!
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!
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>
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_
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!