ReTweet-Button als Traffic-Quelle - Fehlerfreier valider Ansatz

ReTweet-Button als Traffic-Quelle - Fehlerfreier valider AnsatzReTweet-Button als Traffic-Quelle - Möglichkeiten Traffic zu generieren sind vielfältig, aber nicht jede dieser Ansätze ist auch zu empfehlen. Ob der Download eines Plugins oder die Implementierung eines Widgets, die Validierung dieser Code-Fragmente sind nicht selten gespickt von unzähligen Fehlern, die mich bisher davon abgehalten haben eines von Ihnen hier zum Einsatz zu bringen. In Ermangelung vorhandener valider Alternativen, wurde hier nun der bereits vorgestellte Retweet Button integriert. Wie ihr dieses Script in wenigen Schritten ohne JavaScript-Kenntnisse für Eure Blogs selbst nutzen könnt und somit durchaus einen signifikanten Traffic-Anstieg verzeichnen könnt, wird im folgenden Beitrag beschrieben.

Implementierung der JavaScript-Datei

Das von jQuery-Entwickler John Resig vor gut einem halben Jahr entwickelte kleine Script für den Retweet Button downloaden und im Dokumentenkopf <head> eurer Webseite integrieren. Es ist kein weiteres Script oder zusätzliche CSS-Dateien zur Gestaltung des Buttons notwendig und auch der "Aufruf des Buttons" lediglich über eine CSS-Klasse kann einfacher kaum sein.

Implementierung von retweet.js
...
<head>
...
<script type="text/javascript" src="http://.../retweet.js"></script>
...
</head>
...

Anlegen / Hinzufügen der CSS-Klasse "retweet"

horizontal ausgerichteter ReTweet-ButtonUm den Easy Retweet Buttons in dem Euch sicherlich bekannten Aussehen "aufzurufen", bedarf es lediglich noch des Hinzufügens der CSS Klasse ".retweet" innerhalb des für diesen Button angelegten Verlinkung und schon seid ihr mit der Implementierung dieser zusätzlichen Traffic-Quelle fertig. Kein Witz!

horizontaler Retweet Button
...
</body>
...
<a class="retweet">Retweet</a>
...
</body>
</html>

vertikal ausgerichteter ReTweet-ButtonWer von Euch diesen Easy Retweet Button nicht wie standardmäßig im Script von John Resig definiert, horizontal ausgerichtet haben möchte sondern die vertikale Darstellung präferiert, der muss nur noch die zusätzliche CSS Klasse ".vert" anlegen. Ihr seht, einfacher geht es wirklich kaum. Neben der Validität von Webseiten, nach der Implementierung des Scriptes, ist diese leicht Modifikation ein großer Pluspunkt, der an dieser Stelle ruhig einmal erwähnt sein sollte.

vertikaler Retweet Button
...
<body>
...
<a class="retweet vert">Retweet</a>
...
</body>
</html>

Und so entsteht der Easy Retweet Button!

Wer jetzt den oben stehenden HTML-Code sieht, fragt sich vielleicht wie lediglich mit einem HTML-Element ( dem Link ), eine solche Darstellung des Buttons erzeugt werden kann? Ganz einfach, dass JavaScript legt neben einem span-Tag, bei einem abgegebenem Tweet zu einem Beitrag zusätzlich auch ein strong-Element an. Der strong-Tag ( Zeile 5 ) "beinhaltet" dann Anzahl der ReTweets, womit diese separat via CSS gestylt werden können.

Link mit bereits 437 erhalten Retweets
...
<body>
...
  <a class="retweet vert">
    <strong class="vert">437 </strong>
    <span class="vert">Retweet</span>
  </a>
...
</body>
</html>

Die Anpassung dieser Elemente könnt ihr in der JavaScript-Datei, innerhalb der folgenden Zeilen, vornehmen.

JavaScript-Code - die Style Information
...
  styling:
  "a.retweet { ... }" +
  "a.retweet span { ... }" +
  "a.vert { ... }" +
  "a.retweet strong.vert { ... }" +
  "a.retweet span.vert { ... }"
...

Easy Retweet Button + Bit.ly Account = Statistics

Die Implementierung dieses Buttons und die damit hoffentlich für Euch anstehende Verbreitung Eurer Blogbeiträge ist zwar schön und gut, aber eine Auswertung dieser Traffic-Daten wäre ein nicht zu vernachlässigender zusätzlicher Pluspunkt für das Script von John.

Bit.ly Account
Ausschnitt der Statistikanalyse des Kurz-URL-Dienstes bit.ly

