Tutorial: Feedburner Feed Count als Plain Text mit Hintergrundbild

Achtung, Geek-Stuff ahead! Nicht-PHP-Freaks dürfen den Post gerne überlesen, das erspart euch den rauchenden Kopf und jede Menge Bahnhof

Zum Thema: Das Smashing Magazine hat zum ersten April ein paar nice RSS-Icons verschenkt, aus denen ich mir was basteln wollte. Ne schöne Grafik die die Zahl der Feed-Abonnenten ein bisschen ankurbelt (weil das kleine RSS-Icon in der Sidebar ja doch schwer zu finden ist).

Dazu wollte ich die Zahl der Feed-Abonnenten und einen Link zum Wikipedia-Eintrag für RSS anzeigen lassen – als reinen Text. Denn die jämmerliche Feedburner-Grafik sieht zwar nicht schlecht aus, ist aber schon ziemlich ausgelutscht.

Also hab ich mir in Photshop folgende Grafik erstellt:

Die wollte ich als Hintergrundbild nehmen, und unten, in dem weißen Bereich, die Zahl der Feed-Abonnenten und den Link zur Wikipedia einbauen. Das Problem an der Sache war nun den Text richtig auf dem Bild zu platzieren. Dazu hab ich mir den Quelltext aus diversen Stöckchen mal angeguckt, weil ich wusste, dass die auch reinen Text auf Hintergrundbildern positionieren. Der Code war erstaunlicher- und glücklicherweise immer derselbe, allerdings beinhalten solche Bilder in der Regel nur einen Link, darum wirkt das ganze wie eine einzige verlinkte Grafik. In meine Grafik sollten aber zwei Links rein, also musste ich mir den Code ein bisschen umbasteln und die CSS-Eigenschaften (sprich das Hintergrundbild und die Positionierung des Textes) nicht auf den a href Tag sondern auf den p Tag anwenden:

<p style="background: transparent url(http://www.alohastone.com/wp-content/images/aloha_feed.jpg) no-repeat scroll 0% 50%; text-decoration: none; display: block; width: 415px; height: 20px; padding-top:80px; padding-right: 35px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-family: Georgia, Times New Roman,sans-serif; font-size: 14px; text-align:right;"><a href="http://feeds.feedburner.com/alohastone">Bisher <strong>73</strong> Abonnenten</a> / <a href="http://de.wikipedia.org/wiki/RSS">Wie funktioniert das?</a></p>

Eigentlich ganz einfach: Der Absatz wird als Block dargestellt und bekommt ein Hintergrundbild. Der Text wird mittels padding ausgerichtet. Wichtig ist nur zu wissen dass man das Padding von der Box-Breite und -Höhe wieder abziehen muss, sonst wird das Padding auf die angegebene Blockgröße draufgerechnet und die Box zu groß. Meine Grafik ist in dem Fall 450*100 Pixel groß, der Text bekommt oben 80px Padding, rechts 35px. Daraus ergibt sich eine Breite von 415px (450-35) und eine Höhe von 20px (100-80).

Jetzt fehlt nur noch die Zahl der Abonnenten, die ich mir von Feedburner holen will. Dazu muss man sich zunächst mal bei Feedburner einloggen und die “Awareness API” aktivieren (findet man unter “Publicize”), um überhaupt mit eigenen Scripten auf diese Zahl zugreifen zu können. Wenn man das gemacht hat kann man entweder auf das Plugin Feed Count setzen, oder selbst Hand anlegen.

Ich hab mich für letzteres entschieden und einfach folgenden Code als PHP-Skript abgespeichert:

<?php
 
$feeds = array('feed1', 'feed2', 'feed3');
$path = '/document_root/directory/filename.txt';
 
$fb = 0;
foreach ($feeds as $feed) {
$url="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=$feed";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$data = curl_exec($ch);
curl_close($ch);
$xml = new SimpleXMLElement($data);
$fb += $xml->feed->entry['circulation'];
}
file_put_contents($path, $fb);
?>

In den Array $feeds trägt man einfach seine Feedburner-ID ein (man kann hier auch gleich mehrere eintragen um mehrere Feed Counts abzurufen), und unter $path gibt man den (vollen) Pfad zu der Textdatei an, in der die Zahl gespeichert werden soll. Diese muss man natürlich vorher mit Notepad anlegen, hochladen, und beschreibbar machen.

Dann wird auch die .php Datei gespeichert, hochgeladen, und im Browser ausgeführt. Wenn alles geklappt hat, sollte in der .txt Datei auf dem Webserver nun die Zahl der Abonnenten gespeichert sein. Damit die Zahl auch aktuell bleibt kann man gleich noch einen Cronjob anlegen (sofern man denn einen Webhoster hat der einem das erlaubt), dann muss man das .php Skript nicht jedes Mal neu aufrufen.

Zu guter letzt müssen wir die Zahl aus der .txt Datei noch auslesen und in die Grafik einfügen. Dafür reicht ein einfaches

<?php
echo file_get_contents('/document_root/directory/filename.txt');
?>

Den (vollen) Pfad zur Textdatei muss man natürlich wieder entsprechend anpassen, und den ganzen Code in eine Zeile packen. Damit sieht unser Code-Schnipsel jetzt so aus und kann in die Sidebar eingebaut werden:

<p style="background: transparent url(http://www.alohastone.com/wp-content/images/aloha_feed.jpg) no-repeat scroll 0% 50%; text-decoration: none; display: block; width: 415px; height: 20px; padding-top:80px; padding-right: 35px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-family: Georgia, Times New Roman,sans-serif; font-size: 14px; text-align:right;"><a href="http://feeds.feedburner.com/alohastone">Bisher <strong><?php echo file_get_contents('/document_root/directory/filename.txt'); ?></strong> Abonnenten</a> / <a href="http://de.wikipedia.org/wiki/RSS">Wie funktioniert das?</a></p>

Feddisch! Viel Spaß beim selber ausprobieren

Update 10. März 2009: Mit der Übernahme von Feedburner durch Google hat sich die URL zur Awareness API geändert. Einfach die Zeile $url wie folgt ändern:

$url="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=$feed";

Dann sollte das Ganze wieder wie gewohnt funktionieren.

Ähnliche Beiträge:

links for 2007-12-30 through 2008-01-14

Bilder im Feedreader (für René)

YouTube Favoriten als RSS-Feed

Search Everything 4.2.1

Und jetzt? Gutfinden, weitersagen, kommentieren:

(1 BIGUPs)