Immer mehr Blogs bieten sogenannte Retweet Buttons an, wie etwa Gordon Breuer. Gordon verwendet z.B. einen Button von TweetMeme.
Da ich eigentlich fast immer Pingbacks von Topsy erhalte, habe ich mir Topsy einmal genauer angesehen. Auf der Widget Seite von Topsy werden eigentlich nur zwei Retweet Buttons angeboten.

  • Topsy Retweet Button für Wordpress
  • Topsy Retweet Button für Web Sites

Für mich waren beide nicht zu gebrauchen. Der Topsy Retweet Button für Web Sites, stellt lediglich ein Verknüpfung zu einem Javascript auf Topsy.com dar. Dieses Javascript injiziert zur Laufzeit den Retweet Button und stellt die Verknüpfungen zum CSS auf dem Webserver von Topsy her. Das ist bestimmt eine einfache Lösung, ich halte jedoch nichts von fremd injiziertem HTML in das DOM meiner Seiten. Doch das muss jeder für sich selbst entscheiden.

In der Vorarbeit zur Blogengine.NET Erweiterung stellte ich erfreut fest, dass sowohl Topsy als auch TinyURL eine API anbieten und Topsy problemlos mit verkürzten URLs statt der langen Artikel-URLs umgehen kann.

In der Konfiguration der Erweiterungen eines Blog, können die verschiedenen Optionen der Topsy Retweet Button Erweiterung eingestellt werden.

Topsy Retweet Button Config

Der, im Screenshot rot markierte, Wert Topsy Nick, sollte unbedingt mit dem Twitternamen belegt werden, unter dem die Retweets erfolgen sollen.
Mit Button Position kann festgelegt werden, ob der Retweet Button vor oder nach dem Inhalt des jeweiligen Artikel eingefügt werden soll.
Wenn Use TinyURL angehakt wird, wird die jeweilige URL eines Post in eine TinyURL übersetzt.

Hier nun das erzeugte HTML mit den im Screenshot gezeigten Einstellungen.

<div class="topsybutton">
	<a class="topsy-total" href="http://topsy.com/tb/tinyurl.com/y8o36se" title="Twitter Trackbacks zu diesem Artikel" rel="tb nofollow">
		<span class="topsy-count">
			<span class="topsy-num">3</span>
			<span class="topsy-unit">tweets</span>
		</span>
	</a>
	<a class="topsy-retweet" href="http://button.topsy.com/retweet?nick=klaus_b0&amp;url=http://tinyurl.com/y8o36se" title="retweet diesen Artikel" rel="rt nofollow">
		retweet
	</a>
</div>

Wie im obigen Listing ersichtlich, wird jedes Element in einem eigenen Container dargestellt, der jeweils mit einer eigenen CSS-Klasse versehen ist. Somit dürften für das Styling keine Wünsche offen bleiben.

Wer Interesse hat, kann sich die Erweiterung mit dem folgenden Link herunterladen. Im Archiv ist auch eine CSS-Datei als Beispiel für das Styling der verschiedenen Elemente enthalten.

TopsyButton.zip

Feedback und Kritik ist wie immer ausdrücklich erwünscht.

Technorati-Tags:  |  |  | 
Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitte "kicken" sie ihn.
kick it on dotnet-kicks.de