SELECT * FROM // c[_]~~

Bei einem Projekt welches ich gerade beendet habe, sollte ein vorhandener Webauftritt um einen Blog erweitert werden. Da die “statische” Seite recht klein und kompakt gehalten wurde, somit nur schwer erweiterbar war, entschied ich mich für ein von der Seite unabhängiges Blog. D.h. es wurde eine Subdomain http://blog.* angelegt, Wordress installiert und ein schickes Theme ausgesucht.
Soweit so gut. Jetzt soll nur noch ein Teaser des neuesten Beitrages des Blog auf der Startseite der statischen Seite eingeblendet werden. Feedreader zum Einbinden in Webseiten gibt es viele. Nach kurzer Recherche fand ich gestern den zFeeder der mich vorerst überzeugte. OpenSource, benötigt PHP, relativ einfach einzurichten und das Einbinden und Anzeigen des Feeds funktionierte nach anfänglichen Problemen mit der Zeichensetzung ganz gut. Jedoch ist es eher für mehrere Feeds gedacht und für meine Zwecke ein wenig oversized.

Heute las ich über die Möglichkeit mit der Google AJAX Feed API Feeds via Javascript (klar heißt ja auch AJAX :) ) auf Webseiten einzubinden. Der API-Key war schnell generiert und das kleine Javascript in die Seite integriert. Der Beispielcode von Google konnte schnell mit ein paar kleinen Handgriffen und mit Hilfe von zwei Referenzen angepasst werden.

<script type="text/javascript" src="http://www.google.com/jsapi?key=dein-google-api-key"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
 var feed = new google.feeds.Feed("http://deine-Feed-Url");
 feed.load(function(result) {
 if (!result.error) {
			var container = document.getElementById("feed");
			var entry = result.feed.entries[0];

			var anker = document.createElement("a"); // Anker fuer Titel mit Link auf Beitrag
			var ankerText = document.createTextNode(entry.title);
			var moreAnker = document.createElement("a"); //Anker "mehr" mit Link auf Beitrag
			var div = document.createElement("div");

			anker.setAttribute("href",entry.link,false);
			anker.appendChild(ankerText);

			moreAnker.setAttribute("href",entry.link,false);
			moreAnker.appendChild(document.createTextNode("weiter"));

			div.appendChild(anker);
			div.appendChild(document.createElement("br"));
			div.appendChild(document.createTextNode(entry.content));
			div.appendChild(document.createTextNode("["));
			div.appendChild(moreAnker);
			div.appendChild(document.createTextNode("]"));
			container.appendChild(div);
 }
 });
}
google.setOnLoadCallback(initialize);

</script>

Da ich nur einen Beitrag anzeigen möchte, brauche ich keine Schleife an dieser Stelle. Beitragstitel wird zum Artikel im Blog verlinkt und am Ende des Textes (der Feed wird mit Feedburner auf 250 Zeichen begrenzt) wird ein “mehr”-Anker ebenfalls mit Link zum Beitrag gesetzt. Anschließend noch ein <div id="feed"></div> auf der Seite platziert und dann: Happy blogging liebe Gartenfreunde! ;)