ReTweet Button in WordPress einbinden

Das Einbinden des Twitter ReTweet Button ist recht einfach. Twitter stellt auf der Tweet-Button Website einen Konfigurator zur Verfügung.

Wenn man sich mit seinem Twitter-Account eingeloggt hat, werden schon die wichtigsten Felder vorkonfiguriert (Username). Dann kann man die Style des Button auswählen, also vertikal mit Retweet-Anzahl oberhalb, horizontal mit der Anzahl der Tweets rechts vom Button oder ohne Zählung als kleiner Button. So kann man je nach Website-Design den richtigen Button-Style auswählen.

Neben dem Button-Style kann man auch die URL und den Tweet-Text anpassen. Voreinstellung ist jeweils die URL und der Titel der Seite, die getwittert wird. Als vierte Reiter-Option kann man die Sprache des Tweets angeben, z.B. “German” für deutsch.

Quellcode-Vorschau

Im Schritt 2 wird der eigene Twitter-Username angegeben und zusätzlich kann ein weiterer (Partner-)Username und Beschreibung angegeben werden.

In der Vorschau wird die Auswahl direkt angezeigt (Button-Style) und ein Code-Fenster mit dem generiertem HTML-Quellcode.

Folgender Code wird in den Standardeinstellungen mit deutscher Textanzeige erzeugt:

<a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-lang="de"
data-via="TWITTER USERNAME">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>

Tweet-Button Code in WordPress einbinden

Um den Button in WordPress einzufügen, muss das Theme bearbeitet werden. Dazu geht man in seiner WordPress-Admin Oberfläche über Design -> Editor und wählt dann rechts aus der Dateiliste die “single.php”.
In der neuen Standard-Theme “Twenty Ten” von WordPress 3.0 wird der generierte HTML-Code vom Twitter-Button direkt vor dem DIV-Container <div class=”entry-content”> eingefügt.

In älteren Themes, die den DIV-Container nicht haben fügt man den Code vor dem PHP-Snippet <?php the_content( ” ); ?> ein.

Anpassung per CSS

Zusätzlich kann man den Twitter-Code noch in einem DIV-Block packen und rechts im Text floaten.

<div style="float: right; margin-left: 10px;">
... Twitter Code
</div>

Optimalerweise vergibt man eine CSS-Klasse und lagert die CSS-Anweisung in die style.css aus. Abschließend kann man aus Performance-Gründen noch die Script-Anweisung in den Header (oder in den Footer) schieben.

Wer hat den twitter-Button schon erfogreich eingebunden? Schreibt mir ein Kommentar oder ein Tweet an @maddesigns.

Plugin für WordPress

[Update] Für den neuen Twitter-Button gibt es jetzt auch ein erstes Plugin. Jasmina von Onlinelupe hat auch ein schönes Tutorial geschrieben. Thomas von hombertho.de nutzt bei sich den kleinen Twitter-Button.

CSS-Tutorial “Formular Design mit CSS3 – Visuelle Gestaltung und der Verzicht auf Grafiken”

CSS Tutorial Teil 2: “CSS3 Tutorial – Webdesign ohne Grafiken dank CSS Transform”

tt_content.stdWrap {
 innerWrap.cObject {
  # Rahmen 20 überschreiben (csc-frame csc-frame-frame1)
  20.value = <div class="box"><div class="box-inner">|</div></div>
 }
}

ein Element mit einer DIV-Klasse umrahmen und per CSS stylen.

Durch die Einführung der Standard-Klasse “csc-default” in TYPO3 4.3 wird nun jedes Element automatisch gewrappt. Diese Klasse kann man mit folgendermaßen erweitern, um ein anderes Aussehen zuzuweisen:

tt_content.stdWrap {
 innerWrap.cObject {
  default.15.value = csc-default neue-klasse
 }
}

Möchte man neue Rahmen anlegen, die nicht die Standardklasse verwenden, empfehle ich folgende Lösung. Hier wird die CSS-Klasse “csc-default” durch “block” ersetzt und zusätzlich ein DIV-Block mit der Klasse “block-inner” und eine Farb-Klasse eingefügt.

tt_content.stdWrap {
 innerWrap.cObject = CASE
 innerWrap.cObject {
  31 =< tt_content.stdWrap.innerWrap.cObject.default
  31.15.value = block
  31.30.value = ><div class="block-inner blue">|</div></div>
  32 =< tt_content.stdWrap.innerWrap.cObject.default
  32.15.value = block
  32.30.value = ><div class="block-inner green">|</div></div>
  33 =< tt_content.stdWrap.innerWrap.cObject.default
  33.15.value = block
  33.30.value = ><div class="block-inner teaser blue">|</div></div>
  34 =< tt_content.stdWrap.innerWrap.cObject.default
  34.15.value = block
  34.30.value = ><div class="block-inner teaser green">|</div></div>
 }
}

Neue Rahmen hinzufügen (in TYPO3 bekannt machen)

Wenn nicht ein bestehender Rahmen in TYPO3 verwendet werden soll, empfehle ich, die Deaktivierung aller vorhandenen. Folgendes ins Page-TSConfig der Rootseite schreiben:

TCEFORM.tt_content {
 section_frame.removeItems = 1,5,6,10,11,12,20,21
 section_frame.altLabels.0 = Bitte wählen Sie Ihr Layout
}

Jetzt fügen Sie die neuen Rahmen hinzu:

TCEFORM.tt_content {
 section_frame.removeItems = 1,5,6,10,11,12,20,21
 section_frame.altLabels.0 = Bitte wählen Sie Ihr Layout
 section_frame.addItems.31 = Box Blau
 section_frame.addItems.32 = Box Grün
 section_frame.addItems.33 = Box Teaser Blau
 section_frame.addItems.34 = Box Teaser Grün
}

Im TYPO3-Backend sieht das die Auswahlbox für die section_frame dann so aus:

Dieser Artikel ist die Kurzform meines Original-Tutorial aus dem TYPO3-Magazin TY-MA 02. Im Artikel sind auch einige CSS-Tricks beschrieben.
Das TYPO3-PDF-Magazin kann man direkt auf http://ty-ma.de bestellen.

Link zu “CSS Sprite – Ladegeschwindigkeit optimieren und HTTP-Requests verringern“

Hier der Link: http://blog.marit.ag/2010/05/04/teaserboxen-mit-verlauf-ohne-bilder-css3-linear-gradient/

siehe: TYPO3 4.3 im Marit AG Blog

maddesigns überarbeitete den Online-Auftritt zum Thema Scheidung.

apartment-budapest.info