Überblick

Um einen Zähler einzubinden, der die Anzahl der Webseiten Aufrufe zeigt gibt es prinzipiell zwei Möglichkeiten:

• Ein kleines Javascript Schnipsel das den Zähler aktualisiert und den aktuellen Stand im Text anzeigt
• Ein eingebundenes Bildchen, das den Zählerstand anzeigt. Hierbei wird der Zähler automatisch hochgezählt, wenn der Browser das Bildchen vom Server herunterläd

Um sich zu entscheiden, welches die geeignete Variante für Ihre Seite ist, sind hier kurz ein paar Fakten aufgelistet:

• Die erste Variante funktioniert nur mit Javascriptfähigem Browser, bei dem dies auch eingeschalten ist und nicht durch Plugins (Noscript) blockiert wird. Die Bildchenbasierte Variante benötigt dagegen nichts weiter als einen Browser der Bilder nachladen und darstellen kann (prinzipiell jeder bis auf exotische Textbrowser)
• Bei der Bildbasierten Variante kann es vorkommen, dass viele Browser das Bild cachen anstatt neu zu laden. Das hat zur Folge, dass der Zähler nicht bei jedem Besuch weiter hochzählt. Das ist bei der ersten Variante dagegen ausgeschlossen, hier wird jeder Besuch gezählt.
• Die Bilchen bedeuten mehr Aufwand für den Server und die Leitung (wenn auch nur minimal). Zudem sind sie schwer an den Stil einzelner Seiten anpassbar (Schriftart, -größe, Farbe, usw.). Die Barrierefreiheit ist dort prinzipbedingt nicht gegeben, da der Zählerstand als Bild nicht für Sehbehinderte Menschen vom PC vorgelesen werden kann, und ebenso schlecht vergrößert werden kann (verschwimmt/verpixelt dann stark) wenn der Text zu klein ist.

Prinzipiell ist eher die erste (Javascript und Text) die bessere Wahl, da sie weniger Last auf dem Server und weniger Bandbreite erzeugt, Flexibilität und Barrierefreiheit bietet. Browser oder Anwender die kein Javascript können oder wollen sind heutzutage eher Exoten da dann auch viele der großen Webseiten nicht mehr korrekt dargestellt werden. Alles was dann schlimmstenfalls passiert ist schlicht, dass der Zähler nicht angezeigt wird, der Rest der Webseite funktioniert dann natürlich trotzdem weiterhin.

Textbasierter Zähler

Um diese Variante des Zählers einzubinden, muss lediglich ein leeres HTML-Textelement mit der ID "neusob_zaehler" vorhanden sein. Ein solches Textelement kann zum Beispiel vom Typ <p> für eine alleinstehende Zeile, <span> inmitten eines Textblocks oder sogar <h1>, <h2> usw. für Überschriften sein. Neben diesem leeren Element, dass dann vom Zähler automatisch mit dem aktuellen Stand befüllt wird, muss lediglich folgender kurzer Code eingefügt werden, der ein kleines Javascript einbindet:

<script src="/zaehler/zaehler.js" type="text/javascript"></script>

Diese Zeile wird dann üblicherweise direkt an Ort und Stelle, gleich nach dem zu befüllenden HTML-Element eingefügt. Das sieht dann zum Beispiel so aus:

<p id="neusob_zaehler"></p>
<script src="/zaehler/zaehler.js" type="text/javascript"></script>

In dem leeren Paragraphelement (<p>) landet dann der Zählerstand.

Einer der großen Vorteile des textbasierten Zählers wird sichtbar, wenn man den Zähler dem eigenen Design anpassen will. Mit ihm lässt sich alles machen, was man mit normalem Text auch anstellen kann. Dem HTML-Element kann eine oder mehrere CSS-Klassen zugewiesen werden, oder der Stil direkt mit dem style Attribut anpassen. Hier wird zum Beispiel demonstriert, wie man dem Zähler ein "Zählerstand: " voranstellen kann und den Zählerstand selbst fett markiert:

<p>Zählerstand: <span id="neusob_zaehler" style="font-weight: bold"></span></p>
<script src="/zaehler/zaehler.js" type="text/javascript"></script>

Die Möglichkeiten werden auch bei folgendem Beispiel sichtbar, das auf der neusob.de Startseite verwendet wird, um den Zählerstand transparent vor das bn-Logo zu legen. Das Logo ist anklickbar und mit der Startseite verlinkt und trotzdem ist der Zählerstand echter Text (man kann ihm markieren und kopieren). Das Logobild bleibt dabei gleich und kann vom Browser gecached werden. Dafür wurde innerhalb des Containers (<div>) das Zähler-HTML-Element mit absoluter Positionierung vor das Bild geschoben:

<div style="position: relative">
    <a href="/">
        <img alt="Logo" style="margin: 0px" border="0" 
             width="105" height="127" src="/bn_logo_kl.png">
    </a>
    <p id="neusob_zaehler" style="color: #009999; position: absolute; 
       left: 0px; top: 92px; width: 105px; text-align: center; margin: 0px;">
    </p>
    <script src="/zaehler/zaehler.js" type="text/javascript"></script>
</div>

Viele weitere Spielereien sind hier denkbar, die sich mit dem textbasierten Zähler umsetzen lassen.

Bildbasierter Zähler

In dieser Variante ist der Zähler ebenso leicht einzubinden, bringt jedoch einige Nachteile mit sich (siehe oben). Das Bildchen wird ganz einfach mit diesem Code eingebunden:

<img src="/zaehler/bild.aspx">

Es sind keine weiteren Anpassungen an diesem HTML-Schnipsel vorzunehmen. Die Breite und Höhe kann variieren, je nachdem wie viele Dezimalstellen der Zählerstand im Moment hat, daher bitte keine height und width Attribute mit angeben. Der Zähler erkennt selbst auf welcher Seite er sich befindet und zählt korrekt hoch, zumindest so lange der Browser das Bild nicht cached und aufhört das Bild bei jedem Besuch erneut zu laden.