Daher überrascht es auch nicht, dass John als Anhänger des Kurz-URL-Dienstes bit.ly und der vorhandenen Schnittstellen dieser Anwendung den Nutzern dieses Scriptes einen bit.ly-Account nahe legt. Denn wer einen bit.ly-Account sein Eigen nennt ( das Script funktioniert natürlich auch ohne bit.ly-Account ), kann auf diese statistische Auswertung der Klicks zurückgreifen. Hierzu müssen lediglich folgende kleine Anpassungen im Script vorgenommen werden.

JavaScript-Code
...
// Your Bit.ly Username
bitly_user: "webstandard",
...
// Your Bit.ly API Key, found here: http://bit.ly/account
bitly_key: "Your API Key here!",
...
// Tweet Prefix text
prefix: "RT @webstandard",
...

Neben Account-Namen, der Angabe des API Keys den ihr nach einer Registrierung erhaltet, müss lediglich noch die "Einleitung" ( von John "prefix" genannt ) der Retweets angegeben werden. Dieses Feature solltet ihr nicht außern vor lassen! Denn auch wenn der Link zu Eurem Twitter-Account ( @webstandard ) mit dem Link des (Re)Tweets "konkurriert" habt ihr somit die Möglichkeit zusätzlich Follower zu erhalten!

Browser-Support des "Easy ReTweet Button"

Da nun funktionell soweit hoffentlich alle Fragen geklärt sein sollten, sei an dieser Stelle nur noch einmal kurz erwähnt, dass dieses Skript dessen Vorteile ( siehe "Alternatives" ) auf der Hand liegen vom Internet Explorer 6-8, Opera 9-10, ab Safari 3.2, ab Chrome 2 und ab Firefox Version 3 unterstützt wird.

Fazit: Artikel + Retweet = more Traffic?!

Nicht jeder Retweet führt auch zwangsläufig zu einem Klick auf den oder die integrierten Links, aber die Wahrscheinlichkeit ist wesentlich höher um so mehr Twitter-Mitglieder entsprechende (Re)Tweets über einen Blogbeitrag verbreiten. Und diese Wahrscheinlichkeit ist allein durch die bloße Existenz einer Möglichkeit, wie dem hier vorgestellten Easy Retweet Button, wesentlich höher!

Auch wenn die ersten Tage nach der Implementierung dieses Scriptes, die positive Entwicklung des Traffics belegen, soll nicht unerwähnt bleiben, dass diese Entwicklung natürlich nicht auf jeden Blog beliebig übertragen werden kann. Denn nicht das Script, sondern die Inhalte Eurer Blogbeiträge werden zu einem möglichen Traffic-Anstieg führen.

Ähnliche Artikel zu diesem Thema:
  1. Frank 06 Apr 2010, 14:05

    Ich kannte das Script bereits, aber dank deiner Beschreibung bei der Vorgehensweise dürfte eine Implementierung in meine Seiten auch für mich kein Problem mehr darstellen. Hoffe ich ;o)


  2. Alex 06 Apr 2010, 14:22

    Hallo
    und Danke für eine gute deutsche Anleitung zum Script von John Resig. Was mich an diesem Script stört ist, dass der Bit.ly API Key offen im Quelltext der .js-Datei liegt. Damit könnte theoretisch Links über meinen Account erstellen oder sonstige API-Funktionen nutzen. Oder?
    Greetz
    A.


  3. Webstandard-Team
    06 Apr 2010, 14:51

    @Alex: Nachdem ich bei bit.ly diesbezüglich nicht fündig geworden bin, habe ich soeben eine Mail an John Resig verfasst und hoffe somit bald näher auf die von Dir erwähnte Problematik eingehen zu können.

    Soeben erhaltene Antwort von John Resig auf die oben erwähnte Anfrage: "Unfortunately I don't know of a way to protect the API key, really quite unfortunate. I'd ask the Bit.ly team to see if there's an alternative solution."


  4. Florian Lerch
    06 Apr 2010, 23:40

    Oh ja, da waren ein paar schöne Buttons mit dabei. Da werde ich vielleicht auch mal meinen Button durch so einen ersetzen. Und zu dem API - Key: eigentlich dürfte es doch nicht so schwer sein, ein wenig von dem Code in PHP auszulagern und dann die PHP datei mit Javascript zu öffnen und mit den entsprechenden Parametern zu füttern. Dann bestände keine Möglichkeit mehr, den auszulesen. Oder aber, das Javascript teil ließt die Nummer aus einer extra Datei aus, welche nur mit bestimmten Referrern zugreifbar ist. Die Referrer könnte man nun zwar trotzdem noch versuchen auszulesen und dann zu faken, aber darauf muss man erstmal kommen.


  5. Marion 07 Apr 2010, 09:51

    Bin auch immer wieder erstaunt, wenn ich Blogs von "Fachleuten" besuche die solche fehlerhaften Widgets oder Plugins integriert haben, dass sie zumindest die Fehler nicht beheben (können). Daher finde ich diesen Ansatz, auch aufgrund seiner leichten Modifikationsmöglichkeiten, durchaus gelungen.


  6. Max
    07 Apr 2010, 16:34

    Tolle Anleitung, vielen Dank dafür. Habe es bei mir auch gleich einmal implementiert und es geht wirklich recht einfach von der Hand. Nur das RT: @ hat kurz gedauert, wie das übergeben wird, da ich es über den a href Inhalt übergebe, was bei mir zumindest problemlos funktioniert.


  7. Oliver 09 Apr 2010, 05:52

    Netter Artikel,
    vielen Dank dafür.


  8. Timbob
    09 Apr 2010, 10:23

    Hi, habe das Skript wie beschrieben eingebunden und alles läuft, nur dass er beim Laden zunächst einen Textlink zeigt, der ein paar Sekunden später erst in den retweet-button umgewandelt wird. Siehe http://blog.tim-bormann.de/inoffizielle-anleitung-windows-7-xp-mode.html rechts oben.
    Hast Du eine Idee an was das liegen könnte? Die Antwort von Bit.ly kommt wohl zu spät. Am liebsten würde ich den ganzen Link erst an dieser Stelle anzeigen lassen, wenn die Antwort gekommen ist.
    Ein Tipp?


  9. Webstandard-Team
    09 Apr 2010, 11:15

    @Tim: Das die Anzeige der Ziffer bezüglich der getätigten Retweets ca. 1-2 Sekunden dauert ist normal, dass ist die Verzögerung durch die von dir angesprochene Antwort seitens bit.ly. Das aber Retweet-Text ( der Titel deiner Beiträge ) und nicht wie eigentlich der Linktext "Retweet" angezeigt wird, ist nicht die Ursache dafür. Du hast in dem Script auch noch unterhalb des Bereiche "No Need to Configure Below Here" Anpassungen vorgenommen, nimm diese einmal raus und teste dann ob der "Fehler" immer noch vorhanden ist.


  10. Alex 09 Apr 2010, 13:41

    @Florian:
    > ein wenig von dem Code in PHP auszulagern und dann die PHP datei mit Javascript zu
    > öffnen und mit den entsprechenden Parametern zu füttern

    Kannst Du das bitte genauer erklären?


  11. Timbob 09 Apr 2010, 17:39

    Danke für die Antwort.


  12. Florian 12 Apr 2010, 13:00

    Hm dieser Retweet Button ist eigentlich nicht nur für Blogs denkbar, jede Content Seite sollte einen Retweet button haben.

    Sind wir nicht alle ein bisschen ReTweet?

    Flo


  13. Niko
    24 Apr 2010, 13:31

    Ich liebe solche "Wordpress Hacks".
    Dann spart man sich meist die Installation von Plugins und somit auch Ladezeit.
    Ich versuche auf meinem Blog auch generell alles was möglich ist, ohne Plugins selbstsändig zu realisieren, weils mir spaß macht und aus dem oben genannten Grund.

    Danke dafür!

    Gruß Niko


  14. Gerrit
    27 Apr 2010, 12:53

    Gute Artikel! Werde es mir heute abend anschauen, da ich dafür auch noch eine gute Möglichkeit gesucht habe! Danke!


  15. seppl
    27 Apr 2010, 12:57

    ja warum denn nicht - ich glaub da klickt man eher und schneller drauf weil man ja keine arbeit damit hat..


  16. Alexander 21 Mai 2010, 20:52

    Ich denke, dass nicht nur die Qualität eines Beitrags bzw. die Qualität des ganzen Blogs davon abhängig ist, ob jemand einen "ReTweet" vornimmt oder nicht.

    Vor allem das Thema und die Zielgruppe spielen eine wichtige Rolle, ob Beiträge des eigenen Blogs bei Twitter mehrfach Erwähnung finden.

    Internetseiten mit einem internetaffinen Thema haben in meinen Augen bessere Chancen als Seiten, die dieses Thema überhaupt nicht im Programm haben.

    Sicherlich kann ich mich täuschen, aber dies ist zumindest bis jetzt meine Erfahrung.


  17. Barbara Frolik
    06 Jul 2010, 10:44

    Hallo Heiko, vielen Dank noch einmal für den Tipp. Ich habe den Button heute ausprobiert. Sah soweit gut aus, leider zählt er aber falsch. Die angegebene ReTweet-Zahl war viel zu hoch. Irgendeine Idee, woran das liegen könnte? Jetzt bin ich wieder bei TweetMeme ... der funktioniert aber auch nicht richtig. Ich muss wohl noch einmal über die Bücher.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage