CUCM Logo
Do  21.02.2019CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
Do  21.02.2019CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
Fr  22.02.2019CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
 

Blog: Twitter API Teil 1: Wie stelle ich Tweets auf einer Webseite dar

Autor: Nick   Kommentare (0)   Kurz URL: http://bit.ly/9Diie7   Bei Twitter speichern   Bei Facebook speichern   Bei Digg speichern   Bei Delicious speichern   Bei Mr. Wong speichern   Bei Google Bookmarks speichern
14.10.2010
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>



Den Artikel empfehlen

Ähnliche Blog Beiträge

HTML und CSS Coding Guidelines von Google

http://www.cucm.de/blog/98/html_und_css_coding_guidelines_von_google/
06.05.2012 - Google hat seinen Leitfaden für einheitlichen und sauberen HTML / CSS Code veröffentlicht. Damit einigt man sich bei einem Projekt auf ein paar Regeln, z.B. wie wird Quellcode formatiert, Namenskonventionen, wo werden welche Dateien abgelegt etc.  Weiter lesen

HTML5: Deklaration der Webseiten Sprache (Meta Language)

http://www.cucm.de/blog/84/html5_deklaration_der_webseiten_sprache_meta_language/
07.01.2012 -  Weiter lesen

Vorstellung des jQuery Plugin "DataTable" für HTML Tabellen sortieren, pagination und suchen

http://www.cucm.de/blog/62/vorstellung_des_jquery_plugin_datatable_fuer_html_tabellen_sortieren_pagination_und_suchen/
13.05.2011 - Ohne auf Server-seitige Programmierung wie etwa PHP zurückzugreifen, kann man mit dem jQuery Plugin Datatable einfach eine HTML Tabelle um zusätzliche Funktionen erweitern. Die Hauptfunktionen sind das sortieren nach den jeweiligen Spalten, Pagination (aufteilen in mehrere Seiten) und eine Suche.  Weiter lesen

HTML Tabellen (table) mit Javascript sortieren: Tablesorter für jQuery

http://www.cucm.de/blog/35/html_tabellen_table_mit_javascript_sortieren_tablesorter_fuer_jquery/
29.06.2010 - Mittels dem jQuery Plugin Tablesorter wandeln sich HTML Tabellen in sortierbare Tabellen. Eine serverseitige Programmiersprache wie PHP wird dabei nicht benötigt.  Weiter lesen

Weitere Blog Artikel vom Compuser Club

Dem Computer Club folgen und über Neuigkeiten informiert werden:

RSS Feeds RSS Feeds   CUCM @ Twitter Twitter   CUCM @ Facebook Facebook   CUCM @ Google+ Google+
 
Bislang wurde kein Kommentar zu diesem Beitrag abgegeben. Sei erster!
 

Kommentar Verfassen

 
(erforderlich)
 
(erforderlich)
Ihre E-Mail Adresse wird nicht auf der Seite veröffentlicht. Sie dient ausschliesslich der möglichen Kontaktaufnahme unserseits.
 
 
 
 

3) Hinweis zur Freischaltung

Um Spam Missbrauch zu verhindern, werden alle Kommentare zuerst von uns geprüft. Daher kann es einen Augenblick dauern, bis Ihr Kommentar auf unserer Webseite erscheint. Spam oder was wir dafür halten, wird unsererseits kommentarlos gelöscht.
To avoid Spam on our Page, we check all Comments before publish. So save you and us Time and dont Spam.


CompUser Club Mainspitze e.V.   |  65428 Rüsselsheim   |  Moselstrasse 21 (Post Gebäude: 1. Stock)