maddesigns » Allgemein

[How to] Twitter’s offiziellen Tweet-Button in WordPress Blogs einbinden

Sven Wolfermann — Fri, 13 Aug 2010 07:34:21 +0000

Twitter hat den offiziellen ReTweet Button veröffentlich und schreibt in der Blog-Meldung dass sie dabei mit den eigentlichen Erfindern des Tweet-Button TweetMeme zusammenarbeiten.

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:

Tweet

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

eingefügt.

In älteren Themes, die den DIV-Container nicht haben fügt man den Code vor dem PHP-Snippet ein.

Anpassung per CSS

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


... Twitter Code

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.

Gastartikel im Webstandards-Blog: “CSS Sprite”

Sven Wolfermann — Wed, 26 May 2010 10:00:41 +0000

Als Gastautor beschreibe ich im Webstandards-Blog die Vorteile von CSS Sprites. Durch das zu zusammenlegen von mehreren Einzelgrafiken zu einer großen lassen sich Ladezeit der Website und HTTP-Requests verringern. Am Beispiel einer Länderauswahl mit Flaggen-Icon erkläre ich die Vorteile in diesem Artikel.

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

Blog-Artikel “CSS3 linear-gradient” Hintergrundverläufe mit CSS

Sven Wolfermann — Tue, 04 May 2010 13:29:40 +0000

Im Marit AG TYPO3 Blog habe ich einen Artikel zum Thema “Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)” geschrieben. Dabei geht es um die Gestaltung von Teaserboxen ohne Bilder, also ausschließlich mit CSS.

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

maddesigns – Sven Wolfermann ist jetzt “Certified TYPO3 Integrator”

Sven Wolfermann — Tue, 26 May 2009 13:00:56 +0000

Am Sonntag, 15.03.09 nahm Sven an der Zertifizierungsrunde zum TYPO3 Integrator in Chemnitz teil. Heute kam aus Zürich das Zertifikat per Post. Seit heut gibt es auch das Banner auf der Website, das auf den ersten Blick signalisieren soll, dass man sich auf die fachgerechte Integration von Webinhalten mit TYPO3 verlassen kann.

Neues FE-Editing von TYPO3 4.3 im Marit AG Blog gezeigt

Sven Wolfermann — Thu, 23 Oct 2008 07:08:03 +0000

Sven von der Marit AG (ehem. TARGET-E) hat das auf der T3CON08 gezeigte Video zum Thema “Frontend-Editing in TYPO3 4.3″ im Marit AG Blog verlinkt.

siehe: TYPO3 4.3 im Marit AG Blog

Online Scheidung Deutschland überarbeitet

Sven Wolfermann — Tue, 14 Oct 2008 20:40:54 +0000

Online Scheidung, schnell und unkompliziert? Auf Online Scheidung Deutschland können Sie Kosten sparen, wenn Sie sich bei der Trennung mit dem Ehe-Partner einig sind.

maddesigns überarbeitete den Online-Auftritt zum Thema Scheidung.

maddesigns wechselt zu Marit AG

Sven Wolfermann — Sat, 01 Mar 2008 16:41:54 +0000

Ab 01. März 2008 wechselt maddesigns in ein festes Angestelltenverhältnis. Marit AG ist eine auf TYPO3 spezialisierte Internet-Agentur und nun auch von Berlin aus tätig.

Apartment in Budapest – Ferienwohnung in Ungarn

Sven Wolfermann — Fri, 01 Feb 2008 18:30:30 +0000

Ein spannendes neues Projekt, das wird es allemal – mehrsprachig mit TYPO3.

apartment-budapest.info

Segue Shop Desgin – Italian Bags, Suitcases and Accessories

Sven Wolfermann — Thu, 10 Jan 2008 18:54:12 +0000

Der Online-Shop von Segue (einen Handtaschen- und Kofferhersteller aus Italien) wurde von Zerogrey programmiert. maddesigns erstellte das Design und die Umsetzung mit CSS.

Once again Zerogrey assigned a design job to maddesigns. We developed the design and the CSS.

shop.segue.it – Borse Valigie Accessori

maddesigns gestaltet für Berliner Agentur

Sven Wolfermann — Tue, 01 Jan 2008 19:04:34 +0000

Seit Ende 2007 gestaltet maddesigns für eine Berliner Agentur Webseiten. Dazu gehört das Design und die Umsetzung mit XHTML & CSS. Hier einige Beispiele:

www.auto-andreas.de, www.kinderarzt-auerbach.de, www.physiotherapie-rienaecker.de, www.bosch-metallbau.de, www.kroll-buw.de