LOGO: Atari-Frosch

Froschs Blog

Computer und was das Leben einer Frau sonst noch so zu bieten hat

Zur Website | Impressum

Tweets in HTML und CSS darstellen

22. December 2011 um 22:09 Uhr von Atari-Frosch

Der letzte Blogpost hier war ziemlich viel Arbeit, weil ich von jedem Tweet einen Screenshot anfertigen und dann dafür einen ziemlich großen HTML-Block schreiben mußte, und dabei sind mir dann auch noch immer wieder Fehler unterlaufen, bis alles stimmte. Ich glaube, ich habe jetzt eine Methode gefunden, um die Darstellung von Tweets in Webseiten und Blogposts deutlich zu vereinfachen. Here we go:

Zunächst brauchen wir ein Stück CSS. Das sieht bei mir so aus:

#content blockquote.tweet {
  width            : 545px;
  background-color : #ffffff;
  color            : #000000;
  border           : 1px #000000 solid;
}

Ich habe üblicherweise in Websites drei Grund-divs (als id, nicht als class), und zwar für Kopf, Navigation und Content. Im div#content lege ich also nun eine Klasse .tweet für blockquote an, die mit 545px Breite ungefähr der Breite eines Tweets bei mir im Webinterface entspricht. Hintergrundfarbe wird weiß, Textfarbe schwarz, und einen Rahmen bekommt die Klasse auch noch.

#content blockquote.tweet img {
  float            : left;
  margin           : 0 1em .5em 0;
  border           : 0;
}

Darin will ich dann natürlich auch den Avatar des Twitterers einbinden. Damit der an der richtigen Stelle steht, lasse ich ihn nach links floaten, setze einen passenden Abstand und definiere, daß das Bild auch ganz bestimmt keinen eigenen Rahmen bekommen soll.

#content blockquote.tweet div.tweetcontent {
  margin           : 0 .5em 0 60px;
}

Damit sämtlicher Text neben dem gefloateten Bild steht und nicht unterhalb des Bildes wieder ausgerückt wird, setze ich da noch ein div dazwischen, das einen einheitlichen Rand nach links mitbringt. Diesen habe ich auf 60px festgenagelt, weil die Avatare, die Twitter übermittelt, 48px groß sind und auch noch ein Rand zum Text hin benötigt wird. Ein Abstand in em, den ich sonst bevorzuge, erscheint mir daher an dieser Stelle ungünstig.

#content blockquote.tweet p {
  margin           : .2em 0 0 0;
  text-align       : left;
  text-indent      : 0;
}

Ein Absatz innerhalb dieses Blocks soll außer nach oben keine Abstände haben, linksbündig sein und keinen Texteinzug haben. Die Text-Angaben setze ich nur deshalb explizit, weil #content p bei mir meistens in Blocksatz gesetzt ist und einen Texteinzug hat. In diesem Twitter-Block soll das aber nicht passieren.

#content blockquote.tweet a.permlink {
  background-color : inherit;
  color            : #666666;
  text-decoration  : none;
  font-size        : 80%; 
  font-style       : italic;
}

Schließlich brauche ich noch eine Klasse für den Permalink. Die Hintergrundfarbe wird übernommen, aber die Textfarbe auf dunkelgrau gesetzt; um korrektes CSS zu schreiben, muß dann, wenn man eine der beiden Farben setzt, auch die andere gesetzt werden. Der Link soll keine text-decoration haben; ohne diese Angabe werden Links von den meisten Browsern unterstrichen dargestellt. Außerdem verringere ich die normale Textgröße auf 80 %, denn im Webinterface von Twitter ist dieser Link üblicherweise auch kleiner dargestellt.

Und so sieht dann beispielhaft der HTML-Teil aus:

<blockquote class="tweet">
  <img src="https://twimg0-a.akamaihd.net/profile_images/1485200614/aflogo-twitter-150x150_normal.jpg"
       width="48" height="48" alt=" " />
  <div class="tweetcontent">
    <p>@<a href="https://twitter.com/#!/AtariFrosch">AtariFrosch</a>
       [Blog] Grüne Netzpolitik in Theorie und Praxis --
      <a href="http://blog.atari-frosch.de/2011/12/22/gruene-netzpolitik-in-theorie-und-praxis/">blog.atari-frosch.de/2011/12/22/gru…</a>
#piraten #netzpolitik #bundestrojaner #onlinedurchsuchung</p>
    <p><a class="permlink" href="https://twitter.com/#!/AtariFrosch/status/149922681876250624">22. Dez 19:42</a></p>
  </div><!-- div.tweetcontent -->
</blockquote>

Angewandt sieht das dann so aus:

@AtariFrosch [Blog] Grüne Netzpolitik in Theorie und Praxis — blog.atari-frosch.de/2011/12/22/gru… #piraten #netzpolitik #bundestrojaner #onlinedurchsuchung

22. Dez 19:42

Das kann man nehmen, oder?

Und Ihr dürft es auch nehmen: Die Verwendung ist frei :-)


2 Kommentare zu “Tweets in HTML und CSS darstellen”

  1. Heiko quakte:

    Ginge das nicht mit https://dev.twitter.com/docs/embedded-tweets schneller?


  2. frosch quakte:

    @Heiko: Oh, das kannte ich nicht. Allerdings finde ich auf dieser Detail-Seite die beschriebene Funktion nicht. Ist das eventuell (noch) nicht bei deutscher Spracheinstellung zugänglich?

    EDIT: Selbst wenn es ginge: Das ist mit JavaScript. Ist zwar schön, weil’s dann dynamisch ist, aber doof, weil man eben JavaScript braucht. Und wenn jemand JavaScript aus hat, sieht er die Tweets nicht mehr. Das mag in einer Twitterliste, wie ich sie rechts habe, OK sein, aber nicht mitten im Blogpost ;-)


Kommentieren

Bitte beachte die Kommentarregeln!

XHTML: Du kannst diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>