Dieser Teil widmet sich den Möglichkeiten zur Darstellung von Tweets in einer Homepage.
Vor allem werden Möglichkeiten betrachet, dies ohne eigene Programmierung zu erreichen.
Ebenso erfolgt ein Verzicht von Server Skriptsprachen wie PHP.
Wie binde ich Twitter Tweets auf der eigenen Homepage ein?
Zunächst wird aber doch kurz auf die Programmiermöglichkeiten eingegangen.
Ohne viel Aufwand und ohne die Twitter API zu bemühen, kann mit etwas Programmieraufwand die Twitter Updates abgefragt und dargestellt werden.
Dazu liest man den
RSS Feed mit den letzten Updates vom gewünschten Nutzer ein.
Die Feed URL findet sich auf der entsprechenden Twitter Benutzerseite unter dem Link "RSS-Feed mit Tweets von" ... .
Für den Account vom
CUCM wäre das etwa
http://twitter.com/statuses/user_timeline/93001889.rss.
Zum Einlesen der Feeds verwendet man einen beliebigen XML Parser oder einen optimierten Feed Parser.
Das kann auf Serverseite mit PHP passieren oder im Browser mit Javascript / AJAX.
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.
Wie kann ich von der eigenen Webseite Tweets schreiben?
Automatisch lässt sich ohne (serverseitige) Programmierung nichts machen.
Allerdings kann der
Tweet Button () verwendet werden.
Dabei öffnet sich ein Fenster, mit Tweet Eingabemöglichkeit.
Allerdings muss der Benutzer für einen Tweet sich mit dem eigenen Twitter Account anmelden.
Die ursprüngliche Webseite bekommt von der Anmeldung / den Twitter Zugangsdaten nichts mit.
Jedoch besteht die Möglichkeit, Felder mit Daten vorzubelegen, etwa die URL ( data-url="http://..."), den Benutzer (data-via="cucm" ) und Tweet Text (data-text="lorem ipsum ...").
Weitere Funktionalität erreicht man erst mit zusätzlicher Programmierung in einer Server Skriptsprache oder im Falle einer Desktop Anwendung mit Programmiersprachen wie C oder Java.
Links
Twitter API Teil 2: Wie programmiere ich Twitter Anwendungen?
Twitter Developer
Twitter Widgets
Twitter / Tweet Button
Widget Beispiel Code
<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>
Kommentar Verfassen