Howto: Facebook Fanbox/Likebox anpassen und stylen

Facebook ist genau wie Twitter momentan in aller Munde und kaum jemand kann sich dem Hype um ein über 50 Mrd Dollar schweres Social Network entziehen. Facebook-Seiten werden immer populärer und immer mehr Unternehmen, Organisationen, aber auch Privatpersonen legen sich eine eigene Seite (eine Fanpage) im Facebook-Netzwerk an.

In vielen Webseiten, Shops und Blogs findet sich derzeit die sogenannte „Like-Box“, die eine Auswahl der aktuellen Follower zeigt und dem Besucher mittels des „Like-Buttons“ alias „gefällt mir“ die Möglichkeit gibt, dem Betreiber auf Facebook zu folgen.

wpSEO, das Plugin für WordPress SEO

Die einfache Variante: Facebook Like-Box

Facebook gibt auf developers.facebook.com/docs/reference/plugins/like-box die einfache Möglichkeit, solch eine Box zu gestalten und einen Code auszugeben, der in die eigene Webseite integriert werden kann.

Leider hören die Möglichkeiten der Anpassung des Erscheinungsbildes der Box bei der Eingabe der Breite und Auswahl zwischen hellem und dunklem „Scheme“ dann aber auch fast schon auf. So fügen sich die Boxen oft leider nur sehr schlecht in das Erscheinungsbild der Webseite ein. Leider ist es (ich lasse mich gern eines besseren belehren) nicht möglich, diese Box mittels CSS zu stylen.

Alternativ gibt es dafür noch eine etwas aufwändigere Methode, die dafür aber den Möglichkeiten der Anpassung mittels CSS (ich setze einfach mal voraus, daß die nötigen Kenntnisse vorhanden sind, sofern bis hier gelesen wird) kaum Grenzen setzt:

Die CSS-fähige Facebook Fan-Box

Dafür nutzen wir statt des von der ersten Variante verwendeten fb:likebox Codes den älteren, aber immernoch unterstützten fb:fan Code, welcher die Einbindung eines eigenen CSS ermöglicht.

Der dafür nötige Code anhand des Beispiels der hier im Blog mittels Sidebar-Widget verwendeten Box:

1
2
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>
<fb:fan height="300px;" width="210px;" logobar="false" stream="false" connections="12" css="http://deinewebseite.de/facebook-fanbox.css?1295295141" profile_id="123456789012345" class="fb_iframe_widget "></fb:fan>

Selbstverständlich muss der Code an die eigene Fanpage und das gewünschte Erscheinungsbild angepasst werden.

Eine Erläuterung der verwendeten Attribute:

  • profile_id – die ID der jeweiligen Facebook Fanseite. Sie ist am einfachsten zu finden, indem man sich in Facebook die URL im Punkt „Seite bearbeiten“ genauer ansieht.
  • connections – die Anzahl der darzustellenden Fans
  • width – die Breite der Box in Pixeln
  • height – die Höhe der Box in Pixeln
  • stream – true oder false, bindet den Stream mit den aktuellen Einträgen der Pinwand ein
  • logobar – true oder false, blendet den blauen facebook-Schriftzug über der Box ein oder aus
  • css – das von mir zur Anpassung des Erscheinungsbild erstellte CSS File. Achtung: Facebook cached diese Datei – daher, nach jeder Bearbeitung der Datei eine andere Nummer (Beispiel: ?10) an den Aufruf anhängen! Anonsten werden Änderungen nicht angezeigt.

Nun kann das oben erwähnte CSS File erstellt werden und damit das Aussehen der Box angepasst werden. So habe ich hier im Blog unter Anderem z.B sämtliche Hintergrundfarben und Rahmen entfernt, Abstände verändert und die Schriftfarben dem Stil der Webseite angepasst.

Das folgende CSS muss natürlich auch wieder den eigenen Bedürfnissen angepasst werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a,
.fan_box .connect_action a,
.fan_box .connections_grid .grid_item .name {
color:#fff !important;
}
.fan_box .full_widget,
.fan_box .full_widget .connect_top,
.fbConnectWidgetTopmost,
.fan_box .full_widget .connect_top {
background: none;
border:none;
color:#fff;
}
.fan_box .connect_top {
padding: 10px 0 0 0;
}
.fan_box .connect_widget .connect_widget_text a {
text-decoration:underline;
font-weight:bold;
}
.fan_box .connections {
border: none !important;
min-height: 150px;
padding: 10px 0 4px 0px;
}
.fan_box .connections_grid .grid_item {
padding: 0 2px 8px 0;
}

