Ist es möglich, eine flüssige Breite für die sozialen Plugins von Facebook festzulegen?

72

Ich entwickle eine Website rund um das Konzept "Responsive Design", aber die Facebook-Plugins für soziale Netzwerke haben eine statische Breite und "brechen" das Layout, wenn die Größe geändert wird.

Mithilfe von Medienabfragen habe ich die Plugins so eingestellt, dass sie in Browsern mit niedriger Auflösung (Mobilgeräte usw.) ausgeblendet werden. Wenn jedoch in Desktop-Browsern das Browserfenster kleiner, aber nicht so klein ist, um die Plugins auszublenden, brechen sie aus dem Layout aus.

Gibt es eine Möglichkeit, eine flüssige Breite für die sozialen Plugins von Facebook festzulegen?

Chaddeus
quelle

Antworten:

35

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!)

Patrick
quelle
Funktioniert auch perfekt für mich! Danke !! Ist es möglich, dies auch auf Like-Share-Plugins zu reflektieren?
CE
1
Dies funktioniert mit dem Seiten-Plugin, vorausgesetzt, Sie ändern die Klassennamen von 'fb-Kommentare' in 'fb-Seite'. Machen Sie die oben genannten CSS:.fb-page, .fb-page iframe[style], .fb-page span { width: 100% !important; }
Abraham Brookes
Mit diesem Code reagiert das gesamte Wrapper- Element des Plugins, der Inhalt selbst jedoch nicht. Wenn die Größe der Seite geändert wird, wird sie zugeschnitten. Ich schätze, ich vermisse etwas sehr Offensichtliches, aber wie kann ich auch den Inhalt der IframeFlüssigkeit herstellen?
Gruber
Facebook schlägt vor, den Inhalt erneut zu rendern, aber ich bin mir nicht sicher, wie ich das machen soll. FB.XFBML.parse()ist nah, scheint aber extrem schlampig.
blast_hardcheese
Vielleicht hätte ich eine Problemumgehung gefunden und eine echte Antwort geschrieben
blast_hardcheese
62

Keine dieser Methoden hat funktioniert, aber mit dieser Idee hat Folgendes für mich funktioniert:

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}
Jubair
quelle
1
Das funktioniert nicht mehr. Facebook legt jetzt die Breite eines Divs im Iframe fest.
Jayden Lawson
gut zu wissen ... danke! Ich werde versuchen, meine Antwort bei der nächsten Gelegenheit zu aktualisieren.
Jubair
2
Ich habe dies mit Datenbreite = "100%" kombiniert. Und wirkte wie ein Zauber.
Asanka Indrajith
Bitte nicht, dass die 'akzeptierte Antwort', die 2013 nicht funktioniert hat, nicht mehr die akzeptierte Antwort ist. Die aktuell akzeptierte Antwort funktioniert ...
Patrick
56

Ich habe eine Lösung mit CSS gefunden. Inspiration kam von diesem Artikel http://css-tricks.com/2708-override-inline-styles-with-css/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
Alan
quelle
11
Toller Tipp, danke! Ich stellte fest, dass ich dies verwenden musste, damit es funktioniert .fb-Kommentare, .fb-Kommentare> span [Stil], .fb_iframe_widget iframe [Stil] {Breite: 100%! Wichtig; }
Und schließlich
1
Musste zu .fb-comments > spanmeiner hinzufügen , weil der Bereich, den FB innen hinzufügt, eine Breite hatte, die über ein Stilattribut festgelegt wurde.
Eric Allen
6
.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }funktioniert bei mir.
Tim
10
Dies ist keine Lösung mehr. Facebook hat die Art und Weise geändert, in der der Iframe gerendert wird. Jetzt wird die Breite im Inneren festgelegt, sodass der Iframe 100% breit sein kann, nicht jedoch der Inhalt.
AlexLopezIT
1
Einverstanden mit AlexLopezIT. Facebook legt die Breite einer ID mit dem Namen fest, der mit "feeback_" im iframe beginnt und den Sie nicht ändern können. Hier ist ein Link mit dem nächsten, den ich bisher zu einer Lösung gesehen habe: stackoverflow.com/questions/22491401/…
Jayden Lawson
9

Ich habe es geschafft, es mit diesem Code zum Laufen zu bringen:

.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;

}

