Twitter-Feeds anpassen
Ein Twitter-Feed auf Ihrer Website informiert über Neuigkeiten. Erfahren Sie, wie Sie auf Basis von CSS den Tweet optimal integrieren.
- Twitter-Feeds anpassen
- Überschrift anpassen
- Twitter mit jQuery
Ein Twitter-Feed lässt sich mit geringem Aufwand in eine HTML-Seite integrieren. Damit er sich optisch nicht zu sehr vom Rest der Seite abhebt, sondern ins Gesamtbild passt, sollten Sie ein paar Anpassungen vornehmen....
Ein Twitter-Feed lässt sich mit geringem Aufwand in eine HTML-Seite integrieren. Damit er sich optisch nicht zu sehr vom Rest der Seite abhebt, sondern ins Gesamtbild passt, sollten Sie ein paar Anpassungen vornehmen.
Am einfachsten realisieren Sie dies über CSS. Das folgende Beispiel zeigt Ihnen schrittweise, wie Sie Ihren Twitter-Feed optisch gestalten können. Für die Darstellung eines Twitter-Feeds auf Ihrer Website gibt es verschiedene technische Optionen. In den folgenden Beispielen nutzen wir dazu ein jQuery-Plug-in.
Grundstruktur
Für die Integration des Twitter-Feeds wird in den Beispielen die folgende Grundstruktur genutzt.
<div id=
"tweets"><h3>Twitter</h3><div id="tweets-inhalt"><!"-Hier startet der Twitter-Feed--></div></div>Das div-Tag mit der ID tweets-inhalt ist der Container, in welchem das Plug-in die aktuellen Nachrichten Ihres Twitter-Feeds zur Verfügung stellt. Die entsprechende Verknüpfung zwischen dem Container und Ihren Inhalten stellen Sie über das jQuery-Plug-in her.Die Ausgabe realisiert das Plug-in über eine einfache unsortierte Liste mit der folgenden Struktur:
<ul><li><p></p></li></ul>Diese bildet auch die Basis für die folgenden Formatierungen.
Tweet optisch anpassen
Der Hintergrund der HTML-Seite bleibt in unserem Beispiel weiß. Als Grundtextart wird Arial verwendet und die Schriftgröße beträgt 100 Prozent, ist also die Standardgröße Ihres Browsers. Diese Grundeinstellungen werden dem body-Tag über eine entsprechende Formatierung zugewiesen.
body {
margin: 0;
padding: 2em 0;
background: #000;
font: 100% Arial, sans-serif;
}margin und padding sorgen darüber hinaus für die richtigen Innen- und Außenabstände. Wenn Sie Ihre Website aufrufen, sehen Sie neben der Überschrift "Twitter", die innerhalb des div-Tags tweets gesetzt wird die einzelnen Beiträge jeweils als Listenpunkte.Im Beispiel soll der Twitter-Feed sich optisch vom Rest der Seite hervorheben. Dazu wird er in einem Kasten platziert, der die klassische Twitterfarbe erhält, ein Türkis mit den Farbwerten #33CCFF. Das eingefügte Logo stammt von der Twitter-Website und ist nur in der Größe ein wenig angepasst, da Sie Objekte im Hintergrund vor CSS3 noch nicht skalieren können.
#tweets {
width: 300px;
padding: 140px 1em 1em 1em;
background: #33CCFF url(twitter_
bird_2.png) no-repeat 50% 10px;
border-radius: 12px;
color: #000;
margin: 0 auto;
}Die Breite der Twitter-Box wird auf 300 Pixel festgelegt, mit entsprechenden Innen- und Außenabständen versehen und erhält die Textfarbe weiß. Eine optische Spielerei ist die Eigenschaft border-radius, mit der Sie die Ecken abrunden können. Dabei handelt es sich um eine CSS3-Funktionalität, die noch nicht in allen aktuellen Browsern zur Verfügung steht. In diesem Fall bleibt es bei der klassischen Darstellung der Ecken.Möchten Sie aus optischen Gründen nicht die komplette zur Verfügung stehende Fläche für die Darstellung des Inhalts verwenden, schränken Sie diese mit Hilfe des div-Tags tweets-inhalt entsprechend ein. Die folgende Formatierung verkleinert die Fläche auf 90 Prozent der ursprünglichen Größe.
#tweets-inhalt {
width: 90%;
margin: 0 auto;
}
Listenelemente formatieren
Noch immer sehen Sie die einzelnen Twitter-Beiträge als Listenelemente mit den klassischen Aufzählungszeichen. Diesen rücken Sie mit der folgenden CSS-Formatierung zu Leibe.
#tweets-inhalt ul {
margin: 0;
padding: 0;
list-style: none;
}margin und padding sorgen an dieser Stelle für die Korrektur der Abstände.Wenn Sie einzelne Feeds mit Hilfe eines Aufzählungszeichens markieren möchten, realisieren Sie dies am einfachsten über die einzelnen Listenelemente. Dazu passen Sie die CSS-Formatierung der Elemente ul li an.
#tweets-inhalt ul li {
margin-bottom: 0.5em;
line-height: 1.3;
padding-left: 11px;
background: url(arrow.png) no-repeat
-6px 2px;
}
