Twitter mit jQuery
- Twitter-Feeds anpassen
- Überschrift anpassen
- Twitter mit jQuery
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 werd...
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;
}
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.
