Responsive Breite Facebook Page Plugin

Dies funktioniert nicht so gut, wenn Sie das Plugin in einer dünnen Spalte platziert haben, wie zum Beispiel in einer Seitenleiste. Bei mittelgroßen Bildschirmen sind diese normalerweise weniger als 280 Pixel breit.

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

Dies ist der Code, den ich verwende, um zu verhindern, dass das Plugin außerhalb eines Verpackungsbehälters bricht. Im Gegensatz zu der alten Like-Box, die gefliest werden würde, läuft diese nur über, was den überlaufenden Inhalt verbirgt.

das funktioniert für mich (die Breite wird durch Javascript erzwungen und das FB-Plugin wird über Javascript geladen)

<div id="fb-root"></div>
<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/en_US/sdk.js#xfbml=1&version=v2.5&appId=443271375714375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

jQuery(document).ready(function($) {
  $(window).bind("load resize", function(){  
  setTimeout(function() {
  var container_width = $('#container').width();    
    $('#container').html('<div class="fb-page" ' + 
    'data-href="http://www.facebook.com/IniciativaAutoMat"' +
    ' data-width="' + container_width + '" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
    FB.XFBML.parse( );    
  }, 100);  
}); 
});

</script>
<div id="container" style="width:100%;">  
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>

Um das neue Facebook Page Plugin auf das Laden der ersten Seite zu reagieren, müssen Sie das data-width-Attribut entfernen und stattdessen hinzufügen

data-adapt-container-width="true"

Dadurch wird das Facebook-Seiten-Plugin ansprechbar, jedoch nur beim Rendern der ersten Seite mit einer Mindestbreite von 180px.

Ich versuche immer noch herauszufinden, wie ich es trotz der Einschränkung von Facebook wirklich dynamisch ansprechen kann (ich werde ein Update posten, wenn ich die Antwort finde).

Keine dynamische Größenänderung

Das Page-Plugin arbeitet mit reaktionsschnellen, flüssigen und statischen Layouts. Sie kann Medienabfragen oder andere Methoden verwenden, um die width des übergeordneten Elements festzulegen Element, noch:

Das Plugin bestimmt seine width beim Laden der Seite. Es wird nicht reagieren ändert sich nach dem Laden der Seite am Boxmodell. Wenn Sie die .__ einstellen möchten. width des Plugins bei der Größenänderung des Fensters, müssen Sie die .__ manuell neu erstellen. Plugin.

Quelle: https://developers.facebook.com/docs/plugins/page-plugin

Sie könnten es dynamisch ansprechbar machen, indem Sie das Widget bei der Browser-Größenänderung neu initialisieren, wie Io Ctaptceb vorschlug, aber dadurch besteht die Gefahr, dass der Speicher sehr schnell belegt wird.

Yugal Jindle hatte eine gute Antwort, aber ich wollte klarstellen, dass Ich muss noch einen Weg finden, um das Plugin wirklich dynamisch reagieren zu lassen.

Ich stelle das hier für diejenigen ein, die das gleiche Problem wie ich hatten und ihre Antwort hier zwischen den Kommentaren oder auf keiner anderen Stackoverflow-Seite finden konnten.

Ich habe das Facebook Page Plugin mit Einstellungen hinzugefügt, um es an die Containerbreite anzupassen.

data-adapt-container-width="true"

Ein oder mehrere Elemente im iframe- oder Javascript-SDK-Element wurden jedoch mit einer Breite von 340 Pixel angegeben, sodass das Seiten-Plugin nicht an die Containerbreite angepasst wird. Es sollte ein Minimum von 180px und ein Maximum von 500px haben.

Dem von Facebook zur Verfügung gestellten Code fehlte jedoch etwas. 

<div class="fb-page" data-href="https://www.facebook.com/Paras-Design-393209377418188" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>

Durch das manuelle Hinzufügen von data-width="500" reagierte das Page Plugin wie erwartet und wurde an die Containerbreite mit einer maximalen Breite von 500px angepasst.

Ich hoffe, das hilft jedem, der das gleiche Problem hat.

für alle, die eine JS-Lösung suchen, die kleiner als 280 ist

hier ist mein Code-Schnipsel: 

facebookScale = function () {
    var adjustWidth;
    adjustWidth = $('.facebook-likebox').width() / 280;
    return $('.fb-page').css({
      '-webkit-transform': 'scale(' + adjustWidth + ')',
      '-moz-transform': 'scale(' + adjustWidth + ')',
      'transform': 'scale(' + adjustWidth + ')'
    });
  }

$(function(){
    $('.fb-page').on('resize DOMSubtreeModified', facebookScale);
    $(window).on('resize', facebookScale);
  })

bearbeiten. Stellen Sie sicher, dass Folgendes in der CSS enthalten ist: 

.fb-page{
  transform-Origin: 0 0;
  -webkit-transform-Origin: 0px 0px;
  -moz-transform-Origin: 0px 0px;
}

Wir haben einige Einschränkungen der Reaktionsfähigkeit des Facebook-Plugins überwunden, indem wir es als IFRAME verwendet haben, aber beim Rendern mit etwas JavaScript, das den Frame (und die Parameter für Breite/Höhe in der SRC-URL) dynamisch skaliert, um das Containerelement zu füllen.

Wenn der Container mehr als 500 Pixel beträgt, fügen Sie eine Skalentransformation mit ein paar einfachen Berechnungen hinzu, um zu vermeiden, dass sich auf der rechten Seite eine offensichtliche Rinne befindet.

Das IFRAME-Onload-Ereignis wird ausgelöst, wenn der SRC anfangs leer ist (wenn wir ihn bootstrapieren) und dann, nachdem der Ladevorgang abgeschlossen ist, wenn wir den SRC festgelegt haben. Wenn das SRC-Attribut jedoch bereits vorhanden ist, wird nur kurz gekürzt.

Bei unserer Verwendung ändern wir die Breite des Facebook-Feeds nicht für die Desktopnutzung, und für Handheld-/Tablet-Ansichtsfenster sind diese Breiten naturgemäß festgelegt (ja, wir fangen die Orientierungsänderung) Wenn Sie die Browser-Fenstergröße ändern, können Sie den Code einfach als Übung für sich selbst auslösen.

Dies wird in Chrome und Safari, auf Desktops und iOS/Android getestet:

<script>
    function setupFBframe(frame) {

        if(frame.src) return; // already set up

        // get parent container dimensions to use in src attrib
        var container = frame.parentNode;

        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

        var src = 'https://www.facebook.com/plugins/page.php' +
                '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
                '&tabs=timeline' +
                '&width=' + containerWidth +
                '&height=' + containerHeight +
                '&small_header=true' +
                '&adapt_container_width=false' + /* doesn't seem to matter */
                '&hide_cover=true' +
                '&hide_cta=true' +
                '&show_facepile=false' +
                '&appId';

        frame.width = containerWidth;
        frame.height = containerHeight;
        frame.src = src;

        // scale up if container > 500px wide
        if(containerWidth) > 500) {
            var scale = (containerWidth / 500 );
            frame.style.transform = 'scale(' + scale + ')';
        }
    }
