Twitter-Vogel-Icon
Seit geraumer Zeit schon lassen sich Tweets direkt ins Blog integrieren. Twitter bietet hierzu selbst einen Embed-Code an. Der Charme der eingebetteten Tweets: Alle enthaltenen Links bleiben klickbar; Leser können dem zitierten Twitterati direkt folgen und den Tweet noch aus dem Blog heraus beantworten, retweeten oder favorisieren (wenn sie eingeloggt sind). Was mich dabei aber immer gestört hat: Die Tweets werden von Haus aus linksbündig angezeigt - und nicht schön zentriert. Aber warum hässlich, wenn es auch in hübsch geht?!

Blog-Tipp: Embeded Tweets ganz leicht zentrieren

Wer (wie ich) versucht, die eingebundenen Tweets mit normalem HTML in seinem Blog zu zentrieren... viel Spaß! Das Ergebnis sieht entweder ziemlich bescheiden aus, funktioniert gar nicht oder führt einen geradewegs in die Coder-Hölle. Muss ja nicht sein. Also habe ich ein wenig recherchiert - und bin schließlich fündig geworden, hier. Tatsächlich gibt es einen ganz einfachen Befehl dafür, den man nur in den Embed-Code integrieren muss. Klasse - wenn man den ganz einfachen Code kennt...

Doch der Reihe nach.

Tweets im Blog einbinden

Vielleicht fragen Sie sich gerade: Wovon spricht der Typ nur? Ich weiß noch nicht einmal, wie sich ein Tweet überhaupt einbinden lässt. Kein Problem: Gehen Sie einfach auf die Timeline von der Person, die Sie zitieren wollen oder nutzen Sie die Twitter Suche, falls Sie mehrere Tweets zu einem bestimmten Thema oder #Hashtag anzeigen wollen. Bei dem zu zitierenden Tweet klicken Sie dann rechts unten auf den "*** Mehr"-Button. Es öffnet sich ein Menü, das Ihnen anbietet, den Tweet einzubetten:

Tweets-zentrieren-01

Wenn Sie darauf klicken, öffnet sich ein weiteres Fenster. Der Tweet wird noch mal angezeigt (so wie er später im Blog erscheint) und dazu gibt es im oberen Feld einen Code der mit <blockquote>... beginnt. Den kopieren Sie vollständig und bauen ihn in Ihr Blog ein. Fertig.

Tweets-zentrieren-02

Der Code dazu müsste dann beispielsweise so aussehen:

Beispiel

<blockquote class="twitter-tweet" lang="de"><p>Versteckte Jobbotschaften: So entschlüsseln Sie Stellenangebote <a href="http://t.co/qToH581PIs" title="http://bit.ly/Zyv6yO">bit.ly/Zyv6yO</a></p>— Jochen Mai (@karrierebibel) <a href="https://twitter.com/karrierebibel/status/311012803882405888">11. März 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Und das Ergebnis so:

So zentrieren Sie eingebettete Tweets

Nicht schlecht, aber eben linksbündig. Und mit ziemlich viel Luft dazwischen. Aber es geht eben auch anders. Und der Schlüssel dazu lautet:

tw-align-center

Diese simple Befehlszeile müssen Sie lediglich oben gleich nach dem blockquote integrieren. Dort lautet der Befehl im Twitter-Original:

<blockquote class="twitter-tweet" ...

Doch Sie machen daraus:

<blockquote class="twitter-tweet tw-align-center" ...

Ganz wichtig ist dabei, das Leerzeichen zwischen -tweet und tw-align... nicht zu vergessen. Der fertige Code sieht dann so aus:

Beispiel

<blockquote class="twitter-tweet tw-align-center" lang="de"><p>Versteckte Jobbotschaften: So entschlüsseln Sie Stellenangebote <a href="http://t.co/qToH581PIs" title="http://bit.ly/Zyv6yO">bit.ly/Zyv6yO</a></p>— Jochen Mai (@karrierebibel) <a href="https://twitter.com/karrierebibel/status/311012803882405888">11. März 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Und das Ergebnis eines zentrierten Tweets so:

Kleine Zeile, große Wirkung. Und ganz einfach. Jedenfalls wenn man weiß, wie es geht.

[Bildnachweis: Jochen Mai, Twitter]