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

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?

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

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;
}

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;}

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.

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

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.

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

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

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;
}

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.

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.

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.

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

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

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

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');
});

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.

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;}

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

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.

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>");
        });

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>

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;
}

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;
}

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

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

Das funktioniert bei mir:

 $('.fb-comments').attr('data-width', '100%');

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

});

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>

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);
        };
    }
})();