Twitter-Button für jeden WordPress-Beitrag auf der Startseite

Erstellt von Heox am Mittwoch 18. August 2010

Vor einigen Tagen habe ich gelesen, dass der offizielle Twitter-Button (oder auch Tweet-Button) veröffentlicht wurde. Ich fand das sehr interessant und wollte ihn auch hier in diesem Blog einbauen. Da es mittlerweile auch einige WordPress-Plugins gibt, die den neuen Twitter -Button unterstützen, lag eigentlich nichts näher, als diese Plugins mal auszuprobieren. Ich hatte dann aber doch keine Lust, ein Plugin nach dem anderen zu installieren und zu testen, um dann festzustellen, dass der Button doch nicht genau da eingebaut wird, wo ich es möchte oder das es irgendwelche anderen Probleme gibt. Also habe ich mich entschlossen, den Twitter-Button selbst einzubauen.

Dazu habe ich mir erstmal einen Twitter-Button auf der offiziellen Seite zusammengebastelt und den angebotenen Code  eingebaut. Der Standardbutton funktoniert aber so, dass immer die URL getwittert wird, auf deren Seite sich der Button befindet. Das fand ich recht ungünstig, da ich bereits auf der Startseite jedem einzelnen Beitrag einen Button geben wollte und es sollte dann natürlich die zum Beitrag gehörende URL getwittert werden. Nach kurzem Suchen habe ich auf der Twitter-Entwicklerseite für den Button die passenden Möglichkeiten gefunden.

Hier nun mein Vorgehen:
Auf der Tweet-Button-Seite den gewünschten Button zusammenstellen. Es wird dann ein Code in etwa wie dieser erzeugt:

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

Je nach genutzten Einstellungen hat man auch schon einige zusätzliche Parameter entdeckt oder man hat sie in der Entwicklerdoku gefunden. Für mein Vorhaben sind die Parameter data-url und data-text wichtig. Diese müssen dem Code hinzugefügt und mit Inhalt gefüllt werden. Der Parameter data-url ist die URL, die gezwitschert werden soll und data-text – Ihr ahnt es – der entsprechende Text dazu. Für mich kamen dafür nur die WP-Template-Tags the_permalink und the_title in Frage. Also werden diese mit den Parametern und ein paar php-Tags in den Code eingefügt, was dann in etwa so aussieht:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Heox_net" data-lang="de" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Diesen Code baut man dann in die index.php des genutzen WP-Themes an der gewünschten Stelle ein und siehe da, es gibt für jeden Beitrag auf der Startseite einen Twitter-Button, der auch die jeweilige URL und den Beitragstitel twittert.

Kommentar schreiben

XHTML: Sie können diese Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>