Wenn Du meine Seite besuchst, so ist Dir sicherlich schon aufgefallen, das sich in der Sidebar etwas geändert hat. Das, was bei Facebook die Like-Box ist, habe ich technisch übernommen und als Twitter Fanbox integriert. Wie auch bei Facebook werden hier nun die derzeitigen Follower angezeigt und ein Link mit der Bitte Timm‘s NetzBlogging auf Twitter folgen zu wollen. Auf die Idee, dies auch auf meinen Blog zu übernehmen brachte mich Chris mit seinem Beitrag. Beim Surfen auf seiner Seite war ich immer verwundert über diese zusätzliche Box in der Sidebar, die wie eine Facebook-Fanbox aussieht aber für Twitter-Follower genutzt wird. So etwas wollte ich auch haben. Nur wie funktioniert es?

Erwartungen

Das Facebook-Widget mit den Kontaktbildern sowie die Anzeige der Anzahl der Fans wird bereits auf vielen Weblogs verwendet. Damit ich diese Fanbox auch auf Timm‘s NetzBlogging verwenden kann, bedarf es einer Bereinigung des Codes, damit dieser auch valide ist. Nun verwende ich diese Facebook Like-Box auch und erhoffe mir durch diesen Blickfang neue, wiederkehrende Besucher für Timm‘s NetzBlogging und bekäme damit SEO-technisch einen positiven Effekt. Zudem weckt es die Neugier meiner Besucher, die wissen möchten, wie andere Menschen Timm‘s NetzBlogging finden. Und je mehr Leser meine Website gefällt, desto wahrscheinlicher ist es, dass der neue Besucher ebenfalls öfters wieder vorbeischaut. Soweit die Theorie.

Wie erstelle ich die Twitter Fanbox?

Bei der Twitter Fanbox werden jeweils die letzten 10 Twitter Follower angezeigt, die dazugekommen sind. Voraussetzung sind zwei Bestandteile:

1. Javascript-Datei zur Ablage auf dem Webserver
2. Widget-Code zur Einbindung in die Website

Die Einbindung besteht aus zwei Schritten.

1. Schritt: Erstellen und Hochladen der JavaScript Datei

Mit einem reinen Texteditor Deiner Wahl, wie z.B. Notepad, Notepad+ oder UltraEdit (kein Word oder Writer!), erstellst Du eine Datei mit den Namen fanbox_init.js und kopierst folgenden Javascript-Code in die eben erstellte Datei:

function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://moopz.com/connect.php?user='+screen_name+'" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';}

Nach dem Abspeichern lädst du die Datei auf den eigenen Webserver, am besten über ein FTP-Programm (z.B. »FileZilla«). Damit die Twitter Fanbox eingebunden werden kann, brauchst Du nun die genaue Linkadresse der Datei. Z.B. http://www.meinedomain.de/fanbox_init.js.

2. Schritt: Einbindung in die Website

Zur Einbindung in Deine Website brauchst Du nur ein Text-Widget, welches standardmäßig in der WordPressinstallation vorhanden ist, in die Sidebar zu ziehen und den folgenden Twitter Fanbox Code dort einzufügen:

<div class="textwidget">
<script type="text/javascript" src="http://www.meindomainname.de/fanbox_init.js"></script>
<div id="twitterfanbox">
<script type="text/javascript">fanbox_init("MeinTwitterName");</script></div>
</div>

<style>
.FB_SERVER_IFRAME {
width: 300px !important;
height: 250px !important;
}
</style>

Wichtige Änderungen vor dem Abspeichern des Widgets!

1. in der 2. Zeile Deine Domain eintragen
2. in der 4. Zeile Deine Twitter-ID eintragen (bei mir in diesem Fall ‚netzblogging‘)
3. Die Widgetgröße in Zeile 9 und 10 anpassen.

Wenn Du die Größe der Twitter Fanbox geändert hast, so solltest Du diese Änderungen auch in Deiner erstellten und hochgeladenen Datei ‚fanbox_init.js‘ übernehmen, ansonsten sieht die Twitter Fanbox etwas schräg aus.

Twitter Fanbox

Jetzt zum Abschluss das Widget abspeichern und wenn alles gut gegangen ist, dann könnte Deine Twitter Fanbox so ähnlich aussehen. :)

Eigentlich gar nicht so schwer, oder? Natürlich kann die Twitter Fanbox anhand von Cascading Stylesheets (CSS) visuell angepasst werden. Zudem kann diese Twitter Fanbox nicht nur auf WordPress angewendet werden, sondern auch andere CMS-Systeme. Die Idee an sich ist nicht neu und wurde schon auf Moopz vorgestellt und bei WordPress als Plug-In veröffentlicht. Doch weder den Code noch das Plug-In konnte ich bisher finden. Deshalb nochmals ein besonderes Dankeschön an Chris.
Und was hältst Du von dieser Twitter Fanbox? Deine Meinung interessiert mich sehr und vergesse nicht:

Follow me…

:) :) :)

Nachtrag zu Facebook-Fanbox nutzen als Twitter-Fanbox

Ich habe den folgenden Codeteil:

<style>
.FB_SERVER_IFRAME {
width: 300px !important;
height: 250px !important;
}
</style>

aus dem Textwidget entfernt, weil im Internet Explorer ein zusätzlicher Raum in Größe der festgelegten Größe ohne Inhalt dargestellt wurde.
Nach der Entfernung wird in den jeweiligen Browsern alles korrekt dargestellt. :)