Tweets mit jQuery anzeigen

« | »

Donnerstag 29.April, 2010

Auf unserer Seite kann man ja in der Sidebar immer den letzten Tweet von unserem Twitter Account sehen, ich werde in den letzten Tagen öfter gefragt wie das realisiert wurde. Die Antwort ist mal wieder jQuery.

Ursprünglich hatten wir in die functions.js vom Wordpress theme eine Wordpress-Twitter Funktion eingebaut und die Funktion entsprechend in die Sidebar eingetragen, diese Lösung entpuppte sich als etwas instabil. Die deutlich bessere und einfachere Lösung kommt von jQuery. Mit dem folgenden Code wird der letzte Tweet ausgelesen und über den Selektor ins entsprechende Seitenelement eingetragen.

Im Code muss nur “Username” durch den eigenen Benutzernamen ersetzt werden und schon kann man das Beispiel ins eigene Projekt einbinden. In unserem Beispiel wird der neue Tweet in den Paragraph-Tag mit der ID “Tweet” eingefügt.

html Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Show latest Tweet</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="Javascript" src="script.js"></script>
<body>
<div>
<p id="tweet"></p>
</div>
</body>
</html>

jQuery Code

$(document).ready(function() {

         $.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
   				$("#tweet").html(data[0].text);
         });
});

2 Kommentare zu “Tweets mit jQuery anzeigen”

  1. Carsten sagt dazu:

    Schöne Lösung,
    geradezu fantastisch wäre es jedoch, wenn Links automatisch in solche umgewandelt werden würden. Wie würde das funktionieren?

  2. s.noschka sagt dazu:

    Da würde ich anschließend den gesamten p tag als String durchsuchen lassen…und alle Einträge mit “www.” rausfiltern und mit einem “a href=”" wrappen lassen.

    Ob es von Jquery eine elegantere Funktion als die beschriebene gibt, weiß ich aus dem Stehgreif leider nicht.

    Wenn ich dazu komme, schreibe ich mal eine Version mit Linkumwandlung.

Kommentar schreiben