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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".