Schon sieht die Fanbox weitaus ansprechender aus:

Dieser Beitrag wurde unter webdesign abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

67 Antworten auf Howto: Facebook Fanbox/Likebox anpassen und stylen

  1. Holla Kai,

    Ich habe das gerade mal bei mir ein wenig getestet. Klappt ganz hervorragend. Und ich habe festgestellt, das Ding lädt auch wesentlich schneller als die von Facebook bereitgestellten Scripte.

    Also, alles in allem durchaus empfehlenswert.
    Danke für das kleine HowTo.

    Grüße,
    Peter

    • Peter sagt:

      Hallo-
      Ich habe dazu eine Frage:
      Die Schriftfarbe ist weiß. Wie und wo muss ich in der css was ändern, um eine andere Schriftfarbe zu erhalten?
      Gruß Peter

      • Tim sagt:
        1
        2
        3
        4
        5
        6
        7
        8
        }
        .fan_box .full_widget,
        .fan_box .full_widget .connect_top,
        .fbConnectWidgetTopmost,
        .fan_box .full_widget .connect_top {
          background: none;
          border:none;
          color:#fff;
  2. Susi sagt:

    Danke für den tollen Beitrag. Ich habe immer den ersten Code genommen, da ließ ja nicht viel mit anfangen 😉

    Gruß Susi

  3. Simon sagt:

    Netter Post. Sicher nicht verkehrt, sich damit näher auseinander zusetzen. Werde sicher auch die nächsten Posts verfolgen.

  4. Hallo Kai,

    Durchaus eine interessante Alternative. Ich finde es halt immer etwas unschön, „veralteten“ Code einzusetzen…

    Übrigens ist mir oben noch ein kleiner Typo aufgefallen: „Fqanpage“

    Viele Grüße,
    Simon

  5. Kai Köpke sagt:

    Danke, Tippfehler korrigiert 😉

    Nun ja, älterer Code muss ja nicht zwingend „veraltet“ sein.
    Facebook hat einfach nur vor einiger Zeit eine Variante eingeführt, die für die Masse der User eben einfacher zu handhaben ist, für unsereins aber dann oftmals nicht ausreichend ist.

    Facebook macht bisher keine Anstalten, diese Variante nicht mehr zu unterstützen,
    also warum sollen wirs nicht nutzen? 😉

    Gruß, Kai

    • Ist mir gerade bei einem Projekt aufgefallen, bei dem ich den „alten“ Code mal einsetzen wollte: Der eigentliche Nachteil an dem alten Code ist, dass er nur mit aktiviertem JavaScript funktioniert… Die neue Version funzt auch ohne…

      Viele Grüße,
      Simon

  6. Mediaroo sagt:

    Hallo,
    danke für den Hinweis – habe bisher nie daran gedacht das Teil umzufärben, aber ist ein interessanter Ansatz :- )

    Grüße,
    Tim

  7. Martin sagt:

    Hallo.

    Vielen Dank zuerst einmal für diesen Artikel und die ausführliche Erläuterung.

    Eine Sache würde mich jedoch noch interessieren: Gibt es eine Möglichkeit das Logo der erstellten Fan-Page auszublenden? Also das eigene.

    Grüße,
    Martin

  8. Ja, per CSS:

    1
    img.profileimage{display:none;}
  9. Alice sagt:

    Ging auch mit sehr wenig CSS Kenntnisse hervorragend, jetzt ist das Erscheinungsbild der Fanbox endlich Ordentlich geworden. Dankeschön.

  10. Peter sagt:

    Hallo Kai-
    Ich habe nachstehende Frage eben wohl an falscher Stelle gestellt. Deshalb hier noch mal:

    Die Schriftfarbe im css ist weiß. Wie und wo muss ich in der css was ändern, um eine andere Schriftfarbe zu erhalten?
    Gruß Peter

  11. Kai Köpke sagt:

    Hallo Peter,
    dafür sind die Farbangaben oben im Beispiel in Zeile 4 und 12 zuständig (Hexadezimal #000000 = schwarz, #ffffff = weiß).

    Eine kleine Einführung ins CSS: http://de.selfhtml.org/css/

    Gruß, Kai

    PS: Wenns in WordPress eingebunden werden soll, empfehle ich
    http://kkoepke.de/wordpress/wordpress-plugin-facebook-fanbox-with-css-support/

    • Peter sagt:

      Hallo-
      Vielen dank für Eure Antworten!

      Ich habe per Windows 7-Editor die css geöffnet und versucht, verschiedene Einstellungen (Hintergrund, Schriftfarbe) zu ändern.

      Daraufhin wurden manchmal HG oder Schriftfare willkürlich geändert (HG wechselte zum Original Facebook-Hintergrund oder die Schriftfarbe (blau) änderte sich bei dem Satz: xx Personen gefällt xxx. in die Farbe der übrigen Schriftfarbe (weiß). Meistens änderte sich aber gar nichts.
      Kann ich mit dem normalen Editor die css nicht ändern? Meine Änderungen wurden allerdings immer angenommen.
      meine css sieht so aus:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      a,
      .fan_box .connect_action a,
      .fan_box .connections_grid .grid_item .name  {
          color:#000 !important;
      }
      .fan_box .full_widget,
      .fan_box .full_widget .connect_top,
      .fbConnectWidgetTopmost,
      .fan_box .full_widget .connect_top {
        background: none;
        border:none;
        color:#000;
      }
      .fan_box .connect_top {
        padding: 10px 0 0 0;
      }
      .fan_box .connect_widget .connect_widget_text a {
          text-decoration:underline;
          font-weight:bold;
      }
      .fan_box .connections {
        border: none !important;
        min-height: 150px;
        padding: 10px 0 4px 0px;
      }
      .fan_box .connections_grid .grid_item {
        padding: 0 2px 8px 0;
      }

      das Ergebnis so (zu sehen ganz unten rechte sidebar):

      http://www.luebeckwetter.de/index.php

      Bin ratlos
      LG Peter

      • Kai Köpke sagt:

        Deine Änderungen sehen OK aus, allerdings werden Sie auf der Seite nicht dargestellt. Ich vermute, du hast überlesen, was ich zur Versionierung der CSS-Dateien geschrieben habe? 😉

        css – das von mir zur Anpassung des Erscheinungsbild erstellte CSS File. Achtung: Facebook cached diese Datei – daher, nach jeder Bearbeitung der Datei eine andere Nummer (Beispiel: ?10) an den Aufruf anhängen! Anonsten werden Änderungen nicht angezeigt.

        Also nach jeder Änderung eine andere Nr. an den Aufruf der CSS-Datei hängen (z.B. facebook.css?11, facebook.css?12, usw.), da Facebook ansonsten einfach die Version aus dem eigenen Cache läd.

        • Peter sagt:

          Hallo Kai-
          Vielen Dank für Deine Antwort und Geduld.

          Jaaaa, wer lesen kann, ist klar um Vorteil…
          Du hast mein Problem erkannt. Jetzt funzt es.
          Vielen lieben Dank für Deine Mühe und Hilfe.

          LG Peter

  12. Alternativ ist es auch möglich die gewünschten Farbwerte in englischer Sprache auszuschreiben. Also black statt #000000 und white für #ffffff und so weiter. Ich gebe da einfach mal ein Beispiel, in dem beide Zeilen den selben Effekt haben.

    1
    2
    element {color:#000000;}
    element {color:black;}

    Wichtig hierbei, die Farben müssen dann in englisch betitelt sein. Also black, yellow, white, green, red und so weiter. Dann muss man sich nicht die ganzen Hexadezimalcodes raus suchen 🙂

    • martin sagt:

      Danke schön ! (and sorry I can’t speak german 🙂
      I had been looking for a clear explanation for hours, and finally I find this page.

      Merci beaucoup !

  13. Nils sagt:

    Danke für diese detaillierte Anleitung, hat auf Anhieb funktioniert.

  14. Alexander sagt:

    Hallo und Danke für die Anleitung!

    Eine Frage beschäftigt mich allerdings und ich komme nicht weiter. Ich schaffe es einfach nicht, die Box transparent zu bekommen. Meine Sidebar, wo die Box hin soll hat ein Hintergrundbild, bzw. einen Verlauf, daher will ich gar keine Farbe in der Box haben. Bei Deinem Beispiel dachte ich erst, Du hättest Deine Box einfach in das Blau Deiner Sidebar eingefärbt. Wenn ich den Frame, in dem Deine Box drin ist allerdings seperat aufrufe, ist der Hintergrund weiß. In Deiner css sehe ich weder eine Farbangabe noch ein Hintergrundbild für das Blau. Daher vermute ich, dass Du es irgendwie geschafft hast… oder täusche ich mich da?

    Habe schon alles probiert (none, transparent, mit !important etc.) – aberbringt alles nix… Hast Du ne Idee?!

    • Kai Köpke sagt:

      Durch das background: none; oben im Beispiel in Zeile 10 sollten eigentlich ziemlich alle Backgrounds betroffen sein. Hast du vieleicht einen Link?

  15. Elisabeth sagt:

    Thanks for such a versatile FB plugin. I love being able to style the widget as needed, but I do have one quick question. Is it possible to remove the „on Facebook“ or „auf Facebook“ immediately following the profile name?

    Thanks again!

    • Hi Elisabeth,

      I guess, you don’t want this text in germean, am I right?
      For this you have to change the first line in code and set your correct locale.

      1
      script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"

      Here you see the german locale. For another language you have to replace the „de_DE“ with yours. For example „en_US“.

  16. Elisabeth sagt:

    Again, very close, but not quite right. That gets rid of the whole profile name, not just the „on Facebook“ part. So close! 🙂

  17. Frank sagt:

    Hallo, vielen Dank für das super Plugin, endlich hab ich auch ne FB Box auf meiner Seite, mit anderen Plugins oder dem Original Code, hat es überhaupt nicht funktioniert, irgendwie.

    Leider habe ich nun gar keine valide Seite mehr. 🙁 Gibt es da ne Lösung oder sollte man damit einfach leben?

  18. Da Facebook anscheinend etwas an den Scripten gebaut hat, funktioniert der von Kai vorgeschlagene Code so nicht mehr so ganz. Aber keine Panik, die Lösung liegt in der Änderung des Aufrufes vom Javascript.

    Die Zeile

    1
    <script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

    muss der Aufruf
    wird nun ersetzt durch ein etwas komplexeres Script.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <script type="text/javascript">
        var fbRoot = document.getElementById('fb-root');

        if (!fbRoot) {
            var body = document.getElementsByTagName('body')[0];
            fbRoot = document.createElement('div');
            fbRoot.id = 'fb-root';
            body.appendChild(fbRoot);
        }

        var loadNewScript = true;
        var script = fbRoot.getElementsByTagName('script');

        for (var i = 0, iMax = script.length; i < iMax; i++) {
            if (script[i].src === 'http://connect.facebook.net/de_DE/all.js#xfbml=1') {
                loadNewScript = false;
                break;
            }
        }

        if (loadNewScript) {
            var elm = document.createElement('script');
            elm.src = 'http://connect.facebook.net/de_DE/all.js#xfbml=1';
            elm.type = 'text/javascript';
            fbRoot.appendChild(elm);
        }
    </script>

    Der Grund dafür:
    Facebook erwartet nun einen DIV-Container innerhalb des Quelltextes mit der ID "fb-root" in dem alles was Facebook angeht ausgeführt wird. Dieses neue Script prüft, ob der Container existiert und legt den Scriptaufruf dann darin ab. Sollte der Container nicht vorhanden sein, so wird er mit samt Scriptaufruf erstellt.

    Auch kann es nicht schaden, den head-Tag etwas zu modifizieren. Dies behebt einige Darstellungsprobleme mit dem Internet-Explorer.

    1
    <head xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
    • Kai Köpke sagt:

      Hallo Peter, vielen Dank für den Hinweis.

    • Kein Thema Kai, ich stand bei dem Plugin vor genau diesem Problem. Bei einigen hat es funktioniert, bei anderen nicht. Je nach dem, ob schon andere Facebook-Scripte geladen wurden vorher oder nicht. Ich muss allerdings dazu sagen, dass neue JavaScript stammt nicht von mir, da hat mir mal wieder Simon etwas aus der Patsche geholfen und den Vergleich zusammengebastelt. Weißt ja, ich und JavaScript 🙂

  19. avatar chat sagt:

    Das sind genau die Infos die ich brauche vielen Dank für diesen Post. Mein Vater nervt mich die ganze zeit schon, ich solle diesen Button einbinden, aber am besten in rot, da dies sich nicht mit der CI seiner Firma beissen würde wie das Facebook blau. Jetzt muss ich nur noch etwas basteln dann sieht der Kasten top aus. Besten Dank nochmals

  20. Thomas sagt:

    Hallo,

    danke für die Anleitung.
    Habe das Problem, dass ich den Anzeigebereich des Livestreams in der Höhe nur für Firefox ändern kann:

    a,
    .fan_box .connect_action a,
    .fan_box .connections_grid .grid_item .name {
    color:#fff !important;
    }
    .fan_box .full_widget,
    .fan_box .full_widget .connect_top,
    .fbConnectWidgetTopmost,
    .fan_box .full_widget .connect_top {
    background: #000;
    border:none;
    color:#fff;
    }
    .fan_box .connect_top {
    padding: 10px 0 10px 0;
    }
    .fan_box .connect_widget .connect_widget_text a {
    text-decoration:underline;
    font-weight:bold;
    }
    .fan_box .connections {
    border: none !important;
    min-height: 0px;
    padding: 0px;
    }
    .fan_box .connections_grid .grid_item {
    padding: 0 2px 8px 0;
    }
    .fan_box .full_widget .page_stream {
    height: 600px;
    border-bottom: 0px solid yellow;
    width: 890px;
    }

    Bei IE und Safari klappts nicht. Habt Ihr ne Lösung parat?

    Hier zu sehen:

    http://www.fridaweyer.com/blog/index2.htm

    • Holla,

      Die Höhe der ganzen Konstruktes wird nicht im CSS angegeben, sondern im Script von facebook selbst. Man achte hier auf Zeile 7, dort findet sich die Angabe „height“ 🙂

      1
      2
      3
      4
      5
      6
      7
      8
      <fb:fan profile_id="137561612959066"
          css="http://kkoepke.de/wp-content/themes/kkoepke/facebook.css?10"
          connections="12"
          stream="false"
          logobar="false"
          width="210px"
          height="300px;">
      </fb:fan>
      • Thomas sagt:

        jaja, ich weiss, im quellcode der site siehst du ja, dass dort folgendes angegeben ist:

        habe es auch mit height=“650″ anstatt height=“650px;“ ausprobiert. hilft aber nix. die gesamte fanbox bleibt bei IE 8 und Safari 4.0.4 300px hoch, und der teil, in dem der stream dargestellt wird bleibt 252px hoch.
        ich fummle schon tage daran herum und verzweifle bald.

        habe auch deinen tipp was die änderung des javascripts anbelangt ausprobiert. hilft auch nix.

  21. Thomas sagt:

    connections=“0″
    stream=“true“
    logobar=“false“
    width=“900″
    height=“650px;

  22. Andreas sagt:

    Danke für den Code, habe bislang den like Button fest im Template eingebaut. Funktioniert auch, aber das Laden des iFrames dauert recht lange meiner Meinung nach.
    Ist das mit Deinem Plugin auch so? Wäre nett wenn jemand kurz etwas dazu schreiben kann, bevor ich es selber ausprobieren muss.

    • Kai Köpke sagt:

      Auch hier geht es um kein Plugin, sondern auch um Code der von Hand einzufügen ist.
      Die langen Ladezeiten/Antwortzeiten liegen bei Facebook. Da wird sich nicht viel ändern lassen.

  23. Nico sagt:

    Danke für das Tutorial. Habe eine echt schöne Box, passend zur Seite, hinbekommen. Man kommt ja um FB nicht mehr herum 😉

  24. Budi sagt:

    Vielen Dank, ich habe lange nach genau so einem „Tutorial“ gesucht. (Gefällt mir!)

  25. Klaus sagt:

    Danke für das Tutorial. Versuche nun, eine halbwegs zu meiner Seite passende Fanbox hinzubekommen. Hoffe, es klappt.

  26. Ricco sagt:

    Wollte meine Likebox auch gerade nach diesn Angaben optisch verändern,
    nur iwie klappt es bei mir nicht.

    Ich möchte über die Likebox meine Page einbinden (www.facebook.com/IT.Center.Neuss)
    Da ich keine Profile_ID habe, ist es auch noch möglich?

    Wenn ja, wie muss der Code dafür aussehen?
    Vielen Dank

    • Kai Köpke sagt:

      Hallo Ricco, zu jeder Facebook Fanpage gehört auch eine ID.

      profile_id – die ID der jeweiligen Facebook Fanseite. Sie ist am einfachsten zu finden, indem man sich in Facebook die URL im Punkt “Seite bearbeiten” genauer ansieht.

      Also einfach mal auf „Seite bearbeiten“ klicken, dann ist die ID Bestandteil der URL,
      z.B. http://www.facebook.com/pages/edit/?id=1234567890

  27. dokulaner sagt:

    moin, habe die box via css eingebunden. allerdings wird eine total falsche fanzahl ausgegeben. woran könnte das liegen?

  28. Alex sagt:

    Also ich würde gern anstelle der Fan.box den stream ausgeben. Leider ist die Schriftfarbe dort Schwarz und ich kann diese nicht ändern. Weiß jemand wie ich bei stream=“true“ die Schrift auf weiß ändern kann???

    mit
    .fan_box .full_widget,
    .fan_box .full_widget .connect_top,
    .fbConnectWidgetTopmost,
    .fan_box .full_widget .connect_top {
    background: none;
    border:none;
    color:#fff;
    }

    wird nur die Schrift im Top verändert aber nicht die im Stream…!

  29. Tonihuette sagt:

    Hallo,
    zum letzten post:
    Bei mir funktioniert das Anpassen bzw. Ändern der Streamtextfarbe überhaupt nicht, auch nicht mit der letzgenannten Lösung!
    Firebug sagt:
    Geerbt von h6.uiStreamMessage
    .uiStream .uiStreamMessage {
    color: #000000;
    font-size: 11px;
    font-weight: normal;
    }
    wenn ich die Farbangabe ändere passiert aber nix!
    Das HTML dazu sieht so aus:

    Die Wintersaison geht zu Ende und wir bereiten die Hütt’n auf den Sommer vor. Deshalb schliessen wir von 04.April bis einschliesslich 30.April. Nach Renovierungs- und Verschönerungsarbeiten sind wir dann pünklich zum 01. Mai wieder für Sie da!

    Weiss Jemand die Lösung? Danke im Voraus!

  30. Tonihuette sagt:

    Tja das HTML ist wohl nicht zu sehen im post … 😉

  31. kvm sagt:

    Gibt es eine möglichkeit bei der Like Box die einzelnen Logos bei den Beiträgen zu verbergen?

  32. Robert sagt:

    Am Anfang des FB Hype konnte die Box garnicht gross genug sein um alle Freunde/Fans zu präsentieren. Inzwischen nutze ich nur noch die minimalste Variante auf meinen Blogs.

  33. Stefan sagt:

    Hallo Kai,

    vielen Dank für den tollen Beitrag. Hat super funktioniert.

    Grüße
    Stefan

  34. maggus sagt:

    Hi Kai und H.-Peter Pfeufer,

    Danke für die super Anleitung! Läuft and saved my day 😀

  35. pat sagt:

    Hy, klappt alles ganz gut, leider entstehen mit der Variante „unsafe Javascript“ Fehler. Kann mir jemand sagen wie ich die wegbekomme?

    DANKE

  36. A miracle sounding (Monster), also known as Monster, transfer (Monster Cord) could be international fundamental surfaced high-energy audio-visual materials to touch base the company, the provider began doing 1979 because of a Chinese-American Lee E. (Mister.Noel Lee) Mister.. Prior to this, stereo materials regardless of the emergence created by outstanding faithfulness sound quality is absolutely healthy LPs background grower, Hi-end magnitude of ones amp and additionally jams diminishing completely exceptional hi-fi surround speaker, nonetheless , professionals during kinds of materials affiliation fishing line recognized next to nothing, don’t use anything but unusual transfer to give high-fidelity broadcast

  37. Julian sagt:

    Hallo zusammen,

    seit gestern (gemerkt hab ichs erst vergangene Nacht) zeigt der Fanbox-Workaround, wie er hier sehr schön (und mit Erfolg gekrönt, vielen Dank dafür!) beschrieben wurde, keine Wirkung mehr: meine per css angepaßten Boxen zeigen keinerlei Beeinflussung durch mein Stylesheet mehr und auch im html-Tag direkt festgelegte Attribute wie die Ausblendung der Logobar werden ignoriert. Ich habe bereits versucht, den Fehler dadurch zu beheben, indem ich dem Stylesheet eine neue Cache-Versionsnummer zuordne – Fehlanzeige.
    Fast hat es den Anschein, als ob entweder die persönlich anpaßbare Fanbox der Vergangenheit angehört, oder eine Anpassung an H.-Peters Javascript-Code notwendig ist.

    Weiß hier jemand genaueres über die Zukunft der anpaßbaren Fanbox? Tritt das Problem überhaupt noch woanders auf, läßt es sich reproduzieren?

    Vielen Dank schon einmal für eure Antworten.

    Beste Grüße,

    Julian

    • Fratzenbuch sagt:

      Ja, dieses Phänomen ist mir auch aufgefallen. Leider habe ich ebenfalls keine passende Lösung gefunden. Es erscheint durchweg die 08/15 LikeBox. Hat jemand mehr Erfolg?

      • Julian sagt:

        Hi!

        Kai und H.-Peter sind informiert; ich hoffe auf deren Genie! 🙂

        Im dümmsten Fall (also er Fall, daß FB dem Box-Costumizing den Hahn zugedreht hat), gibt es noch eine andere einigermaßen galante Lösung für die Likebox, die mit zwei um die Box herum gelegten Divs arbeitet, denen dann Innenfarbe und Randfarbe gegeben werden kann, die es aber nicht zuläßt, den Text zu färben oder die Trennlinien zwischen den Boxinhalten anders zu gestalten etc., d.h. der Farbpalette der Innenfarbe durch notwendige Kontrastunterschiede Grenzen aufzeigt.

        Steht unter diesem Link.

      • Facebook hat schon vor geraumer Zeit den Support dafür eingestellt.

        • Julian sagt:

          Hi H.-Peter!

          Ja, schon. Aber: nur den Support eingestellt oder blockt FB das nun aktiv, damit man das gar nicht mehr (auch nicht per Anpassung Deines JS-Codes) nutzen kann?

          • Julian sagt:

            Nun hab grade ne Likebox in (soweit das halt geht) angepaßtem Design mit XFBML-Code testweise eingebunden (mit dem Code, wie er auf der FB-Seite ausgegeben wird), aber der Hintergrund von dem Ding ist transparent.
            Alternativ hab ichs mit iframe versucht: dasselbe.
            Bzw. auch versucht, die Anweisung „allowTransparency =“false““ im XFBML-Code anzuwenden, was aber auch ohne Ergebnis blieb.

            Könnte es sein, daß die ehemaligen CSS-Anpassungen Änderungen bewirkt haben, die man nicht mehr revidiert bekommt und auf die die Likebox nach wie vor zugreift, aber irritiert von nicht mehr gebräuchlichen (‚deprecated‘) Anweisungen ist und den Hintergrund (den ich zuvor ja per CSS-Stylesheet auf dunkel gesetzt hatte) deshalb transparent setzt?

        • Noch mal für alle zum Mitschreiben.

          Die hier beschriebene Methode die Box zu manipulieren wird von Facebook nicht mehr unterstützt. Es funktioniert also nicht mehr.

  38. Julian sagt:

    Daß sie von FB nicht mehr unterstützt wird stand bereits fest, als die Likebox eingeführt worden war, trotzdem klappte das Customizing noch einige Zeit. – Mein FF 3.6.28 wird von manchen Seiten auch nicht mehr unterstützt, trotzdem kann ich sie (noch 😉 ) ohne Probleme anschaun. Insofern hatte mein Nachhaken seinen Sinn.

    Noch ein Tip für diejenigen, bei denen das Box-Design nach der Umstellung von per CSS angepaßter Fanbox auf Likebox in punkto Hintergrundfarbe auch Transparenz anzeigt: eine entsprechende

    1
    background-color

    -Anweisung im iframe bringt das gewünschte Resultat.

5 Trackbacks/Pingbacks for Howto: Facebook Fanbox/Likebox anpassen und stylen

  1. Facebook Fanbox per CSS anpassen » H.-Peter Pfeufer - Blog

  2. Linktipps am Morgen » Facebook, Wordpress, Blog, E-Commerce, Plugin, Rank » ShopTrainer

  3. WordPress-Plugin: Facebook Fanbox (with CSS Support) » H.-Peter Pfeufer - Blog

  4. How to customize your facebook fanbox

  5. Links 02/2011: Magento, Social Media, Mobile & Deployment | Matthias Zeis

Schreibe einen Kommentar

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