Mit TypoScript und JavaScript zum eigenen Feed: RSS-Feeds mit TYPO3
RSS-Feeds sind für viele Internetbenutzer aus ihrem täglichen Leben nicht mehr wegzudenken. Sie informieren über die letzten Neuigkeiten, Updates von interessanten Websites und Videos, getätigte Bestellungen im eigenen Onlineshop und vieles mehr. Die Erstellung eines RSS-Feeds ist relativ trivial, da es nichts anderes als ein XML-Dokument ist, dem ein bestimmter Aufbau zugrunde liegt.
RSS-Feeds mit TypoScript
Für die Generierung eines Feeds erstellen Sie eine neue Seite, auf der Sie mit folgendem TypoScript ein HMENU zur Generierung eines Feeds einbinden:
config.disableAllHeaderCode = 1
config.metaCharset = utf-8
config.additionalHeaders = Content-Type:text/xml;charset=utf-8
config.xhtml_cleaning = 0
page >
page = PAGE
page.wrap = <rss version="2.0"><channel>|</channel></rss>
page.5 = TEXT
page.5.value (
<title>Letzten Seiten</title>
<link>http://www.ringer.it</link>
<description>Was hat sich getan</description>
<language>de-de</language>
<copyright>Georg Ringer</copyright>
<pubDate>Tue, 8 Jul 2008 2:43:19</pubDate>
)
page.10 = HMENU
page.10 {
special = updated
special {
value = 1
mode = tstamp
maxAge = 3600*24*300
}
wrap = <rss version="2.0">|</rss>
1 = TMENU
1 {
noBlur = 1
NO.stdWrap.cObject = COA
NO.stdWrap.cObject {
stdWrap.wrap = <item>|</item>
1 = TEXT
1 {
field = title
htmlSpecialChars = 1
wrap = <title>|</title>
}
2 <.1
2.field = abstract // description
2.wrap = <description>|</description>
3 <.1
3.field = uid
3.wrap = <guid>page-|</guid>
4 = TEXT
4.stdWrap.typolink.parameter.field = uid
4.stdWrap.typolink.returnLast = url
4.wrap = <link>|</link>
5 <.1
5.field = tstamp
5.strftime = %d.%m.%y %H:%M
5.wrap = <pubDate>|</pubDate>
}
}
}
Listing 1
Das special-Menü „updated“ liefert die zuletzt geänderten Seiten. Zusätzlich müssen lediglich der korrekte Header geliefert und die entsprechenden Felder der jeweiligen Seiten mit den korrekten Tags gewrappt werden. Neben der Möglichkeit, Feeds aus Seiten zu generieren, ist es auch denkbar, mittels „cObject CONTENT“ auf andere Datensätze wie „tt_content“ oder die einer eigenen Extension zuzugreifen und diese ausgeben zu lassen.
Einbindung eines Feeds mit JavaScript
Genauso einfach wie man einen eigenen Feed erstellen kann, können Sie diesen auch auf Ihrer eigenen Website einbinden. Dazu können Sie eine der zahlreichen Extensions aus dem TYPO3-Extension-Repository [1] wie „tw_rssfeeds“, „gkh_rss_import“ oder „yafi“ verwenden – oder Sie greifen zu purem JavaScript. Dafür bietet sich eine API von Google [2] an, die den Feed abgreift und auf einfache Weise zur Verfügung stellt.
<html>
<head>
<script type="text/javascript" xsrc="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.ihre-domain.de/feed.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
Listing 2
Dieses einfache Beispiel zeigt die Funktionsweise der Google Feed API. Der Titel jedes Feed-Eintrags wird in ein neu erstelltes div innerhalb des divs mit der ID „Feed“ geschrieben und ausgegeben.
Pimpen mit Mootools
Mit den Möglichkeiten von JavaScript-Frameworks wie MooTools [3] lässt sich die Ausgabe mit wenigen Zeilen um nette Effekte erweitern und aufpeppen. Die folgende JavaScript-Funktion gibt in Kombination mit der Klasse „mooquee“ [4] den Inhalt eines RSS-Feeds als scrollende Liste aus, wobei die Titel mit der hinterlegten URL verlinkt sind.
google.load("feeds", "1");
function showfeed(url) {
var feed = new google.feeds.Feed(url);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var div = document.createElement("div");
var link = new Element('a', {
'href': items[i].getElementsByTagName("link")[0].firstChild.nodeValue,
'html': items[i].getElementsByTagName("title")[0].firstChild.nodeValue
});
var date = new Element('span', {
'html': items[i].getElementsByTagName("pubdate")[0].firstChild.nodeValue
});
var text = new Element('p', {
'html': items[i].getElementsByTagName("description")[0].firstChild.nodeValue
});
div.appendChild(link);
div.appendChild(date);
$('feed').appendChild(div);
}
var obj = new mooquee($('feed'));
}
});
}
Listing 3
Die Ausgabe ist für dieses Tutorial bewusst einfach gehalten. Sie können es nach Belieben mit CSS optimieren und an die eigenen Bedürfnisse anpassen.
Feed einbinden
Die Einbindung des Feeds in Ihre Website erreichen Sie mit TypoScript, wobei auf der Ausgabeseite ein div-Element mit der ID „feed“ existieren muss. Dieses können Sie beispielsweise mit dem Content-Element „HTML“ erstellen und überall platzieren.
Folgender TypoScript-Code bindet die notwendigen JavaScript-Dateien und den CSS-Code in den Header der TYPO3-Seite ein. Sämtliche Dateien finden Sie über den Softlink am Ende des Artikels, den Sie lediglich unter t3n.de/magazin/softlinks/ eingeben müssen. Die Dateien legen Sie in den Ordner „fileadmin/feed“. Alternativ können Sie die Pfade im TypoScript selbst anpassen oder den Code in bereits bestehende Dateien übernehmen.
Im TypoScript müssen Sie lediglich Ihren individuellen API-Key für die Google Feed API und die URL zu Ihrem RSS-Feed anpassen.
page.headerData.123 = TEXT
page.headerData.123.value (
<link rel="stylesheet" type="text/css" href="fileadmin/feed/styles.css" />
<script type="text/javascript" xsrc="fileadmin/feed/mootools-1.2-core.js"></script>
<script type="text/javascript" xsrc="fileadmin/feed/mooquee_1.1.js"></script>
<script type="text/javascript" xsrc="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
<script type="text/javascript" xsrc="fileadmin/feed/feed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
var url = "http://www.ihre-domain.at/feed.xml";
showfeed(url);
});
</script>
)
Listing 4
Fazit
Es muss nicht immer eine Extension sein, wenn es darum geht, bestimmte Funktionalitäten umzusetzen. Gerade die Generierung von Menüs ist eine der Stärken von TypoScript. Auch das Erzeugen von XML ist mit TypoScript kein Problem. Die unkomplizierte Darstellung von RSS-Feeds erlaubt die schnelle Einbindung von fremdem Content, den Sie mit den unzähligen Möglichkeiten von JavaScript gestalten und anreichern können.
Georg Ringer arbeitet für die Agentur CYBERhouse (www.cyberhouse.at) in Linz und realisiert am liebsten komplexe Anforderungen. Neben TYPO3 umfasst sein Aufgabengebiet die Erstellung und Erweiterung von Onlineshops mit Magento.
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team