Für die fb-Like-Box muss ich min-width und min-height definieren - Aber wie ?

[StephanBo]

Nach stundenlangem Debuggen warum meine Like-Box von Facebook nicht im IE und FF angezeigt wird, habe ich endlich den Fehler in der CSS-Datei ausgemacht. Der Grund: Die fb-Like-Box ist bei mir in einem Tab untergebracht und dieses hat das Attribut "display: none;". Dieses Attribut hat zur Folge, dass die fb-Like-Box mit dem Wert height und width von je 0px angezeigt wird, also unsichtbar ist.

Auf der fb-Developer-Seite wird das auch erklärt und ein Lösungsvorschlag unterbreitet:

The reason that you don't get a like button is because the iframe get 0px height and 0px width. This is logically, because when you ask with Javascript height or width of a hidden element, you will get 0px. You can fix it by adding min-width and min-height in your css file..fb-like span, iframe.fb_ltr {.
min-width: 105px;
min-height: 20px;
}

How much pixels this must be depends on the language you use.

I hope this will help you.


Jetzt bekomme ich dies allerdings nicht umgesetzt.

<div class="facebook-like">
<div class="fb-like" data-href="http://www.meineseite.de/" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>
</div>

Ich habe sowohl in der class="facebook-like" als auch in der class="fb-like" versucht mit style="min-width: 105px; min-height: 20px" eine Minimumgröße zu bestimmen, aber nichts ist passiert. Die Like-Box bleibt weiterhin unsichtbar.

Hat jemand einen Lösungsvorschlag? Danke schon mal.

 

[ineedmusic]

"-" in Klassen sollte man nie verwenden. Versuch es mal mit "fb_like".

 

[StephanBo]

Ok, aber class="fb-like" ist die von fb definierte Klasse. Die habe ich so gar nicht erstellt. Umbenennung hat aber leider nichts gebracht.

 

[ineedmusic]

Hmm..warum benutzt du eigentlich display:none;? Das Element soll doch sichtbar sein?
Ersetz das mal durch display:inline-block;

 

[StephanBo]

Das Element ist in einem Tab untergebracht und nur der erste Tab soll bei Aufruf der Seite sichtbar sein. Also ist der erste "display: block" und alle weiteren Tabs sind "display:none" und somit erst dann sichtbar, wenn auch auf der jeweilige Tab geklickt wurde.

 

[ineedmusic]

Das einzige was mir noch einfällt ist, das 105px width nicht ausreichen, da 'Gefällt Mir' ja länger ist als 'Like'. ("How much pixels this must be depends on the language you use.")
Wenn das nicht der Grund ist, weiß ich auch nicht weiter, sorry.

 

[StephanBo]

Alles schon ausprobiert. Bringt leider alles nichts. Aber trotzdem danke.

 

[StephanBo]

Lösung gefunden, wenn es einen interessiert:

Einfach in die Div-Box in der man den Facebook-Like-Buttton einbaut erweitern um:

.facebook_like span,
.facebook_like iframe {
height: 34px !important;
width: 118px !important;
}

und schon wird der Like-Button auch in einem Tab mit der Eigenschaft display:none dargestellt.