Twitter Button über Api-Call ohne Javascript oder iFrame

Standartmäßig wird der Twitter Button über Javascript eingebunden, alternativ gibt es die Möglichkeit ohne Javascript den Button über ein iFrame in Webseiten einzubinden. Aber auch das geht nicht ohne extra Ladezeit zu generieren. Hat man z.B. auf der Startseite die letzten 5 bis 10 Artikel und möchte auch dort schon zu jedem Artikel den Twitter Button anzeigen lassen, wird für jeden Button jeweils einmal eine komplette HTML-Seite geladen. Denn ein iFrame ist nichts anderes als eine Webseite in einer Webseite. Man kann also auch sagen, dass über eine solche Startseite nicht nur die eine eigene angezeigt wird, sondern gleich mal elf an der Zahl. Eigentlich eine ganz schlechte Wahl.

Über folgenden Tweet von Macx bin ich darauf aufmerksam geworden, dass das auch noch anders geht.

Gesucht, gefunden! Nicolas Gallagher beschreibt in seinem Blog wie man es macht. Aus Zeitmangel von mir leider noch ungetestet, klingt aber vielversprechend.
Custom Tweet Button for WordPress

How to create a custom Tweet Button for WordPress using the bit.ly and Twitter APIs. The HTML and CSS is completely customisable and there is no need for JavaScript. PHP is used to automatically shorten and cache the URL of a post, fetch and cache the number of retweets, and populate the query string parameters in the link to Twitter.

Auf den Workflow kommt es an – getwitterte Links in Delicous speichern

Das „Netz“ wird immer größer, immer mehr Menschen nutzen Twitter, Facebook und Blogs um miteinander zu kommunizieren. Je mehr Kontakte wir haben, desto schneller aktualisiert sich unser Informationsstream. Da unser Aufnahmevermögen allerdings nicht mitwächst, kann es da schnell passieren, dass man sich in der Informationsflut treiben läßt und irgendwann merkt, dass man eigentlich sehr viel Zeit dafür einsetzt seine Tweets wie einen Heuhaufen nach einem Link durchsuchen, anstatt mit den Informationen effektiv zu arbeiten.

Das schreit nach einem Workflow und just hier ist er. Wir verbinden unseren Twitterstream mit Delicious, einem Dienst um effektiv Bookmarks, also Links, zu verwalten. Immer wenn einer meiner Tweets einen Link beinhaltet, werden diese Links in Delicious gespeichert. Sind noch Hashtags vorhanden, werden diese zu Delicious-Tags. Suche ich dann später einen bestimmten Link, finde ich den dann schneller, entweder über die Suche oder gleich über die Tags.

Sergej Müller hat genau für diesen Fall ein Script entwickelt und es in seinem Blog zu Verfügung gestellt. Wer nicht mit Scripten rumhantieren möchte, nutzt packrati.us und verbindet seinen Twitter Acount mit Delicious. Was der Webdienst packrati.us dem Script von Sergej über hat, ist das Bookmarken von gefavten Tweets. Das ist extrem nützlich, da es praktisch das Bookmarken mit einem Klick realisiert.

Den offiziellen Tweet Button in WordPress Archiv und Index Seiten

Gerade habe ich mir die erste Folge Technikload angeschaut und mir dadurch mal den neuen offiziellen Tweet Button zu Gemüte geführt. Das ganze ist wirklich ein Kinderspiel und kann in der single.php einfach an gewünschter Stelle reinkopiert werden. Für Archivseiten wie auch für die index.php oder home.php braucht es eine kleine Änderung, damit die richtige URL und der richtige Text vom Twitter Button benutzt wird.

Hier zunächst die Zeile „Code“ wie man sie direkt unter http://twitter.com/goodies/tweetbutton generieren kann:


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

Beim Generieren des Buttons gibt es auch die Möglichkeit weitere Attribute zu ergänzen, so z.B. data-url für eine eigene URL – also worauf der Tweet linken soll – und data-text für einen eigenen Tweet-Text. Werden diese Attribute nicht gesetzt, liest das Tweet-Button-Script diese Daten direkt von der Seite, was ja bei der Startseite (in der Regel die index.php oder home.php) einfach die Website URL und nicht der Beitrags-Permalink ist. Gleiches gilt für den Tweet-Text.

Innerhalb des WordPress Loops ist die Lösung natürlich ein Kinderspiel.
data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>"

Mein Sonderfall auf dieser Seite:
Da ich den Titel mit meiner beschriebenen Funktion um ein paar HTML Tags erweitere, funktioniert die Übergabe der des Titels nicht einfach so. Hier meine Quick and Dirty Lösung, um die HTML Tags einfach wieder rauszufiltern:
data-text="<?php echo htmlentities(get_the_title()); ?>"

Update:
Sergej hat in seinem Blog eine Variante gepostet, die anstatt dem Javascript den Button direkt in ein <iframe> einbindet. Das Javascript welches im Endeffekt ebenfalls den Button in einem <iframe> darstellt, entfällt.

Twitter Updates werden jetzt auch auf der koffeinbetriebenes.net angezeigt

Für Updates aus den Bereich Webentwicklung und -design nutze ich bei Twitter den Account @WPandME (mein Hauptaccount lautet @Steffenster und behandelt hauptsächlich Kultur und Web 2.0). In der Seitenleiste hier im Blog werden jetzt die letzten fünf Tweets angezeigt.