wake-up-neo.com

Responsive Breite Facebook Page Plugin

Facebook hat ein neues Seiten-Plugin eingeführt, um das Like-Box-Plugin zu ersetzen.

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

Ich ersetze das Like Box-Plugin durch dieses neue Plugin. Auf einigen Websites habe ich diesen CSS-Code verwendet, um das Plugin in einem Element ansprechbar zu machen:

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

Ersetzen Sie dies durch diesen Code nicht funktionieren:

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

Mein Seiten-Plugin-Code sieht folgendermaßen aus (stellt kein Datenbreiten-Attribut bereit):

<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

Es sieht so aus, als hätte Facebook ein div-Element mit einem Inline-Style-Element innerhalb des vom iframe geladenen DOM hinzugefügt:

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

Wenn Sie diese Breite auf 100% einstellen, wird jedes Element mit Ausnahme des Titelfotos auf die gesamte Breite ausgerichtet.

Es ist möglich, diesem neuen Page-Plugin ein responsives Verhalten zu geben, genau wie beim Like-Box-Plugin.

44

Das neue "Page Plugin" von Facebook reicht von 180px bis 500px gemäß der Dokumentation.

  • Wenn unter 180px konfiguriert, erzwingt dies eine Mindestbreite von 180px.
  • Wenn über 500px konfiguriert, wird eine maximale Breite von 500px erzwungen.

Wenn Adaptive Width markiert ist, zB:

enter image description here

Im Gegensatz zu Like-Box setzt dieses Plugin seine Grenzen durch, indem es bei falscher Konfiguration an den Grenzwerten bleibt.

Für kleine Bildschirme/Responsive Verhalten

  • Erzwingen Sie beim Rendern auf kleineren Bildschirmen desiered width im Plugin-Container, und das Plugin würde versuchen, darin zu passen.

  • Das Plugin wird automatisch mit geringerer Breite wiedergegeben (um in kleinere Bildschirme zu passen), wenn der Container schlanker als der konfigurierte width ist.

  • Sie können den Container auf Mobilgeräten verkleinern, und das Plugin passt so lange hinein, wie es für 180px mindestens erforderlich ist.

Ohne adaptive width

enter image description here

  • Das Plugin wird unabhängig von der Containerbreite mit der angegebenen Breite gerendert
40
Yugal Jindle

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.

27
Robert Smith

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>
12
2046

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.

9
Elon Zito

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.

4

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;
}
3
Io Ctaptceb

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

3
storsoc

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>


Semi-responsive, da sich das Plug-In bei der Größenänderung der Seite nicht selbst ändert Die Größe hängt von der Größe des Bildschirms ab, wenn das Plugin geladen wird.

3
gldraphael

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

2
li_developer

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!

2
user6307854

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.

1
Gediminas

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

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();
0
Nick Straguzzi

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);
});
0
Razvan Grigore