it-swarm.com.de

Wie mache ich Facebook-Kommentarfeldbreite 100%? 2014

Dieselbe Frage http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100 Ich habe alle Antworten ausprobiert, aber es funktioniert nicht mehr. Sieht aus, als hätte Facebook ein paar Sachen verändert.

14
whitesiroi

Diese ist war ein Facebook-Fehler, bitte hier nachlesen: https://developers.facebook.com/x/bugs/256568534516879/

Die einzige verfügbare Problemumgehung besteht in der Verwendung von Javascript.

Später editieren: Fehler behoben: Sie müssen schreiben: data-width="100%"

Die Breite des Plugins. Entweder ein Pixelwert oder der wörtliche 100% für Fluidbreite. Die mobile Version des Comments-Plugins ignoriert den Parameter Width und hat stattdessen eine Fließbreite von 100%. https://developers.facebook.com/docs/plugins/comments

32
Romeo Onisim
 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
        $(window).on('resize', function () {
            resizeiframe();
        });

    function resizeiframe() {
        var src = $('.fb-comments iframe').attr('src').split('width='),
            width = $(".fb-comments").parent().width();

        $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
    }

Jquery Workaround,

Quelle: https://developers.facebook.com/x/bugs/256568534516879/ Kommentar von: Milap Bhojak

3
Dasith

Mit Verweis auf https://developers.facebook.com/support/bugs/173395380238318/

Facebook-Kommentar-Plugin, sie aktualisieren ständig neue Dinge, aber manchmal führt dies zu einem neuen Bug.

Ein einfaches CSS löst also die Breitenprobleme.

/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
            max-width: 100% !important;
            width: 100% !important;
 }

Hinweis: Stellen Sie sicher, dass Sie! Wichtig verwenden. Ohne wichtig funktioniert es nicht wie ausnahmslos.

Wenn Sie dies als hilfreich empfunden haben, drücken Sie die Aufwärtstaste. Danke

2
mukesh krishnan

facebook hat das fb-comments plug in geändert und nun kannst du data-width = "100%" verwenden

sie benötigen keinen Style oder JS-Code. 

    <div class="fb-comments" data-href="http://example.com" 
data-width="100%" data-numposts="5" data-colorscheme="light"></div>
1
vitralyoz

Ich habe hier eine Antwort auf dieselbe Frage gepostet: https://stackoverflow.com/a/22328835/2544386

Das Problem ist, dass Facebook innerhalb des iframes CSS, Klassen ändern, feste Breiten hinzufügen kann usw. . Wenn Sie jedoch JS auf intelligente Weise verwenden, indem Sie das Tag in Ihrem HTML-Code manipulieren, bevor es von Facebook analysiert wird Ich glaube, es verringert wirklich die Chance, dass es erneut zerbrochen wird, wenn Facebook am Ende etwas ändert.

1
Gav

Wenn Sie den einfachsten Weg ohne Programmierung suchen. Keine Komplikationen.

Machen Sie es wie immer (mit der Facebook-Code-Box), öffnen Sie dann Inspect Element im Browser (klicken Sie mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie diese Option), klicken Sie auf die Like-Box <iframe></iframe> und kopieren Sie sie in Ihren Code (nur der iframe!). Es funktioniert genau wie der andere Code.

Entfernen Sie nun die Breite des Iframes oder schreiben Sie width:100% darauf.

Genau wie dieser:

<iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>

Es funktioniert gut für mich.

1
bey23

Facebook fügte eine weitere Breite von 550px für .pluginSkinLight> div hinzu

fügen Sie dies zu Ihrem CSS hinzu. pluginSkinLight> div {width: 100%! important;}

1

Eine einfache JS-Problemumgehung

1) Fügen Sie dem FB-Kommentar div eine id ("fb_chat" in diesem Beispiel hinzu): 

<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>

2) Verwenden Sie diesen JS-Block (ersetzen Sie 'chat_body' durch Ihren übergeordneten Container für Kommentare):

<script type="text/javascript"> var fb_chat = document.getElementById('fb_chat'); var container_width = document.getElementById('chat_body').clientWidth * 0.985; var attr = document.createAttribute('data-width'); attr.nodeValue = container_width.toString(); fb_chat.attributes.setNamedItem(attr); </script>

0
varsize

Durch das Hinzufügen von data-width="100%" werden die Kommentare zwar um 100% breiter, aber dennoch nicht genau so flüssig, wie Sie es erwarten würden. Sie füllen einen Container, aber nur beim Laden. Die Größe des Fensters ändert sich nicht. Um dies zu tun, fügen Sie dies Ihrer CSS hinzu: 

.fb_iframe_widget_fluid span, iframe.fb_ltr { width: 100% !important; }

0
drspaceman

Um dieses Problem zu lösen, entfernen Sie "Datenbreite" von <div class="fb-comments"...

FB wird automatisch 100% setzen

oder data-mobile="auto" löschen

0
Vitalicus