Tutorial Klickzähler

Tutorials von Thomas Frei-Herrmann

Für den Einbau in die Software “Mobirise”, lest bitte auch mein Tutorial in meinem Forum.
 

Tutorial Bildklickzähler oder als Zähler für Klicks auf Links oder auch als Download-Zähler.

Hier geht es zu den Skripten mit einem Beispiel aus dem Jahr 2010 und hier stelle ich den Download zur Verfügung.

Zunächst muss die Seite mit dem Zähler auf .php umgestelllt werden.

> Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung > .php wählen

 

Ich habe das nun, um es in NOF einzubauen, folgendermaßen geändert.

Zunächst habe ich mir einen Ordner angelegt, den ich

imagecounter

genannt habe. Hier könnt Ihr Euch diesen Ordner downloaden, der die benötigten beiden Dateien beinhaltet.

 

imagecounter.zip. Downloads insgesamt seit 26.10.2012: 1339 

Download

Nach dem Entpacken meiner ZIP-Datei erhaltet Ihr den Ordner imagecounter, in den ich die unveränderte Datei

zaehler.php

und auch die Datei, in die der Zählerstand geschrieben wird, kopiert habe. Die Datei daten.txt passt Ihr mit Euren Links an.

daten.txt

Ich habe die Datei “daten.txt” mit meinem Windows-Editor geöffnet und die relative Pfadangabe zu den großen Bildern entsprechend auf die NOF-Verzeichnisse geändert in dem meine großen Bilder liegen, die ich zuvor in der Assets-Verwaltung eingelesen habe:

1|1|../assets/images/Eichkater.jpg
2|1|../assets/images/Hibiskus.jpg
3|1|../assets/images/Peonie.jpg
4|1|../assets/images/Tulpe.jpg

Diese Datei “daten.txt” wird durch das Skript mit dem Zählerstand beschrieben. Dabei ist die erste Zahl die ID des Links, die zweite Zahl wird mit jedem Klick auf das Bild hochgezählt.

Nun fügt Ihr folgendes Skript in die HTML des Layouts ein.

Layout markieren > Fenster Layout-Eigenschaften > Button “HTML” > “Zwischen Head Tags” einfügen.

Achtet dabei wieder darauf, dass ich hier den relativen Pfad zu meinem neuen Ordner “imagecounter” geändert und angepasst habe. In diesem Beispiel ist das auf der Startseite eingebaut, daher nur 1 Punkt ./ auf einer Unterseite müssten dort 2 Punkte ../ hin.

<?php
 // Bilderklickzähler
 // Das Script stammt von W. Zenk
 // Homepage: www.homepage-total.de
 // Das Script darf frei genutzt werden,
 // solange dieser Vermerk nicht entfernt wird!

$clicks_file = file('./imagecounter/daten.txt');
for ($i = 0; $i < count($clicks_file); $i++) {
 $temp = explode('|', $clicks_file[$i]);
 $clicks[$temp[0]] = $temp[1];
}

function get_clicks($id) {
 global $clicks;
 return $clicks[$id];
}
?>

Jetzt zieht Ihr Euch das kleine Bild (Thumbnail) auf der Seite auf und klickt im Fenster “Bild-Eigenschaften” auf den Button “HTML”

Dort fügt Ihr “Vor dem Tag” (ab NOF 11 “vorher”) folgende Verlinkung ein. Als Ziel (target) habe ich hier nicht “_top” (neues Fenster) gewählt, sondern den Namen meines Inlineframes “Anzeige” (falls Ihr das auch so nachbauen wollt)...

Achtet auch hier wieder auf die korrekte Angabe des relativen Pfads (hier von der “Home” mit einem Punkt ./ ), wie oben bereits beschrieben.

<a href="./imagecounter/zaehler.php?id=1" target="_top">

... und “nach dem Tag” (ab NOF 11 “nachher”) schließt Ihr das <a> Tag wieder mit

</a>

Unter den jeweiligen Thumbnails habe ich mir dann noch ein Textfeld aufgezogen, mit meinem Text versehen und in den HTML-Code Editor des Textfeldes noch die Anzahl der Klicks mit diesem PHP-ECHO Befehl angezeigt, wobei die Zahl in der Klammer die ID des Links ist.

<?php echo get_clicks(1)?>

 

Link und Download Zähler:

Bei dem Zähler für den Link zum Tutorial habe ich lediglich noch die URL mit in die TXT Datei geschrieben ...

1|27|../assets/images/Eichkater.jpg
2|24|../assets/images/Hibiskus.jpg
3|19|../assets/images/Peonie.jpg
4|16|../assets/images/Tulpe.jpg
5|28|../html/tutorial.html
6|5|../download/imagecounter.zip

... und dann wieder in den HTML-Code Editor eines Textfeldes das Skript zur Anzeige des Zählers ...

<?php echo get_clicks(5)?>

... und ebenfalls in den HTML-Code Editor eines Textfeldes die Verlinkung zur Seite mit der dazugehörigen ID (hier: 5)

<a href="./imagecounter/zaehler.php?id=5" target="_top">Klicks zum Tutorial</a>

Ebenso könnt Ihr natürlich auch jede andere Datei so verlinken, wie z.B. ZIP-Dateien, die Ihr zum Download anbieten wollt und erhaltet dadurch einen Download-Zähler, so wie ich es oben zum Download dieser Skripte getan habe, also dann von dieser Unterseite hier ...

... habe ich mir mein Download Bild aufgezogen

Beispielbild ohne Verlinkung

und im Fenster “Bild-Eigenschaften” auf den Button “HTML” geklickt. Dort fügt Ihr “Vor dem Tag” (ab NOF 11 “vorher”) wieder folgende Verlinkung ein - hier von dieser Unterseite, daher mit 2 Punkten ../ (gehe ein Verzeichnis höher zum Verzeichnis “imagecounter”)

<a href="../imagecounter/zaehler.php?id=6" target="_top">

... und “nach dem Tag” (ab NOF 11 “nachher”) schließt Ihr das <a> Tag wieder mit

</a>

Zur Anzeige der Downloads habe ich mir dann wieder ein Textfeld aufgezogen, mit meinem Text versehen und in den HTML-Code Editor des Textfeldes die Anzahl der Downloads mit diesem PHP-ECHO Befehl angezeigt, wobei die Zahl in der Klammer die ID dieses Links ist.

<?php echo get_clicks(6)?>

Viel Erfolg!

diese Seite weiter empfehlen



Counter Statistik