Fertige Twitter Lösungen in HTML und Javascript

Eine Variante ohne eigene Programmierung sind die Twitter Widgets. Widgets sind kleine Mini Anwendungen in HTML und Javascript. Mit diesen Mini Anwendungen lassen sich die Twitter Updates etwa auf der eigenen Webseite oder in Sozialen Netzen anzeigen. Zur Verfügung stehen Widget für die eigenen Twitter Updates, Twitter Suche, Tweets aus den eigenen Favoriten und Tweets aus Listen. Die Widgets lassen sich auf der Twitter Widget Seite personalisieren. Zunächst gibt man den Twitter Account ein, weiterhin kann man die Eigenschaften (Preferences) wie Anzahl der Tweets, das Aussehen und die Maße bestimmen. Am Ende erfolgt ein Klick auf "Fertigstellen" und erhält einen fertigen Code Schnipsel. Diesen wird nur noch an der passenden Stelle in der Seite eingefügt.

Hinweis: Am Ende des Beitrages, findet sich der Code für das linke Beispiel. Eigentlich sollten die Variablenbezeichnungen soweit selbst erklärend sein, aber auf die wichtigsten wird kurz eingegangen. Besonders von interesse ist die Anpassung vom 'theme' Block. Dabei steht 'shell' für die "Hülle" aussenrum (dunkelgrau im Beispiel), sowie 'tweets' für die eigentlichen Tweets (schwarzer Hintergrund im Beispiel). Für beide Bereiche lässt sich die Hintergrundfarbe (background) sowie Schriftfarbe (color) in Hex Farbwerten angeben.

Die Aktualisierungshäufigkeit für Tweet Erneuerungen wird bei 'intervall' eingetragen. Zu beachten ist die die Zeitangabe in Millisekunden (ms). Im Beispiel werden die Tweets folglich alle 6 Sekunden (6000 ms) abgefragt. Zusätzlich muss für die automatische Aktualisierung der Wert von 'live' auf true stehen. Die einzige nicht selbst erklärende aber wichtige Variable ist rpp. Hier sei der Hinweis angebracht, das rpp für die Anzahl der dargestellten Tweets steht.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 6,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('cucm').start();
</script>