</script>
<style>
    #facebook_iframe {
        transform-Origin: 0 0;
        -webkit-transform-Origin: 0px 0px;
        -moz-transform-Origin: 0px 0px;
    }
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

BEARBEITEN: Über Transform-Origin vergessen, Notwendigkeit zur Anpassung von links/oben für die Skalierung entfernt. Danke Io Ctaptceb

Ab Graph API 2.3 stellt Facebook folgenden Code für das Kommentar-Plugin bereit:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5">
</div>

Fügen Sie einen data-width="100%" hinzu, um es wie folgt zu reagieren:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5"
    data-width="100%">
</div>

Die akzeptierte Antwort funktioniert für mich nur beim ersten Laden der Seite, aber nachdem die Größe des Browsers geändert wurde oder ich auf Mobilgeräten von Querformat zu Hochformat wechsle, passt sich das Facebook-Plugin (Version 3.2) nicht an meinen Container an. Die Lösung für mich war, einfach die Anpassung an die Plugin-Container-Breite zu überprüfen und einen Listener hinzuzufügen, um zu wissen, wann die Seitengröße geändert wird. Dann entferne ich den Facebook-Iframe und Laden Sie es erneut.

window.addEventListener('resize', this.resize);
resize = () => {
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
    FB.XFBML.parse();
};

Übrigens, ich habe eine Zeitüberschreitung hinzugefügt, um zu vermeiden, dass die Seite mehrfach aktualisiert wird, während der Benutzer die Größe ändert, dies ist jedoch optional

var FB_UPDATE_TIMEOUT = null;

window.addEventListener('resize', this.resize);
resize = () => {
    if(FB_UPDATE_TIMEOUT === null) {
        FB_UPDATE_TIMEOUT = window.setTimeout(function() {
            FB_UPDATE_TIMEOUT = null;
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
            FB.XFBML.parse();
        }, 100);
    }
};