weil ich in meiner HTML-Datei Folgendes habe:

<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>

Tipp: Sie sollten Ihr CSS abhängig von der div-Klasse ändern.

Sergiu Octavian
quelle
Das funktioniert nicht mehr. Facebook legt jetzt die Breite eines Divs im Iframe fest.
Jayden Lawson
Das funktioniert bei mir, aber ich habe .fb-like in .fb-like-box geändert, weil mein Container .fb-like-box ist.
Juni Brosas
7

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/ :

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.

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:

.fb-comments, .fb-comments iframe[style], .fb-comments span {
   width: 100% !important;
}

Dies führt dazu, dass sich das Plugin an den aktuell verfügbaren Speicherplatz anpasst, wenn Sie die Größe des Browsers ändern

mikel
quelle
Schade, dass dies immer noch statisch ist. Bei weitem die beste Antwort, da dies immer noch nützlich sein wird, wenn Facebook jemals das Plugin ändert. Aber ohne das zusätzliche CSS lässt sich dies nicht dynamisch skalieren ... Ich habe eine Kombination Ihrer Lösung mit hinzugefügten .fb-Kommentaren, .fb-Kommentaren iframe [Stil], .fb-Kommentaren span {width: 100%! Important ;} im CSS, was es sehr reaktionsschnell gemacht hat! Soll ich diese Antwort entsprechend bearbeiten?
Patrick
5

Wenn Sie das offizielle WordPress-Facebook-Plugin aufgrund des mobilen Schnüffelns von Facebook verwenden, tun Sie dies.

Die mobile Version wird automatisch angezeigt, wenn ein Benutzeragent für mobile Geräte erkannt wird. Sie können dieses Verhalten deaktivieren, indem Sie den Parameter mobile auf false setzen. Bitte beachten Sie: Die mobile Version ignoriert den Parameter width und hat stattdessen eine flüssige Breite von 100%, um die Größe in Hoch- / Querformat-Wechselsituationen gut zu ändern. Möglicherweise müssen Sie Ihr CSS für Ihre mobile Site anpassen, um dieses Verhalten zu nutzen. Bei Bedarf können Sie die Breite weiterhin über ein Containerelement steuern. http://developers.facebook.com/docs/reference/plugins/comments/

Sie müssen die Datei facebook / social-plugins / fb-comment.php in Zeile 35 ändern.

<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>

Dies ermöglicht es Ihnen, mit den folgenden zu stylen.

.fb-social-plugin {
    width:98%!important;

}

.fb_iframe_widget span {
    width:100%!important;
}

.fb-comments iframe[style] {width: 100% !important;}

Es wäre schön, wenn sie entweder ihre mobile Version reparieren oder eine Einstellung auf der GUI ihres Plugins vornehmen könnten.

jnowland
quelle
Funktioniert dies mit dem neuen Facebook-Code, wenn man bedenkt, dass ein Div jetzt eine festgelegte Breite innerhalb des Iframes hat?
Jayden Lawson
5

Es wird definitiv nur zum Hinzufügen .fb-comments spanvon Stil funktionieren .

.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
Abdul Shakoor Kakar
quelle
Nicht mehr. Siehe obige Kommentare.
Jayden Lawson
4

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).

.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Danwild
quelle
1
Das funktioniert auch nicht mehr. Facebook legt jetzt die Breite eines Divs im Iframe fest.
Jayden Lawson
3

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 ...

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}

Das .fb_iframe_widget und das .fb_iframe_widget [style] schienen beide wichtig zu sein.

Arnonat
quelle
Das hat vielleicht in der Vergangenheit funktioniert, aber Facebook hat seinen Code aktualisiert, sodass dies nicht mehr funktioniert.
Jayden Lawson
Ja. Diese Frage war von vor 2 Jahren Jayden.
Arnonate
2

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.

Steve Eldridge
quelle
2

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.

Murdaugh
quelle
2

Für diejenigen, die den HTML5- Code für Facebook-Plugins wie den Aktivitäts-Feed oder die Like-Box bevorzugen :

