Workshop: Twitter integrieren

Twitter-Feeds anpassen

Ein Twitter-Feed auf Ihrer Website informiert über Neuigkeiten. Erfahren Sie, wie Sie auf Basis von CSS den Tweet optimal integrieren.

  1. Twitter-Feeds anpassen
  2. Überschrift anpassen
  3. Twitter mit jQuery
Twitter-Feeds anpassen

© Internet Magazin

Twitter-Feeds anpassen

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.

Im Workshop nutzen wir die Feed-Abfrage eine jQuery- Erweiterung.

© Internet Magazin

Im Workshop nutzen wir die Feed-Abfrage eine jQuery- Erweiterung.

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;
}

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​".