Dynamisk grafisk counter med Livecounter

Vi kender sikkert alle sammen til de små counters man kan sætte ind på sin hjemmeside for at vise statistikker over sin side. En af de, måske mest, kendte sider i Danmark som tilbyder dette må være Chart.dk. Desværre tæller charts tællere ikke specielt godt, og oversigten over statistikker er helt hen i vejret. Vil man derimod gerne have rigtig kvalitet, så skulle i tage at tilmelde jeres sider til Livecounter.dk. Livecounter producerer en glimrende omgang statistik til din hjemmeside, gratis og helt simpelt. Desværre tilbyder livecounter ikke nogle grafiske counters, men tilgengæld har de lavet et API som man kan bruge til at hente data ud, og derved lave sin egen counter, hvilket er det vi skal lave i dag!

Her er et eksempel af det færdige resultat:

Lad os komme i gang!

Til at begynde med, har jeg lavet et billede som vi vil bruge som grundskabelon til vores counter.

Så lad os begynde at fylde den med statistikker!

Jeg har oprettet et dokument som jeg har kaldet counter.php, og hvis du følger denne guide, foreslår jeg du gør det samme, da det er den fil jeg vil referere til når vi tester vores script.
Udover det, så kræver det at du i forvejen har en side tilmeldt livecounter.dk, og at du bruger ID’et til den side du tester dette script på, da livecounter.dk kun tillader man henter statistikker ud fra det ID der passer til det domæne man prøver at hente informationerne ud på.

Derudover, har jeg brugt C&C font, som kan hentes HER. Upload filen C&C.ttf til roden af mappen du har lagt dine filer i.

Til at starte med, så vil vi angive vores ID i vores script, således counteren ved hvilket stats den skal prøve at hente.

$id = 90; //Dette skal du selvfølgelig bytte ud med dit eget ID.

Derefter vil vi bruger Livecounters eget API til at hente statisikkerne ud. Her har jeg bare kopieret det eksempel Livecounter selv giver på deres hjemmeside, men i steder for at udskrive statistikken, har jeg lagt det i variabler.

$livecounter_timeout = stream_context_create(array(
'http' => array(
'timeout' => 1
)
)
);
//Her henter vi data ud fra API'et, med det valgte id som vi har placeret i vores $id variabel.
$livecoutner_data = @file_get_contents('http://www.livecounter.dk/api/api.php?id='.$id, 0, $livecounter_timeout);
//Vores data bliver returneret kun adskilt af komma, så vi bruger explode til at dele disse data, og samtidig sætte de forskellige statistikker op i et array.
$livecoutner_data = explode(',', $livecoutner_data);

//Og her putter vi de forskellige statistikker ind i variabler der er navngivet således at de er nemme at huske.
$count_online = $livecoutner_data['0'];
$count_hits_today = $livecoutner_data['1'];
$count_pageviews_today = $livecoutner_data['2'];
$count_hits_week = $livecoutner_data['3'];
$count_pageviews_week = $livecoutner_data['4'];
$count_hits_month = $livecoutner_data['5'];
$count_pageviews_month = $livecoutner_data['6'];
$count_hits = $livecoutner_data['7'];
$count_pageviews = $livecoutner_data['8'];

Nu da vi har selve statistikkerne på plads, så kan vi begynde på at lave vores counter.
Det første vi gør, er at lave indholdet som skal vises i vores counter, og det placerer vi i en variable som vi kalder $text

$text = 'Hits dag : '.$count_hits_today."\n".'Hits uge : '.$count_hits_week."\n".'Hits : '.$count_hits."\n".'Online : '.$count_online;

Jeg har valgt ikke at bruge al statistikken vi modtager, men i kan selvfølgelig lave jeres counter præcis efter jeres egne ønsker.
Vi skal nu have sat stien til vores counter skabelon ind i en variable, og det gør vi således.

$image = 'counter.png';

