Twitter Fanbox wie Facebook Fanbox

Eine Twitter Fanbox, die wie eine Facebook Fanbox (=LikeBox) aussieht? Die Facebook Fanbox ist sehr verbreitet. Warum nicht auch ein Twitter Fanbox Widget. Bei Twitter hat man meist noch mehr Fans als bei Facebook. Das Facebook-Widget mit den Kontaktbildern und mit der Anzahl der Fans ist ein wahrer Renner. Nun gibt es auch die Möglichkeit den entsprechenden Code für eine Twitter Fanbox zu bekommen. Es werden jeweils die letzten 10 Twitter Follower angezeigt, die dazugekommen sind.

Twitter Fanbox wie Facebook Fanbox – Anleitung

Die Twitter Fanbox besteht aus zwei Bestandteilen:
– Javascript-Datei zur Ablage auf dem Webserver
– Widget-Code zur Einbindung in die Website

Die Einbindung der Fanbox besteht also aus zwei Schritten.
Auch wenn ich hier meistens über WordPress schreibe, kann man diesen Code in jede Website einbinden.

Twitter Fanbox wie Facebook Fanbox – Hochladen der Javascript-Datei

Man erstellt in einem einfachen Editor eine Datei mit dem Namen fanbox_init.js und kopiert den folgenden Javascript-Code dort hinein:

1
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>';}

Danach wird die Datei auf den eigenen Webserver geladen. Für die Einbindung der Fanbox brauchen wir dann den genauen Link der Datei. Z.B. http://www.meinedomain.de/fanbox_init.js

Twitter Fanbox wie Facebook Fanbox – Einbindung in die Website

Zur Einbindung in die Website brauchen wir bei WordPress unter Design-Widget nur ein neues Textwidget in die Sidebar zu ziehen und die folgenden Twitter Fanbox Code dort einzufügen:

1
2
3
4
5
6
7
8
9
10
11
<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>

Nun braucht man nur noch die eigenen Daten bei der Domain und beim Twitternamen einzutragen und man hat seine eigene Twitter Fanbox, die so aussieht wie die Facebook Fanbox.
Das Ergebnis sieht so aus:
Twitter Fanbox wie Facebook Fanbox

Das hier ist die Twitter-Fanbox Live:


(Wenn Sie auf Seiten mit zuviel Traffic läuft, hat sie manchmal Schwächen. Deshalb habe ich Sie nicht mehr auf der Startseite im Widget.)

Wenn Du noch weitere Designs der Twitter Fanbox findest, freue ich mich über einen Kommentar mit Quelle. Ich kann mir das Design durchaus angepasster vorstellen und passe dann auch gern diesen Artikel über die Twitter Fanbox an.

17 Gedanken zu „Twitter Fanbox wie Facebook Fanbox

    1. Chris Andersen

      @Hody
      Ein Teil des Twitter-Box-Codes läuft über einen privaten Server des Code-Programmierers. Der Server performiert nicht immer so gut. MIt Twitter selbst hat das nichts zu tun bzw. nur insofern, dass Twitter selbst nichts bis dato keine entsprechende Fanbox angeboten hatte.
      BG Chris :-)

    2. Chris Andersen

      @Hody
      normalerweise springt das von selbst wieder an. Ja.
      Du brauchst nichts verändern.
      BG Chris :-)

  1. Timm

    Hallo Chris,
    wie mein Kollege schon beschrieben hat, funktioniert das Widget im IE9 nicht. Nur der obere blaue Balken erscheint.

    Warum hast Du die Twitterbox wieder herausgenommen?

    Grüße
    Timm

    Antworten
    1. Chris Andersen

      @Timm
      ich hab die Box rausgenommen, weil der Server vom Betreiber zu oft ausfällt. IE9… jaja der Internet Explorer macht mit neuen Versionen schon Probleme seit es ihn gibt.
      bg Chris :-)

  2. Timm

    Ich habe jetzt alles eingebunden – und es funktioniert aus heiterem Himmel.
    Kann das sein, das der Server so oft ausfällt, das man denkt, das Script geht nicht mehr.
    Mal sehn. Ich werde die Box in der Sidebar lassen. Mal sehen, wann sie nicht mehr zu sehen ist.
    Vielleicht bekommen wir den Code irgendwie, so dass wir unabhängig von ihm sind.
    irgendwie …

    Beste Grüße
    Timm

    Antworten
  3. Timm

    Hallo Chris,
    wie auch immer. Meine Vermutung ist, dass der Code für das Javascript-File für die Twitter-Box geändert werden muss, weil, so hatte ich bisher vermutet, das Script angelehnt an das Scriptfile von Facebook ist.
    Das heißt im Umkehrschluß, dass, wenn sich der Code bei Facebook ändert, auch der Code für die Twitter-Box geändert werden muß.
    So der eine Gedanke.

    Der Zweite bezieht sich auf die neue WordPress-Version. WordPress benötigt nun mindestens PHP in der Version 5.2.4 und MySQL-Version 5.0.15. Kann das ein Anhaltspunkt sein?
    Bisher hatte es funktioniert und meines Eerachtens tritt die Nichtfunktion erst seit WordPress 3.2 auf. Das ist mir nur nicht aufgefallen, weil ich gleichzeitig ein neues Theme installiert und wollte erst später oder gar nicht die Twitter-Box nutzen.

    So. Viel mehr kann ich Moment noch nicht sagen.
    Ich hoffe, das ich Dir etwas helfen konnte, das Problem einzugrenzen bzw. einen kleinen Gedankenstupser geben.

    In diesem Sinne.
    Beste Grüße
    Timm

    Antworten
    1. Chris Andersen

      @Timm
      Schau’ mal… es funktioniert… rechte Sitebar.
      Problem ist hier, dass das JS teilweise auf dem Server des Code-Erstellers liegt. Manchmal ist der flach. Leider gibt er den Code nicht raus, sodass ihn jeder auf seinen eigenen Server legen könnte.
      bg Chris :-)

  4. Timm

    Hallo,
    bei mir funktioniert es auch nicht mehr. Egal auf welchen Browser.
    Hat Facebook den code geändert oder woran kann das liegen?
    Liegt es an der code-Änderung von WordPress 3.2 …
    Ich bin da im Moment ratlos.

    Vielen Dank.
    Beste Grüße
    Timm

    Antworten
    1. Chris Andersen

      Hallo Marcus,
      kann schon sein. IE ist ja immer wieder für Überraschungen gut ;-)
      Schick doch einmal einen Screenshot mit IE9 und Firefox. Dann können wir das vergleichen und ggf. Fehler finden.
      bg Chris :-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>