• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Facebook Like-Button wird unten abgschnitten

jakobility

jakobility

Neues Mitglied
Hallo,
immer wenn ich den Facebook Like-Button im vertikalen Format (mit box_count) auf meiner Seite einfüge, wird er unten abgeschnitten. Ich verwende die offizielle HTML5-Version des Buttons.

Code: 
<script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=303709406310183";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
HTML: 
<div class="fb-like" data-href="<?php the_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false" data-font="verdana"></div>

Ihr könnt euch das Problem z.B. auf der linken Seite in einem unserer Artikel ansehen. Ich habe schon alles mögliche mit CSS versucht, doch nichts hat geklappt.

Habt ihr Vorschläge, um das Problem zu lösen?

Viele Grüße,
Jakob
 
Hallo,

und willkommen im Forum.

jakobility schrieb:
Ich verwende die offizielle HTML5-Version des Buttons.
Zum Vergrößern anklicken....

Deine Seite muss aber dann auch in HTML5 sein und das ist sie nicht. du verwendest HTML4 in der Strict Variante. Ich würde den dann auch den entsprechenden Code von der Seite nehmen oder du änderst deine Seite auf HTML5 ab.
 
Wo denn? Klingt jetzt vielleicht komisch, aber ich hätte vermutlich keine Ahnung, wie „das“ (was auch immer) richtig aussehen müsste. Geht vielleicht noch anderen Leuten hier so.
 
mermshaus schrieb:
ich hätte vermutlich keine Ahnung, wie „das“ (was auch immer) richtig aussehen müsste. Geht vielleicht noch anderen Leuten hier so.
Zum Vergrößern anklicken....
Wie das richtig aussehen müsste, weiss ich auch nicht, aber vorausgesetzt Javascript ist eingeschaltet, sieht man links auf der Höhe des Artikels nach der Linie von der Überschrift den Google+ und Twitter Button und dazwischen das Feld von Facebook. Dort ist ist der Button verdeckt durch den nachfolgenden von Twitter.

An Jakob

Wenn man sich deine Seite beim [Invalid] Markup Validation of [url]http://tabletcommunity.de/10637/apple-durch-amazon-unter-druck-geraten-ipad-mini-geplant/ - W3C Markup Validator[/URL] anschaut stellt man fest, das sie voller Fehler ist. Genau genommen sind es 74 Fehler und jetzt kommt die gute Nachricht, fast alle Fehler sind auf den verwendeten Doctype zurückzuführen.
Wenn man den Doctype auf HTML5 ändert sind es "nur" noch 10 Fehler und einer davon betrifft dein Button.

Vorgehen zur Korrektur der Fehler:
Du kannst irgendwo bei Wordpress die Seite mit dem Header des verwendeten Templates aufrufen.
dort änderst du
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" dir="ltr" lang="de-DE">

durch

HTML: 
<!DOCTYPE html>
<html lang="de-DE">

und speicherst die Einstellung.

Danach die Seite im Validator aufrufen und die Fehler abarbeiten, die dort noch angezeigt werden.

Wenn der Validator mit dem neuen Doctype nicht mehr meckert hast du deine Anzeige so wie sie sein sollte.
 
Danke für die Hilfe.
Habe nun den Doctype umgestellt und (fast) alle Fehler bereinigt. Wie die letzten Fehler behoben werden können, weiß ich leider nicht.

Aber leider klappt es immer noch nicht und der Like-Button ist nur halb bzw. gar nicht sichtbar. :(
Liegt das wirklich an den letzten Fehlern im Validator oder was ist der Grund?
 
Zuletzt bearbeitet:
mermshaus schrieb:
Was sich der Autor des WP-Themes dabei gedacht hat? Keine Ahnung.
Zum Vergrößern anklicken....
Das ist das Problem, wenn man einfach die Arbeit, hier ein Template, von anderen übernimmt.
Wahrscheinlich hat es für seine Seite angepasst, fand es toll und hat es als Template für andere, ins Netz gestellt. Dabei hat er nur kurz das HTML überarbeitet und einige Klassen und IDs in der CSS-Datei vergessen zu bearbeiten. Ist aber reine Fantasie von mir und fällt daher unter Glauben.

@Jakob
Der Validator zeigt noch die Fehler an, dass nach Ende des </head> ein <style> Element folgt. Das Style-Element darf nur innerhalb des head-Elementes vorkommen.
Einige IDs werden 2 mal verwendet. Ids dürfen nur 1 mal vorkommen, daher ID. Sonst verwendet man Klassen. Der Fehler rührt daher das du
// Home // About // Kontakt // Impressum

oben auf der Seite verwendest und im Footer noch einmal. Ändere die IDs in Klassen, auch im CSS, dann ist der Fehler auch behoben.

Einige </p>-Elemente sind zwar geschlossen wurden jedoch nicht vorher geöffnet. Dieser Fehler tritt bei den Kommentaren links auf:
Suche neues Tablet für Weihnachten
Den Fehler wirst du wohl nicht beheben können. Er kommt wohl durch ein fehlerhaftes Kommentar Plug-in.
 
mermshaus schrieb:
Die Höhe scheint durch diese Regel bestimmt zu werden:

Code: 
.fb_ltr {
    height: 22px !important;
}
Zum Vergrößern anklicken....

Vielen Dank! Das kommt davon, wenn man die alten Codereste nicht beseitigt ;)
Der Entwickler des Themes ist nicht der "Schuldige" - der CSS-Eintrag war von jemandem, der für mich das Design verändert hat (und z.B. kleine Social-Buttons eingefügt hat). Nun verändere ich aber selbst gerade einiges und stoße daher immer wieder auf so alte Einträge im Code.

@Wustersoss:
Auch dir nochmal danke, ich werde mir die verbleibenden Fehler in den kommenden Tagen nochmal genauer anschauen...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben