it-swarm.com.de

Wie kann man das Widget für Facebook-Kommentare flüssig machen?

Ist es möglich, das Kommentar-Widget von Facebook mit einer fließenden Breite zu versehen? Ihre Dokumentation zeigt ein Feld für die Breite von fb:comments xfbml oder iframe, das wie folgt angegeben ist:

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

Also vielleicht ist es nicht möglich ...

35
at.

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

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

Alan Ihre Lösung hat funktioniert, aber es sieht so aus, als hätte Facebook ihr Plugin aktualisiert und den Stil gebrochen. Ich habe es wieder mit dem Universalselektor zum Laufen gebracht:

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

Wahrscheinlich nächste Änderung von FB und diesmal funktioniert das besser:


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}
31
Danka Stawarz

Ich glaube, ich habe eine Lösung, die Ryans Antwort vom 5. März ein wenig verbessert.

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

Fügen Sie ein reguläres Facebook-Kommentar-Tag ein, hängen Sie jedoch ein zusätzliches Bit an die Klasse an, damit Facebook es nicht erkennt, aber Sie können es.

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

Fügen Sie dann ein JS hinzu, das dieses Div aufnimmt, mit der gewünschten Breite ändert und dann den Parser von Facebook 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();
}
16
Gav

Ab März 2014 hat keine der CSS-Lösungen für mich funktioniert. Es scheint, dass Facebook das Plugin geändert hat, um nun die Breite eines Containers innerhalb des iFrame festzulegen, den Sie nicht mit CSS überschreiben können.

Nach ein wenig Graben habe ich festgestellt, dass die Breite der Kommentare tatsächlich vom letzten Parameter des iframe src width=XXX gesteuert wird. In diesem Sinne habe ich es gelöst:

// 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 Ihres Containers, die das Kommentar-Plug-In so strecken soll, dass es in den Inhalt passt. Ändern Sie das zu dem, was Sie benötigen, und dieser Code sollte für Sie funktionieren.

Ich benutze eine Auszeit, weil ich es nicht schießen konnte, sobald der iframe geladen wurde. Jede Hilfe wäre willkommen, aber das Timeout erledigt den Job.

BEARBEITEN: Bei dieser Lösung bricht die Zurück-Taste. Ich probiere diese Lösung jetzt aus und es scheint besser zu sein: https://stackoverflow.com/a/22257586/394788

16
Ryan

Dieses Problem wurde von Facebook gelöst. Sie können jetzt data-width="100%" hinzufügen oder die width-Option auf100% setzen und alle verrückten js-Hacks nach Bedarf löschen!

11
blues_driven

fügen Sie diesen Code ein, bevor Sie das Facebook-Plugin initialisieren.

 $(".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);
}
4
spider inside

Ich möchte generell vermeiden, den Universalselektor für eine bessere Leistung zu verwenden. Sie sollten in der Lage sein, das gleiche Ergebnis mit zu erzielen

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

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

4
Jesper

sieht aus wie Facebook ihre Dokumentation aktualisiert hat .. Sie können jetzt data-width = "100%" oder width = "100%" verwenden.

https://developers.facebook.com/docs/plugins/comments/

2
thirdtiu

Ich kann noch nicht kommentieren, da mein Ruf noch nicht hoch genug ist, jedoch gibt es ab dem 21. Dezember 2014 eine Lösung dafür

damit dies in CSS funktioniert:

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

sie MÜSSEN den Bereich data-width = "" im FB-Plugin-Code auf 100% setzen, d. h

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

arbeitsbeispiel mit Fluid Motion: http: www.unitedbiker.org

Ich hoffe, das hilft jedem, die Idee ist, den iframe-Stil auf 100% des übergeordneten Elements zu überschreiben und das eigentliche FB-Plugin auf 100% des iframe festzulegen. Das war meine Arbeit.

2
dav3ydark007

Nachdem ich mich einige Zeit damit beschäftigt hatte, fand ich ein Leckerbissen, das Ihnen helfen sollte herauszufinden, welche CSS-Tricks auf dieser Seite für Ihre Website/Version/Jahr von Facebooks Kommentar-Plugin hilfreich sind. Sehen Sie sich Ihre Website in einem Browser an und prüfen Sie die Elemente rund um das Facebook-Kommentar-Plugin. Sie sollten ein von Ihnen hinzugefügtes Snippet finden, das jetzt durch das Javascript-Widget von Facebook verschönert wird, das etwa so aussieht:

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

beachten Sie den folgenden Teil:

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>
1
TamaraJean

Ich denke, das wird für alle funktionieren. Arbeitet für mich 26. Dezember 2013 unter http://eddie11.com/dj-eddie-talks/

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

Keines der unten aufgeführten hat für mich funktioniert, aber ich habe es trotzdem dort gelassen.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,
1
e11world

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 machen


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

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

Facebook Kommentare Fluid

1
Quimbo

Das hat für mich funktioniert, aber ich muss span Tag hinzufügen, um korrekt zu funktionieren:

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

verbrachte einige Zeit damit, dieses Problem zu untersuchen. Obwohl FB vorschlägt, die absolute Breite in Pixeln anzugeben, funktioniert es, wenn Sie es einfach auf "100%" setzen. Beachten Sie die Datenbreite unten.

<div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>

Ja, ja, das ist einfach, keine Größenrückrufe, keine Änderungen an den Frames.

1
Boris Mossounov

Wenn der Code Ihres Facebook-Kommentar-Plugins folgendermaßen 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;
}
0
ramonztro

Dies ist das einzige, was für mich richtig funktioniert hat!

$(".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").`enter code here`parent().width();

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

Keine Notwendigkeit, die CSS zu überschreiben, verwenden Sie data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>
0
Murhaf Sousli
.fb-comments, .fb-comments iframe[style],  .fb-comments > span {width: 100% !important;}
0
Leo