Klick-Zähler für HTML Links im Facebook-Style

Mit unserem neuen Script könnt ihr sehen wie oft bestimmte Links oder Downloads angeklickt wurden. Dieses Script verwenden wird auch bei uns im eigenen Blog und ist euch bestimmt schon einmal aufgefallen. Schicke Counts im Facebook Stil!

Unsere Idee war es ein Script zu entwicklen, welches die Anzahl der Klicks auf einen Link oder Download anzeigt. Am besten im schicken und modernen Facebook Like-Button Stil.

Es ist uns gelungen ein solches Script zu erstellen und möchten euch dieses natürlich nicht vorenthalten.


Update

Nun gibt es den Download Counter auch für jQuery!


Die Funktion

Nach dem Einbinden unseres JavaScripts sowie Mootools muss dem Link im Prinzip nur noch die Klasse class=“downloadCounter“ mitgeteilt werden. Danach werden ein paar Elemente, welche Ihr mittels CSS auf eure eigenen Bedürfnisse anpassen könnt angehangen und die entsprechende Funktion vollautomatisch hergestellt.

Das Zählen und Auslesen funktioniert im Groben über Ajax HTML Requests und PHP zum Speichern der Counts (in Textdateien).

Außerdem gibt es natürlich einen Schutz auf Cookie-Basis gegen massives Klicken. Es wird also auch bei mehrmaligem Klicken nur ein Klick gezählt.

Zudem erkennt unser Script gleich-verweisende Links auf einer Seite, wodurch bei einem Klick natürlich sofort beide hochgezählt werden (siehe Beispiel oben). Solltet ihr gleiche Links auf verschiedenen Seiten nutzen, werden natürlich alle Klicks zusammen gezählt und angezeigt.

Internet Explorer 6 natürlich supported!

Download für Mootools und jQuery

Hier könnt ihr das gesamte Paket inkl. Mootools und einer fertigen Demo herunterladen. Darin sind u.a. CSS-Styles und Bilder enthalten, damit euer Counter so aussieht wie unser.

Und hier bekommt ihr das gesamte Paket für jQuery.

What to do

Wichtig ist der Ordner „downloadCounter“ in dem zwei PHP-Dateien liegen. Dieser muss mit in euer Projekt kopiert/hochgeladen werden. Außerdem muss darauf geachtet werden, dass die URL zu diesem Ordner in der dlcounter.js richtig gesetzt ist. Dafür gibt es am Anfang dieser Datei eine Variable.

Sollte danach etwas nicht wie gewünscht funktionieren, müsst ihr nochmals die Pfade in der dlcounter.js und ggf. den beiden PHP Dateien im Ordner „downloadCounter“ überprüfen (es ist ein bisschen verwirrend).

Schaut euch einfach das Beispiel an, bei Problemen mit dem Firebug rein und es sollte im Prinzip ein leichtes sein dieses Script zu nutzen.

Viel Spaß beim beobachten!

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
18 Bewertungen
71 %
1
5
3.55
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.