Eine Tag Cloud aus Digg Beiträgen erstellen | webholics - development + design | Freelancer im Bereich Webentwicklung und Webdesign

29. November 2007 Eine Tag Cloud aus Digg Beiträgen erstellen

in Kategorie PHP

Tags: Api, Digg, HTML_TagCloud, Pear, PHP

Seit kurzem gibt es das Pear–Packet HTML_TagCloud. Es befindet sich momentan im Beta–Stadium und hat mit Sicherheit noch einige Schwächen. Dennoch möchte ich dieses Packet an einem Beispiel vorstellen und aufzeigen, wie einfach es damit ist Tag Clouds zu erstellen.

HTML_TagCloud kurz vorgestellt

Mit HTML_TagCloud lassen sich Tag Clouds auf Basis von HTML und CSS generieren. Das Packet erzeugt hierbei valides Markup. Es passt automatisch die Schriftgrößen innerhalb eines festgelegten Bereiches an und zusätzlich kann man das Alter eines Eintrages über dessen Farben darstellen lassen. Für das Beispiel in diesem Beitrag verwende ich die im Moment aktuelle Version 0.1.2. Ich gehe davon aus, dass der Leser über die korrekte Einbindung eines Pear–Packets bescheid weiß.

Ein Beispiel

Ich möchte nun die Api von digg.com dazu nutzen, die aktuell populärsten Beiträge auszulesen und diese mit Hilfe des HTML_TagCloud–Packets darstellen. Folgender PHP–Code ließt die Daten von Digg und erstellt die Tag Cloud:

require_once 'HTML/TagCloud.php';
 
// ein User Agent muss gesetzt werden, damit Digg uns die Daten sendet
ini_set("user_agent", "www.webholics.de");
// lese die Daten als XML von der Digg Api
$xml = file_get_contents('http://services.digg.com/stories/popular
	?appkey=http%3A%2F%2Fwww.webholics.de
	&type=xml');
// Umwandlung in ein SimpleXMLElement-Objekt
$data = new SimpleXMLElement($xml);
 
$tags = new HTML_TagCloud(20, 8);
 
foreach($data->story as $story) {
    $tags->addElement($story->title, htmlentities($story['link']), 
	(int)$story['diggs'], (int)$story['submit_date']);
}
 
$html = $tags->buildHTML();

Zuallererst binden wir das HTML_TagCloud–Packet ein. Über die Funktion »file_get_contents« rufen wir die übergebene Uri und speichern die erhaltenen Daten in die Variable »$xml«. Die Uri für den Service von Digg benötigt einen Schlüssel, den appkey. Dieser wird aber nicht weiter überprüft, weshalb wir hier irgendeine Uri übergeben können. Mit »type« lege ich fest, dass ich die Daten als xml erhalten möchte. Nun benötigen wir die SimpleXML–Extension welche standardmäßig seit PHP5 enthalten ist. Diese Extension generiert uns ein Objekt, in dem die XML–Attribute über die eckigen Klammern und die inneren Tags über Objektattribute erreichbar sind. Dem Konstruktor von HTML_TagCloud übergeben wird als erstes Attribut die Basisschriftgröße (standardmäßig in Pixel) und als zweites Attribut den Bereich, um den die Schriftgröße variieren darf. Die maximale Schriftgröße wäre dann 20 + 8 = 28 und die minimale 20 - 8 = 12. Als nächstes fügen wir jeden Beitrag den wir von Digg erhalten haben der Tag Cloud hinzu. Das vorletzte Attribut regelt später die Schriftgröße und das letzte Attribut die Schriftfarbe. Im letzten Schritt generieren wir das benötigte HTML–Markup ohne CSS. Weshalb ohne CSS? Dazu mehr im folgenden Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="Content-Type" 
		content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" 
		content="text/css" />
 
        <meta name="author" content="Mario Volke" />
 
        <style type="text/css">
 
            body {
                margin:0;
                padding-top:10em;
            }
 
            h1 {
                width:50%;
                margin:0 auto;
                padding:0;
                color:#233b64;
            }
 
            div.tagcloud {
                width:50%;
                margin:0 auto;
                padding:1em;
                background-color:#2b5190;
                border:1em solid #233b64;
            }
 
            div.tagcloud a {
                text-decoration:none;
            }
            div.tagcloud a.earliest {
                color:#cccccc;
            }
            div.tagcloud a.earlier {
                color:#a9d3e2;
            }
            div.tagcloud a.later {
                color:#9ed6e0;
            }
            div.tagcloud a.latest {
                color:#00ecff;
            }
            div.tagcloud a.earliest:hover,
            div.tagcloud a.earlier:hover,
            div.tagcloud a.later:hover,
            div.tagcloud a.latest:hover {
                color:#ffdb3b;
                text-decoration:none;
            }
            div.tagcloud a.earliest:visited,
            div.tagcloud a.earlier:visited,
            div.tagcloud a.later:visited,
            div.tagcloud a.latest:visited {
                color:#ff86ff;
                text-decoration:none;
            }
 
        </style>
 
        <title>HTML_TagCloud example</title>
    </head>
    <body>
 
        <h1>Digg tag cloud</h1>
        <?php echo $html; ?>
 
    </body>
</html>

Das obige HTML– und CSS–Markup sollte sich eigentlich von selbst erklären. Ich entschied mich dazu das Stylesheet nicht vom HTML_TagCloud–Package generieren zu lassen, da ich so mehr Gestaltungsspielraum habe. Wer das CSS auch generieren lassen möchte kann dies mit dem Befehlt »$css = $tags->buildCSS();« tun.

Um nun die volle Pracht der generierten Tag Cloud zu erleben, sollte man sich das vollständige Beispiel herunterladen und selbst einmal ausführen:

HTML_TagCloud Beispiel

29. November 2007 Eine Tag Cloud aus Digg Beiträgen erstellen

HTML_TagCloud kurz vorgestellt

Ein Beispiel

Ähnliche Artikel

Kategorien

Beliebte Tags

Archiv

Verbreitung

Kommentare

Einen Kommentar schreiben