/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .fb_iframe_widget span[style], .fb_ltr[style] {
    width:420px !important;
    }
}
  • Funktioniert nicht mit Kommentaren oder prozentualer Breite. Halten Sie sich an den Iframe-Code, wenn Sie reine Fluidität benötigen.
  • H / T an Alan für den CSS-Tricks-Link oben auf dieser Seite. (:
phpwns
quelle
2

Fügen Sie dies einfach entweder in Ihre CSS-Datei oder in Ihren HTML-Code mit Style-Tags ein !!!

<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe     span[style]{width: 100% !important;}
</style>

Ref: http://dwij.co.in/making-facebook-comments-responsive

Webentwickler in Pune
quelle
2

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-pageaufgerufene Widget adapt-container-width, die (gemäß den Dokumenten ) die Breite der Eltern verfolgen soll (bis zu einer maximalen Breite von 500px). Beim erneuten Rendern mit FB.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:

  1. Erstellen Sie ein Element mit dem Codegenerator von FB (oben auf dieser Seite ).
  2. Binden Sie ein Ereignis an windowdie resizeMethode von (optional _.debouncemit einer sinnvollen Grenze, um zu verhindern, dass der Browser mit den Zwischenanforderungen überlastet wird
  3. Warten Sie, bis Facebook mehr von der Widget-API verfügbar macht, damit wir sehen können, was zum Teufel los ist

    <div class="fb-page"
        data-adapt-container-width="false" <!-- This bit's the important part -->
        data-href="https://www.facebook.com/yourpage"
        data-show-posts="true"
        data-small-header="true"
        data-width="100%"
    >
        <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote>
        </div>
    </div>
    

kombiniert mit folgendem Javascript:

    // FB Resize
    $(window).bind('resize', _.debounce(function() {

        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            var el = $('.fb-page');
            var width = el.parent().width();
            el.attr('data-width', width);

            FB.XFBML.parse();
        }
    }, 1000)); // Debounce until 1000ms have passed
blast_hardcheese
quelle
1

Dies ist JQuery und könnte Teil der Antwort auf Ihre Frage sein. Ich verwende die HTML5-Version der Schaltfläche "Gefällt mir":

<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>

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.

$(window).resize(function() {
  var computed_width = $('div.main-content').width();    
  $('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height:  24px; width: ' + computed_width + 'px');
});
Brian McFann
quelle
1

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

 #fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}

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.

Joel
quelle
1

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.

.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
Joshua Pekera
quelle
1

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.

// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
Aaron Klump
quelle
1

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.

Solomon Kleinsmith
quelle
Frage mich, ob das eine neue Fähigkeit ist? Ich werde später testen. Vielen Dank!
Chaddeus
1

Hier ist eine kleine Problemumgehung, bei der das HTML5 Facebook LikeBox-Plugin mit einer Antworthöhe oder -breite an das DOM angehängt wird.

        $(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("<div class='fb-like-box' 
                                         data-href='"+page_url+"' 
                                         data-width='"+widget_width+"' 
                                         data-height='"+widget_height+"' 
                                         data-colorscheme='dark' 
                                         data-show-faces='true' 
                                         data-border-color='#222' 
                                         data-stream='true' 
                                         data-header='true'>
            </div></div>");
        });
Donald Derek
quelle
1

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

<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
    .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
        width: 100%;/* !important; To get the control with JQuery*/
    }
</style>

<body>
    <div id="fb-root"></div>
    <script>
       window.fbAsyncInit = function() {
        FB.init({
                appId   : 'APP_ID',
                channelUrl : '//domain.com/channelUrl.php',
                status  : true, 
                cookie  : true,
                xfbml   : true
            });

        //Event fired when the plugin has been completely loaded
        FB.Event.subscribe('xfbml.render',
            function(response) {
                //alert('You liked the URL: ' + response);
                var w = (typeof window.innerWidth != 'undefined')?
                           window.innerWidth
                        :(typeof document.documentElement != 'undefined'
                         && typeof document.documentElement.clientWidth !=
                         'undefined' && document.documentElement.clientWidth != 0) ?
                           document.documentElement.clientWidth
                        : document.getElementsByTagName('body')[0].clientWidth;

                w *= .950; //95% for best fit on mobile screens
                //RESIZE
                $(".fb-comments").css("width",w);
                $(".fb-comments > span").css("width",w);
                //Some days ago the next line would be sufficient                       
                $(".fb_ltr").css("width",w);
                //Now the modify of the span width is necessary to do the work

                $("#div_loading_gif").remove();



            }
        );

      };

      //cargando SDK Asíncronamente
      (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
      }(document));



    </script>

    <div id="div_loading_gif" style="width:100%;  height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >

    </div>

    <!--Usando jquery modificar el style de el div de clase fb_ltr
    cambiar el ancho por el de la pantalla-->
    <div class="fb-comments"
        style="padding:0 auto;"
        data-href="http://domain.com/comments.html" 
        data-width="100px" 
        data-num-posts="5"
        data-mobile="false"
        >
    </div>



</body>

Chrifer7
quelle
0

Ich denke, es max-widthist besser als widthin diesem Fall, und es funktioniert für mich:

.fb-comments, .fb-comments iframe[style], .fb-comments span {
  width: 100% !important;
}
Dorian
quelle
0

Das funktioniert bei mir

/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
    display: inline !important;
}

.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width: 100% !important;
}
Ahmad Ajmi
quelle
0

Ich habe es gerade versucht und es scheint, dass es jetzt ein <div>innerhalb des gibt iframe, das eine feste Breite hat, was bedeutet, dass Sie das styleTag 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

blues_driven
quelle
1
Denke, dies ist der einzige Weg, dies jetzt zu tun. Stackoverflow.com/a/22328835/2553149
blues_driven
Einverstanden mit @blues_driven - dieser Link ist perfekt.
Jayden Lawson
Dies ist die Facebook-Ausgabe developer.facebook.com/x/bugs/256568534516879
blues_driven
1
Dieses Problem wurde jetzt von Facebook behoben. Sie können jetzt die Breite-Option auf 100%oder hinzufügendata-width="100%
blues_driven
0

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:

$(document).ready(function(){
    $('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});

ps Sie können PARENT DIV durch jedes andere Element ersetzen, mit dem das Kommentarfeld übereinstimmen soll, und WWW.YOURSITEHERE.COM mit Ihrer Site

pashOCONNOR
quelle
Ich bin mir nicht sicher, ob dies für das Kommentarfeld funktioniert, da fb eine Pixelbreite in seinem Iframe fest codiert, die nicht geändert werden kann.
Jayden Lawson
@JaydenLawson -> Live - Beispiel hier (wenn Sie dann neue Breite erhalten resize aktualisieren): whisperingforest.org/#/quote/40
pashOCONNOR
Das fb-Kommentarfeld wurde beim ersten Versuch nicht geladen, was seltsam war. Es wurde jedoch beim Aktualisieren geladen. Dies wird angezeigt, wenn ich die Größe des Fensters ändere : screencast.com/t/0Jrrw8EWZ . Es wird nicht bei weiteren Aktualisierungen geladen. Ich verstehe, was du meinst, und das scheint eine gute Lösung zu sein. Sie müssen nur das gesamte Kommentarfeld beim Ändern der Fenstergröße aktualisieren.
Jayden Lawson
1
@JaydenLawson -> Überprüfen Sie die Antwort. Ich habe sie mit einer neuen Lösung bearbeitet, die ich heute bei der Arbeit an der Website eines Kunden gefunden habe. Sie funktioniert jetzt reibungsloser, anstatt zu versuchen, das Laden von Facebook zu unterbrechen. Jetzt wird sie mit Daten geladen. width tag auf die Breite eines ausgewählten div gesetzt.
PashOCONNOR
0

Das funktioniert bei mir:

 $('.fb-comments').attr('data-width', '100%');
krishna kinnera
quelle
0

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 () {

//check for device width and reformat facebook comments
function fbCommentWidth() {
    jQuery('.fb-comments').attr('data-width',jQuery('#content').width());

}
//run on resize, and reparse FB comments box    
jQuery(window).on('resize',function() {
    fbCommentWidth();
    FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();

});

Wade Sonenberg
quelle
0

So funktioniert es: Fügen Sie einfach diese Datenbreite = "100%" hinzu. Hier ein Beispiel:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
ukando
quelle
0

Folgendes habe ich erreicht:

(function() {
    window.addEventListener('load', updateWidth);
    window.addEventListener('resize', debounce(function () {
        updateWidth();
        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            FB.XFBML.parse();
        }
    }, 1000));

    function updateWidth() {
        $('.fb-like, .fb-comments').each(function () {
            var el = $(this);
            var width = el.parent().width();
            el.attr('data-width', width);
        })
    }

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
})();
karser
quelle