Validen Retweet-Button einbauen

In vielen Blogs sehe ich heutzutage einen Retweet-Button. Damit kann ich einen Artikel / Blogbeitrag, den ich gut finde, bei Twitter mit einem Tweet empfehlen (Retweet).

Erschreckend finde ich, dass viele WordPress-Plugins für einen solchen Retweet-Button keinen validen Code erzeugen.

So störte mich beispielsweise an dem beliebten WordPress-Plugin TweetMeme, dass der Button mit einem iFrame erzeugt wird. Da ich hier als Doctype XHTML 1.0 Strict einsetze, kam das Plugin schon mal überhaupt nicht in Betracht. Aber auch der JavaScript-Code von TweetMeme zum manuellen Einbau in eine Webseite erzeugt einen iFrame. Da kann ein Button für mich noch so toll (trendy) aussehen, das ist für mich ein absoluter Ausschlussgrund (No Go).

Auch versuchte ich mich an dem Tutorial „ReTweet-Button als Traffic-Quelle – Fehlerfreier valider Ansatz„, das auf dem englischsprachigen Tutorial „Easy Retweet Button“ von John Resig und seinem zugehörigen JavaScript basiert. Das funktionierte in meinem Testblog zwar grundsätzlich, aber ich hatte folgende Probleme damit:

  • Ich konnte es nicht optimal positionieren und
  • bei deaktiviertem JavaScript kam es zu unschönen Darstellungsproblemen.

Viel versprechend sah dagegen das WordPress-Plugin Topsy Retweet Button aus. Darauf war ich durch die Blogbeiträge „Topsy Button versus Tweetmeme Button“ von Ann Smarty (englischsprachig) und „Twitter mit dem eigenen Blog verknüpfen – Topsy oder Tweetmeme“ sowie „Retweet Buttons in WordPress: Der Tweetmeme Button ist wieder zurück“ von Thomas Homberger aufmerksam geworden.

Der damit erstellte Code war valide. Ich vermisste lediglich die Möglichkeiten den Button in der rechten Spalte (Sidebar) positionieren zu können. Erfreulicherweise gibt es wie bei TweetMeme auch von Topsy eine Anleitung für den manuellen Einbau des Retweet-Buttons auf einer Website. Ergänzend zu dieser englischsprachigen Anleitung „Topsy Retweet Button for Web Sites“ hier die Code-Schnippsel, die ich auf Webseiten-Infos.de eingebaut habe:

  1. Da ich den Retweet-Button nur bei den Blogbeiträgen (single.php) angezeigt haben will, brauche ich auch nur dort den Code. Deshalb setze ich den entsprechenden Conditional Tag von WordPress im Kopfbereich, d.h. zwischen head und /head ein:
    1
    2
    3
    <?php if(is_single()){?>
    <script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>
    <?php } ?>
  2. Den Code zur Platzierung des Retweet-Buttons platzierte ich an der von mir gewünschten Stelle in der rechten Spalte (Sidebar). Damit es auch bei einer kleinen Bildschirmdarstellung von 800 Pixel (px) keine Platzprobleme gibt, habe ich den Container (div) mit dem JavaScript-Code unterhalb des Twitter-Vögelchens eingefügt. Anschließend verschob ich den Retweet-Button mit einem negativen margin-top nach oben. Solltest Du die Sidebar (sidebar.php) nicht nur für die Blogbeiträge (single.php) verwenden, dann empfehle ich Dir auch hier den oben angeführten Conditional Tag einzusetzen. Damit es zu keinem Validierungsfehler kommt, beendete ich die oberhalb noch offene Liste (/ul) und unterhalb öffnete ich wieder eine Liste (ul). Der bei mir eingesetzte Code sieht wie folgt aus:
    1
    2
    3
    <div class="topsy_widget_data transparenz" title="Webseite bei Twitter empfehlen (Retweet)">
    <script type="text/javascript">topsyWidgetPreload({ "url": "<?php the_permalink() ?>", "title": "<?php the_title(); ?>", "theme": "jade", "nick": "WebseitenInfos" }); topsy_tweet_text = "Tweet"; topsy_retweet_text ="Retweet"; topsy_style = "big"; topsy_streaming = "on"; </script>
    </div>
  3. Dem aufmerksamen Leser dürften folgende Änderungen gegenüber dem Originalskript von Topsy auffallen:
    1. Die zusätzliche CSS-Klasse transparenz. Sie verhindert, dass die grüne Hintergrundfarbe bei Links erscheint, wenn Du mit dem Mauszeiger über dem Retweet-Button bist.
    2. Die Ergänzung des Containers (div) um das title-Attribut. Dadurch wird die Kurzinfo (der Tooltip) „Webseite bei Twitter empfehlen (Retweet)“ angezeigt, wenn Du mit dem Mauszeiger über dem Retweet-Button bist.
    3. Die Ergänzung des JavaScript-Codes um folgende Variablen: topsy_tweet_text = „Tweet“; topsy_retweet_text = „Retweet„; topsy_style = „big“; topsy_streaming = „on“;. topsy_tweet_text = „Tweet“ sollte den Text Tweet im Retweet-Button mit einem großen T schreiben. Tut es aber nicht. Warum weiß ich leider nicht. Vielleicht hat je einer der Leser hier eine Antwort oder gar Lösung dafür. topsy_retweet_text = „Retweet“ soll dafür sorgen, dass der Anfangsbuchstabe R im Retweet groß geschrieben wird und das funktioniert. topsy_style = „big“ sorgt dafür, dass der große Retweet-Button angezeigt wird. Und topsy_streaming = „on“ soll für ein automatisches Aktualisieren der Retweet-Zahl sorgen, wenn sich diese erhöht.
  4. Kommen wir zum entfernten InlineCSS. Das habe ich abgewandelt und in die CSS-Datei des von mir hier eingesetzten WordPress-Theme YAML Green integriert. Dort steht jetzt bei mir am Ende zusätzlich:
    1
    2
    3
    4
    .topsy_widget_data {
    float: right;
    margin-top: -6.2em;
    }

