Angepinnt Wie binde ich die Box in meine Website ein?

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Wie binde ich die Box in meine Website ein?

      Wusstest du schon?
      Dass du die Box auch in deine Website einbinden kannst?


      Inhalt:

      1. Wie binde ich die Box in meine Website ein?

      2. Wie kann ich nur spezielle Einträge auslesen lassen?

      3. Hinweise

      Wie binde ich die Box in meine Website ein?


      Methode 1
      Methode 2
      Man bindet lediglich eine JavaScript Datei ein (siehe unten). Auf der Seite muss ein Div-Container mit der ID "ds_dyk" sein. In dieses Div wird die Info vom JavaScript eingetragen.
      Bindet man den JavaScript Code in den Div Container ein, entfernt er sich selbst durch das Eintragen der Info.       		Man benötigt einen JavaScript Code zum nachladen der Info und eine Serverseitige Datei auf dem eigenen Server, welche die Information von uns abfragt.
      Unter dieser Tabelle findet man ein Beispiel dazu.
      Pro / Contra

      Sehr einfach einzubauen. Dafür nimmt man aber in Kauf, dass die Geschwindigkeit zum Laden der Seite zusätzlich verlangsamt wird durch das Warten auf die Antwort von unserem Server.
      Pro / Contra

      Keine zusätzliche Ladezeit für die Seite selbst.Es besteht die Möglichkeit nur spezielle Themengebiete anzeigen zu lassen. Die Größe des Div-Containers könnte sich durch die Info nochmal verändern.
      Wir empfehlen Methode 2



      Quellcode

      1. <script src="http://dotasource.de/includes/php/js_didyouknow.js.php" type="text/javascript"></script>

      Vorschau

      HTML-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      2. <html>
      3. <head>
      4. <title>Did you know?</title>
      5. </head>
      6. <body>
      7. <div id="ds_dyk">
      8. <script src="http://dotasource.de/includes/php/php_didyouknow.js.php" type="text/javascript"></script>
      9. </div>
      10. </body>
      11. </html>
      Alles anzeigen
      Ergebnis
      Mit CSS


      Bei dieser Methode haben wir die Website, ein JavaScript und ein Serverseitiges Script (in unserem Beispiel mit PHP gelöst).
      Website

      HTML-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      2. <html>
      3. <head>
      4. <title>Did you know?</title>
      5. </head>
      6. <body>
      7. <div id="ds_dyk">
      8. <img src="/images/views/laden.gif" alt="loading" />
      9. <script src="http://honsource.de/dev/js_didyouknow.js" type="text/javascript"></script>
      10. </div>
      11. </body>
      12. </html>
      Alles anzeigen

      JavaScript

      Quellcode

      1. function getHTTPObject(){
      2. if (window.ActiveXObject)
      3. return new ActiveXObject("Microsoft.XMLHTTP");
      4. else if (window.XMLHttpRequest)
      5. return new XMLHttpRequest();
      6. else {
      7. //Fehlerbearbeitung
      8. return null;
      9. }
      10. }
      11. function setOutput(){
      12. if(httpObject.readyState == 4){
      13. document.getElementById('NAME DES DIV').innerHTML = httpObject.responseText;
      14. }
      15. }
      17. httpObject = getHTTPObject();
      18. if (httpObject != null) {
      19. httpObject.open("GET", "DATEIPFAD/DATEINAME.php", true);
      20. httpObject.send(null);
      21. httpObject.onreadystatechange = setOutput;
      22. }
      Alles anzeigen
      NAME DES DIV Die ID des Div-Containers, in welchen die Antwort eingetragen werden soll.
      DATEIPFAD/DATEINAME Pfad zu der (PHP-)Datei auf eurem Server.
      //Fehlerbearbeitung Hier geht es um Gäste, deren Browser gewollt oder ungewollt den Vorgang nicht unterstützen.


      Serverseitiger Code (hier mit PHP gelöst)

      PHP-Quellcode

      1. <?php
      2. function getcontent() {
      3. $file = fopen('http://dotasource.de/includes/php/php_didyouknow.php?content=0',"r");
      4. $result = fread($file,8192);
      5. return $result;
      6. }
      8. echo getcontent();
      9. ?>
      ?content=0 Siehe 2. Wie kann ich nur spezielle Einträge auslesen lassen?


      Ergebnis
      Mit CSS




      Wie kann ich nur spezielle Einträge auslesen lassen?


      Es muss Methode 2 verwendet werden, damit nur spezielle Themen ausgelesen werden können. Dazu muss an der Stelle

      Quellcode

      1. $file = fopen('http://dotasource.de/includes/php/php_didyouknow.php?content=0',"r");
      der Wert hinter ?content= angepasst werden:

      "content" kann sieben verschiedene Werte annehmen:
      0: Alle drei Themen werden ausgelesen.
      1: Nur "Hintergrund" wird ausgelesen.
      2: Nur "Daten & Werte" wird ausgelesen.
      3: Nur "Besonderheiten" wird ausgelesen.
      4: "Hintergrund" und "Daten & Werte" werden ausgelesen.
      5: "Hintergrund" und "Besonderheiten" werden ausgelesen.
      6: "Daten & Werte" und "Besonderheiten" werden ausgelesen.

      Hinweise


      Bei Fragen, Vorschlägen und Kritik schreibt hier, schickt mir eine PN oder schreibt eine E-Mail (ramius@dotasource.de) an mich.
      Es wird bei der Verwendung des Scripts registriert, dass eure Website das Script verwendet. Bei Nutzung der Box muss der Link zu "dotasource.de" gut sichtbar sein und auf dotasource.de verweisen.
      DotaSource.de übernimmt keine Haftung für eventuell auftretende Fehler oder Schäden durch die Verwendung der "Wusstest du schon?"-Box und aller dazugehörigen Scripte.



      Ich wünschen euch und euren Besuchern viel
      Spaß mit den vielen kleinen Informationen und
      Bedanke mich hiermit bei jedem einzelnen, der
      an den Inhalten mitgewirkt hat.
      ramius

    • Wir haben uns noch eine Kleinigkeit überlegt. Wer die Box verwendet, kann mir den Link zu der entsprechenden Seite geben und ich werde sie dann hier verlinken. Damit erhalten wir eine kleine Liste von Beispielen, wie die Box platziert und mit CSS gestaltet werden kann.

    • Benutzer online 1

      1 Besucher