Mit billede ligger i roden af mappen jeg tester dette script i, men ligger i den i en anden mappe som f.eks “images” osv, så skal stien selvfølgelig være “images/counter.png”.
Næste ting er at vi skal lave vores content type om, således browseren vil læse vores side som et billede, og ikke som PHP fil, hvilket det jo i virkeligheden er, og samtidig så går vi i gang med at lave vores billed, sætte tekstfarve osv. (Forklaring findes i koden).

//Vi fortæller browseren at dette skal læses som et billede
header('Content-type: image/png');
//$im bliver vores placeholder for vores billede vi laver med imagecreatefrompng, hvor vi indsætter stien til vores skabelon.
$im = imagecreatefrompng($image);

//Vi sætter en skrifttype (Absolute sti)
$font = realpath('C&C.ttf');

//Vi sætter en tekstfarve, og i dette tilfælge sort.
$black = imagecolorallocate($im, 0, 0, 0);

/*Nu har vi faktisk lavet det fleste indstillinger. Vi har sat et billede vi vil bruge som skabelon
Vi har skrevet den tekst vi vil have på vores counter, og vi har sat tekstens farve.

Så alt vi skal gøre nu, er at generere billedet, og det gør vi således: */
imagettftext($im, 10, 0, 5, 28, $black, $text);

imagettftext har nogle parameters som skal sættes, og dem vil jeg lige hurtigt gå igennem.
imagettftext ( billede , tekst størrelse , vinkel , placering X , placering Y , tekstfarve , skrifttype , vores tekst )

Alt vi nu har tilbage er at vise vores billede på siden!

imagepng($im);
imagedestroy($im);

Her er helt scriptet:

//Vi sætter vores livecounter ID
$id = 90; //Dette skal du selvfølgelig bytte ud med dit eget ID.

$livecounter_timeout = stream_context_create(array(
'http' => array(
'timeout' => 1
)
)
);
//Vi henter statistikker ud fra Livecounter
$livecoutner_data = @file_get_contents('http://www.livecounter.dk/api/api.php?id='.$id, 0, $livecounter_timeout);
//Vores data bliver returneret, og smidt i et array.
$livecoutner_data = explode(',', $livecoutner_data);

//Vi smider vores data i variabler som er nemme at huske.
$count_online = $livecoutner_data['0'];
$count_hits_today = $livecoutner_data['1'];
$count_pageviews_today = $livecoutner_data['2'];
$count_hits_week = $livecoutner_data['3'];
$count_pageviews_week = $livecoutner_data['4'];
$count_hits_month = $livecoutner_data['5'];
$count_pageviews_month = $livecoutner_data['6'];
$count_hits = $livecoutner_data['7'];
$count_pageviews = $livecoutner_data['8'];

//Vores tekst som skal vises på vores counter.
$text = 'Hits dag : '.$count_hits_today."\n".'Hits uge : '.$count_hits_week."\n".'Hits : '.$count_hits."\n".'Online : '.$count_online;

//Stien til vores counter skabelon.
$image = 'counter.png';

//Vi fortæller browseren at dette skal læses som et billede
header('Content-type: image/png');

//$im bliver vores placeholder for vores billede som vi laver med imagecreatefrompng.
$im = imagecreatefrompng($image);

//Vi sætter en skrifttype (Absolute sti)
$font = realpath('C&C.ttf');

//Vi sætter en tekstfarve, og i dette tilfælge sort.
$black = imagecolorallocate($im, 0, 0, 0);

//Billedet genereres
imagettftext($im, 10, 0, 5, 28, $black, $font, $text);

//Og bliver vist på siden.
imagepng($im);
imagedestroy($im);

Er alt lavet rigtigt, så skulle du gerne få et resultat lignende dette.

Hvis du fandt denne guide nyttig, så bliver jeg altid glad hvis du lige vil vælge at dele denne artikel med dine venner, og kommentarer er også meget velkomne.

Relaterede indlæg

• Find antal retweets af URL med PHP
• Lav din egen SMS Gateway med Android
• Quick PHP Guide: Lav en tilfældig password generator
• IP Spærring med PHP
• Hent indhold fra RSS Feed med PHP