Workshop: Twitter integrieren

Twitter mit jQuery

Durch Überschreiben erhalten vordere Positionen individuelle Formatierungen.

© Internet Magazin

Durch Überschreiben erhalten vordere Positionen individuelle Formatierungen.

Sobald der Index einen negativen Wert enthält, wird die Zuweisung der Formatierung nicht mehr durchgeführt. Auf diese Weise legen Sie individuell weitere Grenzen fest, bei denen sich die Formatierung ändern soll. In unserer Feed-Liste sollen die ersten beiden Elemente besonders hervorgehoben werden, der dritte bis hin zum fünften Eintrag in normaler Größe erscheinen und ab dem sechsten Eintrag eine kleinere Schriftart eingesetzt werden.Im ersten Schritt wird die Schriftgröße aller Einträge auf 90 Prozent des Standardwerts heruntergesetzt und der Schrift eine graue Farbe zugewiesen.

li:nth-child(n) {
font-size: 90%;
color: #666;
}

Rufen Sie anschließend Ihre Feed-Darstellung auf, sind alle Einträge kleiner geworden und haben eine graue Schrift erhalten.Legen Sie anschließend nach dieser Formatierung eine weitere an, in der allen Elementen ab Position 5 eine Schrift von 100 Prozent zugewiesen wird und die Darstellung in einem dunkleren Grauton erfolgt.

li:nth-child(-n+5) {
font-size: 100%;
color: #4F4F4F;
}

Wichtig ist die Position dieser Zuweisung innerhalb der CSS-Datei oder des style-Bereichs. Ansonsten überschreiben sich die Formatierungen in der falschen Reihenfolge. Je höher die Position des Elements in der Liste, desto später muss die Formatierung festgelegt werden.

li:nth-child(-n+2) {
font-size: 130%;
color: #000;
}

Allen Einträgen wird die Formatierung der hinteren Ranglistenplätze zugewiesen.

© Internet Magazin

Allen Einträgen wird die Formatierung der hinteren Ranglistenplätze zugewiesen.

Die beiden obersten Ranglistenpositionen der aktuellsten Feeds werden mit einer Schriftgröße von 130 Prozent und in schwarzer Farbe dargestellt.Das Ergebnis kann sich sehen lassen - in der Übersicht ist klar ersichtlich, welches die aktuellsten Einträge sind. Diese stechen aufgrund der gewählten Schriftgröße direkt ins Auge.Möchten Sie die Funktion der nth-child()-Pseudoklasse auch bei älteren Browsern einsetzen, dann sollten Sie einen Blick auf die beiden Frameworks Selectivizr (selectivizr.com ) und IE7.js (code.google.com/p/ie7-js ) werfen.Diese liefern die Funktion auch für ältere Browser aus dem Hause Microsoft und lassen sich mit wenigen Schritten direkt implementieren.

Fazit

Mit wenig Aufwand lässt sich ein in Ihre Website integrierter Twitter-Feed optisch anpassen. Abhängig von den gewählten Formatierungen stehen die Kurznachrichten dabei entweder dezent im Hintergrund oder werden hervorgehoben, z. B. durch unterschiedliche Schriftgrößen oder -farben, mit denen Sie bewusst Akzente setzen.So sind Ihre Besucher immer aktuell informiert und erfahren auf einen Blick, was Sie gerade bewegt.

Twitter mit jQuery

Technisch gesehen ist die Integration eines Twitter-Feeds dank der zur Verfügung stehenden API keine zu aufwändige Angelegenheit. Dank der jQuery-Erweiterung wird das Ganze zum Kinderspiel - damit können Sie Ihre Aufmerksamkeit vollständig auf die optische Gestaltung richten.Das verwendete Plug-in trägt den Namen tweetable.js und bietet verschiedene Funktionen zur Anmeldung und zum Abruf von Tweets. Für die Integration benötigen Sie zumindest folgende Grundkonfiguration.

<script type="text/javascript"
src="jquery.min.js"></script><script type="text/javascript"
src="jquery.tweetable.js"></
script><script type="text/javascript">
$(function() {
$('#tweets-inhalt).tweetable({
username: 'dereigenetwittername',
time: true,
limit: 10
});
});</script>

Den Namen des Tweets setzen Sie unter username, wobei nicht die URL sondern nur der Identifier für den Tweet angegeben werden muss.Haben Sie den Parameter time aktiviert, wird auch der Zeitpunkt, an dem der Twitter-Feed aufgegeben wurde, mit angezeigt.Schließlich legt der Parameter limit noch fest, wie viele Einträge in der Liste dargestellt werden sollen.In unserem Beispiel ist der Wert auf 10 festgelegt.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…