Die richtige Antwort ist eine Kombination von Dingen, die ich hier gefunden habe. Mikels Antwort ist ein guter Anfang:
Link zur Facebook-Entwicklerplattform
Dies sagt:
Wir haben eine Lösung dafür gefunden. Von nun an können Sie die Breite als 100% angeben (z. B. Datenbreite = "100%"), um ein flüssiges Layout zu erhalten. Die Dokumente werden ebenfalls aktualisiert: https://developers.facebook.com/docs/plugins/comments
Vielen Dank für Ihre Geduld.
Aber ... Dies lädt die Breite dessen, was dem Plugin beim Laden zur Verfügung steht. Wenn Sie die Größe Ihrer Seite ändern, bleibt sie so breit wie beim Laden der Seite. Um dies zu beheben und eine wirklich reaktionsschnelle Version des Facebook Social Plugins zu erstellen, fügen Sie Folgendes in Ihr CSS ein:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Dadurch wird die Größe des Plugins auf den verfügbaren Speicherplatz geändert, wenn Sie die Fenstergröße ändern.
Wenn dieser Code für das Seiten-Plugin funktionieren soll, ändern Sie den Klassennamen 'fb-Kommentare' in 'fb-Seite':
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
(Danke für den Zusatz Black_Stormy!)
.fb-page, .fb-page iframe[style], .fb-page span { width: 100% !important; }
Iframe
Flüssigkeit herstellen?FB.XFBML.parse()
ist nah, scheint aber extrem schlampig.Keine dieser Methoden hat funktioniert, aber mit dieser Idee hat Folgendes für mich funktioniert:
quelle
Ich habe eine Lösung mit CSS gefunden. Inspiration kam von diesem Artikel http://css-tricks.com/2708-override-inline-styles-with-css/
quelle
.fb-comments > span
meiner hinzufügen , weil der Bereich, den FB innen hinzufügt, eine Breite hatte, die über ein Stilattribut festgelegt wurde..fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
funktioniert bei mir.Ich habe es geschafft, es mit diesem Code zum Laufen zu bringen:
weil ich in meiner HTML-Datei Folgendes habe:
Tipp: Sie sollten Ihr CSS abhängig von der div-Klasse ändern.
quelle
Obwohl es sich um eine alte Frage handelt, ist dies jetzt das beste Google-Ergebnis für "Facebook-Kommentar-Plugin reagiert", sodass es immer noch relevant ist.
Die Problemumgehungen in den anderen Antworten werden nicht mehr benötigt, da FB dies kürzlich (Mai 2014) am Ende behoben hat.
Von https://developers.facebook.com/x/bugs/256568534516879/ :
Jetzt können Sie einfach Ihren HTML-Code auf z
<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>
Und brauchen Sie keine zusätzlichen CSS-Problemumgehungen.
Bearbeiten: Dadurch wird das Plugin erstellt, um seine Breite beim Laden an den verfügbaren Speicherplatz anzupassen. Wenn Sie die Größe des Browserfensters ändern, bleibt das Plugin auf dieser anfänglichen Breite. Fügen Sie dies Ihrem CSS hinzu, damit es wirklich reagiert:
Dies führt dazu, dass sich das Plugin an den aktuell verfügbaren Speicherplatz anpasst, wenn Sie die Größe des Browsers ändern
quelle
Wenn Sie das offizielle WordPress-Facebook-Plugin aufgrund des mobilen Schnüffelns von Facebook verwenden, tun Sie dies.
Sie müssen die Datei facebook / social-plugins / fb-comment.php in Zeile 35 ändern.
Dies ermöglicht es Ihnen, mit den folgenden zu stylen.
Es wäre schön, wenn sie entweder ihre mobile Version reparieren oder eine Einstellung auf der GUI ihres Plugins vornehmen könnten.
quelle
Es wird definitiv nur zum Hinzufügen
.fb-comments span
von Stil funktionieren .quelle
Akzeptierte Antwort hat bei mir nicht funktioniert.
Ich fand dies von Craig Bailey in den Kommentaren hier:
http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress
Das ist perfekt flüssig (getestet in osx ff & safari, ios6).
quelle
Sieht so aus, als wäre dieser Beitrag nicht sehr alt, aber die Antwort hat bei mir nicht funktioniert. Ich musste dies meinem Stylesheet hinzufügen ...
Das .fb_iframe_widget und das .fb_iframe_widget [style] schienen beide wichtig zu sein.
quelle
Ich habe dies mit diesem einfachen Skript (siehe Code im Link).
https://gist.github.com/2111366
Sie müssen einige Änderungen an den Informationen vornehmen, damit Sie Ihre Facebook-App-ID und Ihre Seiten-URL verwenden.
Diese Lösung verwendet jQuery, daher müssen Sie verstehen, wie dies funktioniert. Sobald Sie jedoch das Skript zum Ausführen Ihres responsiven Designs erhalten, funktioniert es beim Laden der Seite oder beim Ändern der Seitengröße.
quelle
Ein wichtiger Hinweis zu dieser Größenänderung: Wenn das Facebook-Kommentarskript feststellt, dass Sie sich auf einem mobilen Gerät befinden, wird dies unterbrochen. Wenn Sie jedoch festlegen, dass das
<fb:comments>
Tag den Attributwert enthält,mobile="false"
respektieren die Skripte von Facebook (vorerst) Ihr CSS.quelle
Für diejenigen, die den HTML5- Code für Facebook-Plugins wie den Aktivitäts-Feed oder die Like-Box bevorzugen :
quelle
Fügen Sie dies einfach entweder in Ihre CSS-Datei oder in Ihren HTML-Code mit Style-Tags ein !!!
Ref: http://dwij.co.in/making-facebook-comments-responsive
quelle
Beitritt zu den nicht informierten Massen mit meiner eigenen Lösung für dieses Problem ab September 2015:
Facebook bietet eine Option für das
fb-page
aufgerufene Widgetadapt-container-width
, die (gemäß den Dokumenten ) die Breite der Eltern verfolgen soll (bis zu einer maximalen Breite von500px
). Beim erneuten Rendern mitFB.XFBML.parse()
scheint das Widget an einem seltsamen Wert für die Containerbreite des übergeordneten Elements hängen zu bleiben, obwohl Sie dies für das eigentliche Widget selbst festgelegt haben. Im Moment funktioniert das gut genug:window
dieresize
Methode von (optional_.debounce
mit einer sinnvollen Grenze, um zu verhindern, dass der Browser mit den Zwischenanforderungen überlastet wirdWarten Sie, bis Facebook mehr von der Widget-API verfügbar macht, damit wir sehen können, was zum Teufel los ist
kombiniert mit folgendem Javascript:
quelle
Dies ist JQuery und könnte Teil der Antwort auf Ihre Frage sein. Ich verwende die HTML5-Version der Schaltfläche "Gefällt mir":
Das Element "div.main-content" ist das Element, in das die Schaltfläche "Gefällt mir" in mein Design passen muss. Die Größenänderung funktioniert so lange, bis das div so klein wird, dass das Datenlayoutattribut im div.fb-like von "Standard" auf eine Alternative geändert werden muss, die weniger horizontalen Platz beansprucht. Ich bin neu in diesem Bereich, daher bin ich mir nicht sicher, ob dies die eleganteste Lösung ist, um den ähnlichen Knopf reaktionsfähig zu machen. Ich würde gerne eine Antwort auf diese Frage von jemandem sehen, der eher ein Experte auf diesem Gebiet ist.
quelle
Verwenden Sie das Inspect-Element, um zu sehen, welcher Code generiert wird. In einigen Fällen wie bei Wordpress Facebook-Plugins werden unterschiedliche "IDs" verwendet, und sobald Sie die verwendete ID gefunden haben, fügen Sie diese hinzu
Dies macht nicht immer den Trick beim Lernen. Obwohl Sie Farben und Größen ändern können, ist es immer noch sehr fehlerhaft. Es scheint keine Prozentsätze zu mögen und sieht nicht die Größe der Box, in der es sich befindet, so dass dies nicht funktioniert. Ich spiele mit @ media-Abfragen, um die Größe abhängig von der Größe des Browserfensters zu ändern.
Es wäre schön, wenn es die Breite erkennen würde, aber das @media scheint der einzige Weg zu sein.
quelle
Facebook hat einige Änderungen am ausgegebenen Markup aus dem Kommentar-Plugin vorgenommen. Ich benutze die HTML5-Version. Dieses geänderte CSS von dem, was oben geteilt wurde, hat den Trick getan.
quelle
Hier ist eine Abfrage, die über Änderungen am Ausgabe-Markup hinweg bestehen bleiben sollte, da nur die Breite mithilfe eines Regex-Ausdrucks neu geschrieben wird und der Rest des Style-Tags in Ruhe gelassen wird.
Sie müssen die richtige Container-ID oder Auswahl angeben und mein Beispiel für Folgendes ersetzen: # footer-last. Die Größe des Iframes wird basierend auf den Änderungen der Breite des Containers geändert, die als reaktionsfähig eingerichtet werden müssen.
quelle
Ich weiß nichts über die Kommentare, aber mit dem Linkfeld müssen Sie nur die iframe-Option direkt von Facebook verwenden und die Breite in Pixel mit einem Prozentsatz ändern. Diese ändert sich je nach Breite des Spalte ist es in.
quelle
Hier ist eine kleine Problemumgehung, bei der das HTML5 Facebook LikeBox-Plugin mit einer Antworthöhe oder -breite an das DOM angehängt wird.
quelle
Hier ist ein vollständiges Beispiel mit jQuery mit einer Antwortbreite und einem Ladebild. Der CSS-Code von Alan und Jubair ist im Code kommentiert.
Das funktioniert gut in einer Android-Webansicht
quelle
Ich denke, es
max-width
ist besser alswidth
in diesem Fall, und es funktioniert für mich:quelle
Das funktioniert bei mir
quelle
Ich habe es gerade versucht und es scheint, dass es jetzt ein
<div>
innerhalb des gibtiframe
, das eine feste Breite hat, was bedeutet, dass Sie dasstyle
Tag jetzt tatsächlich mit Javascript entfernen müssen , um es flüssig zu machen.BEARBEITEN: Sie können mit JS nicht auf den Iframe-Inhalt zugreifen, da dieser von einer anderen Domain stammt
quelle
100%
oder hinzufügendata-width="100%
Erstellen Sie ein leeres Div, in dem sich die Facebook-ähnliche Box befinden soll (oder ein anderes soziales Plug-In, das universell funktioniert), mit einer Klasse 'fb-container', und fügen Sie dann die folgende jQuery hinzu:
ps Sie können PARENT DIV durch jedes andere Element ersetzen, mit dem das Kommentarfeld übereinstimmen soll, und WWW.YOURSITEHERE.COM mit Ihrer Site
quelle
Das funktioniert bei mir:
quelle
Ich habe es mit ein wenig jQuery zum Laufen gebracht und das Attribut "Datenbreite" beim Laden der Seite und beim Ändern der Fenstergröße festgelegt. Das Problem, auf das ich bei allen CSS-Ansätzen gestoßen bin, ist, dass einige der Kommentare und Schaltflächen außerhalb der Container-Ränder versteckt waren oder überliefen.
Hier sind meine $ 0,02, hoffe es hilft. Stellen Sie außerdem einfach den # content-Selektor auf das ein, mit dem das Kommentarfeld übereinstimmen soll, z. B. einen Container div ...
jQuery (Dokument) .ready (Funktion () {
});
quelle
So funktioniert es: Fügen Sie einfach diese Datenbreite = "100%" hinzu. Hier ein Beispiel:
quelle
Folgendes habe ich erreicht:
quelle