Twitter Folgen Button (Follow) in Website oder Blog einbinden

Ende Mai diesen Jahres hat Twitter den Folgen Button (engl. Follow Button) freigeben. Im heutigen Artikel möchte ich Euch aufzeigen, wie Ihr den Twitter Folgen Button in Euren Blog bzw. Eure Website einbauen könnt. Ein Plugin ist dazu nicht notwendig, da dieser Button auch ganz einfach in die entsprechende Theme Datei mit ein paar Zeilen Code eingefügt werden kann. Damit auch den unterschiedlichen Ansprüchen Rechnung getragen wird, gibt es zwei verschiedene Coding Beispiele für den Follow Button: einmal als Javascript Lösung und einmal via iFrame.

Je nachdem, ob man eingeloggt ist, diesem Twitter Account bereits folgt oder nicht, erscheint der Twitter Folgen Button in zwei verschiedenen Ansichten, mit zwei unterschiedlichen Mouse-Over Texten:

In guter alter Twitter Manier gibt es natürlich auch eine Folge-Button Seite, auf der die möglichen Konfigurationen getroffen werden können und die dann neben einer Vorschau auch den entsprechenden Code mit Javascript ausgibt.

Ich wäre aber nicht ich, wenn ich mich mit dieser Lösung alleine zufrieden geben würde. Denn natürlich kann dieser Button über zwei verschiedene Wege eingebaut und auch unterschiedlich formatiert werden, so dass unterm Strich auch wesentlich mehr Möglichkeiten zur Verfügung stehen, wie in dem oben erwähnten Standard.

So kann zum einen natürlich auch eingestellt werden, ob die Anzahl der Followers im Twitter Folgen Button angezeigt wird, ob der Hintergrund hell (weiß) oder dunkel (schwarz) sein soll, sowie auch die Sprache. Zu diesen Standard Features kommt in der Javascript Version noch die Möglichkeit, die Breite und Ausrichtung zu definieren.

Javascript Twitter Folgen Button

Für die Javascript Lösung des Folgen Button gibt es folgende Konfigurationsmöglichkeiten:

• data-show-count=”true” (Standard) / data-show-count=”false” – für die Anzeige der Anzahl der Follower
• data-button=”blue” (Standard) / data-button=”grey” – für die Anzeige auf weißem Hintergrund oder des auf schwarzem Hintergrund
• data-lang=”de” – um den Text des Twitter Follow Button in deutscher Sprache anzuzeigen
• data-text-color=”#FFFFFF” – hier ist jeder gewünschte HEX Farbcode für die Farbe des Texts möglich (funktioniert mit der neuen Button Version nicht mehr)
• data-link-color=”#00AEFF” – hier ist jeder gewünschte HEX Farbcode für die Farbe des Links möglich (funktioniert mit der neuen Button Version nicht mehr)
• data-width=”300px” / data-width=”200px” – Hier ist jede gewünschte Breite in Pixel oder Prozent für die Breite des Buttons möglich. Für den Folgen Button mit Anzeige der Follower wird die Breite von 300px empfohlen, ohne Anzeige der Follower die Breite von 200px.
• data-align=”left” / data-align=”right” – Die Ausrichtung des Buttons kann wahlweise links oder rechts erfolgen.

Und hier nun der Beispiel Code mit Nutzung aller Features:

<a href="https://twitter.com/officetrend" class="twitter-follow-button" data-show-count="true" data-button="blue" data-width="300px" data-align="right" data-lang="de">@officetrend folgen</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>

Das Ganze würde dann so aussehen:

@officetrend folgen

Wenn Ihr diesen Code für Eure Webseite verwenden wollt, dann braucht Ihr einfach nur zweimal officetrend mit Eurem Twitter Nutzernamen ersetzen und könnt die entsprechenden Einstellungen wie oben beschrieben nach Euren Wünschen anpassen. In der Beschreibung habe ich auch die Standardwerte genannt, wenn diese genutzt werden sollen, dann braucht an dieser Stelle gar nichts eingegeben werden, die entsprechende Formatierung kann einfach weggelassen werden.

IFRAME Twitter Folgen Button

Für den Einbau der IFRAME Lösung des Twitter Follow Button in die Webseite stehen folgende Konfigurationsmöglichkeiten zur Verfügung:

• show_count=true (Standard) / show_count=false – für die Anzeige der Anzahl der Follower
• button=blue (Standard) / button=grey – für die Anzeige des blauen Buttons auf weißem Hintergrund oder des grauen Buttons auf schwarzem Hintergrund
• text_color=FFFFFF – hier ist jeder gewünschte HEX Farbcode für die Farbe des Texts möglich (funktioniert mit der neuen Button Version nicht mehr)
• link_color=00AEFF – hier ist jeder gewünschte HEX Farbcode für die Farbe des Links möglich (funktioniert mit der neuen Button Version nicht mehr)
• lang=de – um den Text des Twitter Follow Button in deutscher Sprache anzuzeigen

Nachfolgend das Code Beispiel für den IFRAME Twitter Follow Button mit allen Features:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=officetrend&show_count=true&button=blue&lang=de" style="width:300px; height:20px;"></iframe>

Das Ganze sieht dann wie folgt aus:

Auch hier braucht Ihr bei der Einbindung nur officetrend mit Eurem Twitter Namen zu ersetzen und die gewünschten Einstellungen wie oben beschrieben treffen. Wichtig ist hier noch, dass die Konfigurationen mit dem &-Zeichen angehängt werden. In HTML sollte das &-Zeichen aber als “& a m p ;” (ohne Anführungszeichen und Leerzeichen) geschrieben werden, was mir leider im Code oben nicht ausgegeben wird, da WordPress dies automatisch umformatiert.

Was passiert wenn auf den Twitter Folgen Button geklickt wird?

Last but not least möchte ich noch kurz auf die Frage was passiert, wenn auf den Twitter Folge Button oder den Link darin geklickt wird, beantworten. Für diejenigen, die nicht bei Twitter eingeloggt sind, geht folgendes Fenster auf:

Ist man dagegen bei Twitter eingeloggt, folgt diesem Account noch nicht, dann geht kein Fenster auf und es findet schlicht und ergreifend ein Auto-Follow statt.