Demo

Ich verwende die von Robert Smith vorgeschlagene Lösung mit maximaler Breite statt Breite:

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

Außerdem benutze ich den Vorschlag von Yugal Jindle und das habe ich auch 

data-width="555"

und 

data-adapt-container-width="true"

Jetzt ist meine Seite in Ordnung! Vielen Dank!

Es scheint, dass sich das Facebook Page Plugin in den letzten 5 bis 7 Jahren überhaupt nicht geändert hat :) Es hat von Anfang an nicht reagiert und funktioniert auch jetzt noch nicht, selbst neue Parameter _Adapt to plugin container width_ funktionieren nicht oder ich nicht Verstehe, wie es funktioniert.

Ich suche nach dem einfachsten Weg, _PLUGIN SIZE 100% WIDTH_ zu machen, und es scheint, dass es nicht möglich ist. Unsinn von seiner besten Seite. Wie lösen Designer dieses Problem?

Ich fand die beste Entscheidung für diese Zeit 2017 Okt:

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

Auf diese Weise wird die Breite der Bildschirmgröße für reaktionsschnelle Bildschirme nicht überschritten, sie sieht jedoch immer noch hässlich aus, da sie sich in einiger Zeit verkürzt und nicht gedehnt hat. Das ist die Wahrheit.

Ich habe die Antwort von Twentyfortysix etwas verfeinert, um das Ereignis erst nach der Größenänderung auszulösen.

Außerdem habe ich die Breite des Fensters überprüft, so dass auf Android keine Neuinitialisierung ausgelöst wird.

(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/en_EN/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    jQuery(document).ready(function($) {
        var oldwidth = $(window).width();
        var timeout;

        var recalc = function() {
          clearTimeout(timeout);
          timeout = setTimeout(function() {
          var container_width = $('#fbcontainer').width();    
            $('#fbcontainer').html('<div class="fb-page" ' + 
            'data-href="YOUR FACEBOOK PAGE URL"' +
            ' data-width="' + container_width + '" data-height="750" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>');
            if(typeof FB !== 'undefined') {
                FB.XFBML.parse( );  
            }  
          }, 100);  
        };

        recalc();

      $(window).bind("resize", function(){  
        if(oldwidth !== $(window).width()) {
            recalc();
            oldwidth = $(window).width();
        }
        }); 
    });

Wie bei anderen habe ich festgestellt, dass das Plugin (über JS) verkleinert werden kann, wenn der Container verkleinert wird, danach jedoch nicht mehr wächst, wenn er erweitert wird.

Das Problem ist, dass die ursprüngliche Funktion FB.XFBML.parse() eine Reihe von untergeordneten Knoten mit festen Stilen in der Dokumentstruktur erstellt und spätere Aufrufe die alten Knoten nicht ordnungsgemäß bereinigen. Wenn Sie es selbst in Ihrem Code tun, ist alles in Ordnung.

Facebook-HTML (Ich habe lediglich ID-Elemente zu den von Facebook bereitgestellten Elementen hinzugefügt, um Unfälle mit Selektoren zu vermeiden):

<div id="divFacebookFeed" class="fb-page" data-href="..." ...>
    <blockquote id="bqNoFeed" cite="(your URL)" class="fb-xfbml-parse-ignore">
        <a href="(your URL)">Your Site</a>
    </blockquote>
</div>

... JQuery-Code, um die Größe des Widgets auf 500 Pixel zu ändern und das innere Fallback-Element beizubehalten:

var bq = $('#bqNoFeed').detach();
var fbdiv = $('#divFacebookFeed');

fbdiv.attr('data-width', 500);
fbdiv.empty();
fbdiv.append(bq);
FB.XFBML.parse();

Hier ist eine dynamische Größenänderung von iframe include way, mit etwas verzögertem Rerender-Ereignis bei Größenänderung

function _facebook() {

    var parent = document.getElementById('facebook');
    var width = (window.innerWidth > 540) ? 500 : window.innerWidth - 40;
    if (parent.firstChild && parent.firstChild.width == width) { return; }
    var url = 'https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width='+width+'&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=YOUR_APP_ID';
    var i = document.createElement('iframe');
    i.src = url;
    i.width = width;
    i.height = 500;
    i.style = 'border:none;overflow:hidden';
    i.scrolling = "no";
    i.frameborder = "0";
    i.allowTransparency = "true";
    while (parent.firstChild) { parent.removeChild(parent.firstChild); }
    parent.appendChild(i);

}

_facebook();

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        _facebook();
    }, 250);
});