24. June 2008

Per AJAX Twitter Userdaten laden

Load Data
Name:
Location :
Homepage:

Twitter - AJAX Client

Gib einen Twitternamen ein und drücke auf Load.

Das ist ein funktionierendes Demo eines Javascript Clients für Twitter, aber das Script dahinter ist noch sehr rudimentär. So werden zum Beispiel Fehler nicht abgefangen.

Genaue Zahlen habe ich zwar nicht gefunden, aber gefühlt hat irgendwie so ziemlich jeder einen Account bei Twitter, dem beliebten Zeitvernichtungstool.

Da zu einem Account bei Twitter auch immer ein kleines Userbild gehört, kam mir die Idee, diese Bildchen als Alternative zu Gravatar für Kommentare zu benutzen.

Rechts siehst Du das erste Ergebnis dieser Idee: Twitter-Screenname eingeben und auf Load klicken und dann werden die zugehörigen Daten per AJAX vom Twitter Server geladen.

Wie Du weiter unten sehen kannst, ist das Markup und das Script selber relativ simpel, das ist allerdings nur möglich, weil Twitter die Userdaten auch als JSON anbietet.

Die Doku zur API von Twitter zeigt, wie man auf die Daten zugreifen kann. Allerdings ist die Anzahl der Requests auf 70 pro Stunde limitiert.

JSON von Twitter holen

Die URL für Userdaten bei Twitter hat folgendes Schema:

http://twitter.com/users/show/USERNAME.json

Da ich das JSON per Javascript verarbeiten will und weil eine HTTP Authentication notwendig ist, brauche ich als erstes ein kleines PHP Script, dass das JSON File einließt und direkt wieder ausspuckt. Dadurch kommt das JSON von meinem Server und ich kann es per AJAX laden und mein Twitter Passwort bleibt geheim, da nur im PHP.

<?php
header('Content-Type: application/json');
$user_name = $_GET['user_name'];
$json = @file("http://Samisdat:passwort@twitter.com/users/show/$user_name.json");
echo join('',$json);
?>

Sinnigerweise speichere ich das als twitter.php

Per AJAX laden

Das Javascript ist zwar einen Ticken komplizierter, als das PHP Script oben, aber es hält sich doch noch in engen Grenzen;) Natürlich braucht es erstmal Prototype und dann:

document.observe("dom:loaded", function(){$('twitter_get_name').observe('click', function(){
<tab1> new Ajax.Request('twitter.php', {</tab1>
<tab2> method: 'get',</tab2>
<tab2> parameters:{'user_name':$('twitter_name').value},</tab2>
<tab2> onSuccess: function(transport){</tab2>
<tab3> var json = transport.responseJSON;</tab3>
<tab3> json['fn'] = json['name'];</tab3>
<tab3> json['tweet'] = json['status']['text'];</tab3>
<tab3> json['profile_image'] = '<img src="'+json['profile_image_url']+'" alt="Twitter Image"/>';</tab3>
<tab3>['profile_image','screen_name','fn','url','location','tweet'].each(function(elem){</tab3>
<tab4> $('twitter_'+elem).innerHTML = json[elem];</tab4>
<tab3> });</tab3>
<tab2> }</tab2>
<tab1> });</tab1>
});});

Das Script tut im Prinzip folgendes:

  1. Auf Klicks auf den “Load” Button lauern
  2. Bei einem Klick einen AJAX Request an twitter.php mit dem Inhalt des Eingabefeldes als GET Variabel
  3. twitter.php holt von Twitter die JSON Datei und gibt die an das Javascript zurück
  4. Das JSON wird ein bißchen umgebaut
  5. Das Bild, der Name, die Homepage, die Location und der letze Tweet werden ins HTML geschrieben.
  6. Fertig

Ich gehe mal nicht darauf ein, wie das Markup aufgebaut ist. Nur in Kurzfassung: Ein Formularfeld zur Eingabe des Screenname und ein paar divs zur Ausgabe. Die div haben in diesem Beispiel jeweils eine ID beginnend mit twitter_ gefolgt von dem JSON Key, dessen Wert rein soll (z.b.: In twitter_location wird die Location geschrieben).

Kommentare

Oct 15, 04:44 PM
errewrere

sdasdasdasdasdasdasdasd

Neuen Kommentar schreiben