Ergänzend noch folgende Hinweise:

  • Das manuelle Topsy-Javascript ist gegenüber dem Code für das WordPress-Plugin bereits aktualisiert und verbessert worden.
  • Das manuelle Javascript wird von einem Topsy-Server bereit gestellt. Insoweit besteht eine Abhängigkeit von einem externen Server.
  • Allerdings scheint sich die Webseite auch bei Störungen oder Verzögerungen des Topsy-Servers ohne Probleme aufzubauen. Lediglich die Anzahl der Retweets verzögert sich dann oder fehlt ganz.
  • Im Gegensatz zu den Lösungen von TweetMeme und John Resig benötigst Du hier keine Anmeldung bei einem anderen Webdienst (TweetMeme, bit.ly etc), damit die Retweets gezählt werden.

Sollten noch Fragen zu diesem manuellen Einbau des Retweet-Buttons bestehen, versuche ich diese gerne zu beantworten.

Nutze einfach die Kommentarfunktion.

7 Kommentare

  1. 1. Fritz

    Kommentar vom 7. Juni 2010 um 00:57

    und wo isser nu (der Button)?

  2. 2. Dieter

    Kommentar vom 7. Juni 2010 um 05:23

    @Fritz
    Bei mir (PC als auch Smartphone) erscheint der Retweet-Button rechts neben dem blauen Twitter-Vögelchen in der rechten Spalte (Sidebar). Bei Dir nicht?

    Dann solltest Du mal JavaScript zulassen. :lachtot:

  3. 3. Kimi

    Kommentar vom 18. Juni 2010 um 16:55

    Sehr interessanter Artikel, ich werde es probieren, danke :)

    Aber nicht heute, morgen komme ich wieder :)

  4. 4. Dieter

    Kommentar vom 18. Juni 2010 um 23:07

    @Kimi
    Zum Ausprobieren verwende ich inzwischen immer meine Testinstallation. Dadurch kann ich in Ruhe alles Einbauen. Wenn es dann klappt übernehme ich es für die im Betrieb befindliche WordPress-Installation.

    Freue mich, wenn Du wieder kommst. ;-)

  5. 5. Kimi

    Kommentar vom 19. Juni 2010 um 10:02

    Ja, ich probiere auch immer alles lokal im WordPress Blog aus :)

  6. 6. Dieter

    Kommentar vom 19. Juni 2010 um 10:27

    @Kimi
    Ich habe inzwischen lokal und auf dem Webspace ein Testblog.

    Grund: Manche WordPress-Plugins funktionieren lokal nicht und um die Kompatibilität mit einer neuen WordPress-Version testen zu können, muss ich das dann auf dem Webspace machen.

  7. 7. Kimi

    Kommentar vom 20. Juni 2010 um 20:21

    @Dieter, ich hab das gemerkt wegen der robots.txt. Ich probiere lokal und auch WordPress im Free Webhosting.

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben

 

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen