css - einfügen - Wie man Facebook-Kommentare Widget eine flüssige Breite machen?



title tag wordpress (13)

Ist es möglich, das Kommentar-Widget von Facebook flüssig zu gestalten? Ihre documentation zeigt ein Feld für die Breite der fb:comments xfbml oder iframe, die wie folgt angegeben ist:

  • Breite - die Breite des Plugins in Pixel. Empfohlene Mindestbreite: 400 px.

Also vielleicht ist es nicht möglich ...

https://ffff65535.com


Alan, deine Lösung funktionierte, aber es sieht so aus, als ob facebook ihr Plugin aktualisiert und den Stil gebrochen hat. Ich habe es wieder mit dem universellen Selektor funktioniert:

.fb-comments, .fb-comments * {
    width:100% !important;
}

Dies funktionierte für mich, aber ich muss Span-Tag hinzufügen, um richtig zu funktionieren:

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

Dieses Problem wurde von Facebook behoben. Du kannst nun data-width="100%" hinzufügen oder die width-Option auf 100% und alle verrückten js-Hacks löschen, wie es angemessen ist!


Fügen Sie diesen Code ein, bevor Sie das Facebook-Plugin initialisieren, und Sie werden flüssige FB-Kommentare erhalten :) :) :)

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

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

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

Ich denke, ich habe eine Lösung, die ein wenig besser auf Ryan's Antwort vom 5. März verbessert.

Anstatt den Facebook-Iframe nach einer Verzögerung erneut zu laden, könnten Sie Folgendes tun.

Fügen Sie ein normales Facebook-Kommentartag ein, fügen Sie jedoch ein zusätzliches Bit an die Klasse an, damit Facebook es nicht erkennt, aber Sie können.

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

Dann füge ein JS hinzu, das dieses Div-up auswählt, es mit der gewünschten Breite modifiziert und dann den Facebook-Parser auslöst.

var foundFBComs = false;

$('.fb-comments-unloaded').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== 'undefined') {
    FB.XFBML.parse();
}


Ich möchte generell vermeiden, den universellen Selektor für bessere Leistung zu verwenden. Sie sollten das gleiche Ergebnis mit erhalten können

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

Könnte wahrscheinlich verbessert werden, wenn Sie die Facebook-Selektoren überprüfen ...


Ich weiß, das ist eine alte Frage, aber das kann vielleicht jemandem helfen.

Sie können den folgenden Code verwenden, um Ihre Kommentare flüssig zu gestalten


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

Kann den Code hier überprüfen, da die Pre-Funktion hier einige Dinge löscht. Ich bin neu hier. Grüße

Facebook Kommentare flüssig


Keine der CSS-Lösungen funktionierte für mich ab März 2014. Es scheint, dass Facebook das Plugin geändert hat, um jetzt eine Breite auf einen Container innerhalb des iFrame zu setzen, den Sie nicht mit CSS überschreiben können.

Nach ein wenig graben bemerkte ich, dass die Breite der Kommentare tatsächlich durch den letzten Parameter des iframe src width=XXX gesteuert wird. In diesem Sinne, hier ist, wie ich es gelöst habe:

// ON PAGE LOAD
setTimeout(function(){
  resizeFacebookComments();
}, 1000);

// ON PAGE RESIZE
$(window).on('resize', function(){
  resizeFacebookComments();
});

function resizeFacebookComments(){
  var src   = $('.fb-comments iframe').attr('src').split('width='),
      width = $('#container').width();

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

#container ist die Breite des Containers, in den das Kommentar- #container soll. Ändern Sie dies zu dem, was Sie benötigen, und dieser Code sollte für Sie arbeiten.

Ich verwende eine Zeitüberschreitung, weil ich sie nicht auslösen konnte, nachdem der Iframe geladen wurde. Irgendwelche Hilfe dazu würde geschätzt werden, aber die Zeitüberschreitung macht den Job.

EDIT: Diese Lösung bewirkt, dass die Zurück-Taste bricht. Ich versuche diese Lösung jetzt und es scheint besser zu sein: https://.com/a/22257586/394788


Nachdem ich mich lange damit auseinandergesetzt habe, habe ich einen Leckerbissen gefunden, der dir helfen soll herauszufinden, welche der CSS-Tricks auf dieser Seite für deine spezielle Seite / Version / Jahr des Kommentars von Facebook hilfreich sind. Schaue deine Website in einem Browser an und untersuche die Elemente rund um das Facebook-Kommentar-Plugin. Sie sollten ein Snippet finden, das Sie hinzugefügt haben und jetzt mit dem JavaScript-Widget von Facebook versehen ist, das in etwa so aussieht:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

Beachten Sie den Teil, der sagt:

class="<whatever class your version is using>"

Dies ist die Klasse, die Sie verwenden möchten. In meinem obigen Beispiel möchten Sie die folgenden Stile hinzufügen:

<style>
    .fb_iframe_widget,
    .fb_iframe_widget iframe[style],
    .fb_iframe_widget span[style],
    .fb_iframe_widget *  {
        width: 100% !important;
    }
</style>

Wenn der Code Ihres Facebook Comments Plugin wie folgt aussieht (XFBML):

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

Dann sollte das folgende CSS die Arbeit erledigen:

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


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




xfbml