Twitter bietet die Möglichkeit seinen eigenen Twitter Feed per Javascript auf jeder Seite einzubinden. Ein Problem dabei ist, dass man das Script von der Twitter Webseite aus einbinden muss. Nun ist Twitter ab und an sehr überlastet, so das das Laden dieses Scriptes sehr lange dauern kann. Dies blockiert dann die eigene Seite, die dann einfach nicht aufhören mag zu laden. Ausserdem ist das Aussehen dieses Javascripts nur bedingt anzupassen.

Dies alles veranlasste mich dazu ein eigenes kleines Script zu schreiben. Mit diesem hab ich dann die volle Kontrolle was ich wie anzeigen möchte. Da ich per Ajax den Twitterfeed auslese stört es nicht den Aufbau meiner Seite. An den Twitterfeed kommt man über folgende URL: http://search.twitter.com/search.json?q=from%3AUSERNAME. Dabei mache ich mir zunutze das Twitter eine Search API zur Verfügung stellt. Diese bietet unter anderem die Möglichkeit per JSON die Daten zu liefern. Da es aus Sicherheitsgründen nicht erlaubt ist per Javascript von einer Fremden Domains Daten zu empfangen, habe ich ein kleines PHP Script geschrieben was die Daten des JSON Feeds ausliesst und wieder ausgibt.

Demo

Demoseite des Twitterscripts.

PHP Script zum auslesen und ausgeben des JSON Feeds

1
2

header('Content-Type: application/json'); 
print file_get_contents("http://search.twitter.com/search.json?q=from%3A".$_GET['user']);

Erklärung PHP

In der ersten Zeile wird der JSON Header gesendet. Dann lade ich den Twitter Feed per file_get_contents Befehl und gebe ihn dann direkt wieder aus.

Wie in der Überschrift erwähnt verwende ich das Mootools Framework um einfach den JSON Feed auszulesen und anzuzeigen. Dadurch braucht man sich nur noch um das wesentliche zu kümmern.

Das Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

var getTwitter = new Class(
{
  initialize: function(url,id)
  {
    this.url = url;
    this.id = id;
    this.getJson();
  },
 
  buildHtml : function(responseObject)
  {    
    var tb = '<ul class="twitterlist">';
    for(var i = 0; i < responseObject['results'].length; i++) {
      tb = tb + '<li style="background-image: url('+responseObject['results'][i].profile_image_url+')" class="twitt"><p>' + responseObject['results'][i].text + '<span class="twitttime">'+this.transformTime(responseObject['results'][i].created_at)+'</span></p></li>';
    }
    tb = tb + '</ul>';        
    return tb;
  },
 
  transformTime : function(mytime)
  {
    var dd = new Date();
    dd.setTime(Date.parse(mytime)).toLocaleString();
 
    var min = ''+dd.getMinutes();
    if ( min.length < 2) min = '0'+min;
 
    var mon = ''+(dd.getMonth()+1);
    if ( mon.length < 2) mon = '0'+mon;      
 
    return dd.getDate()+'.'+mon+'.'+dd.getFullYear()+' '+dd.getHours()+':'+min+' Uhr';
  },
 
  getJson : function()
  {
    var jsonRequest = new Request.JSON({
      url: this.url,
      onSuccess: function(obj,txt)
      {
        $(this.id).innerHTML = this.buildHtml(obj);
      }.bind(this)
    }).get();
  } 
 
});
 
window.addEvent('domready', function(){ 
  var h = new getTwitter('http://www.chaosbox.de/demos/gettwitterjson.php?user=Drathal','twitterdata');
});

Erklärung Javascript

In der initialize Methode werden die auszulesende URL und das TAG angegeben wo die Ausgabe stattfinden soll. Dort wird dann die Methode getJson aufgerufen die unser kleines PHP Script aufruft um die Daten zu empfangen. Sobald der Feed erfolgreich geladen wurde wird onSuccess aufgerufen. Von dort aus bastelt die Methode buildHtml das HTML für die Seite zusammen. Diese durchläuft einfach das Antwort Object und erstellt eine Liste. Um das Datum der Ausgabe noch ein wenig anzupassen wird die Methode transformTime aufgerufen.

Schlusswort

Wie man schnell erkennt ist das ein sehr einfaches Script das noch viel Verbesserungspotential hat. So kann man z.B. eine Ladeanzeige einbauen, eine Nachricht ausgeben wenn Twitter nicht errreichbar ist, oder aber das Design weiter verschönern. Dieses Script dient als Anregung und darf von jedem frei benutzt und verändert werden.