wake-up-neo.com

Ist es möglich, eine Fließbreite für die Social Plugins von Facebook festzulegen?

Ich entwickle eine Website rund um das "Responsive Design" -Konzept, aber die Facebook-Plugins für soziale Netzwerke haben eine statische Breite und "brechen" das Layout, wenn die Größe geändert wird.

Bei der Verwendung von Medienabfragen habe ich die Plugins so eingerichtet, dass sie auf Browsern mit niedriger Auflösung (mobil usw.) ausgeblendet werden. Wenn auf dem Desktop-Browser jedoch die Größe des Browser-Fensters kleiner, aber nicht so klein ist, um die Plug-Ins auszublenden, wird das Layout ausgeblendet.

Gibt es eine Möglichkeit, eine Fluidbreite für die Facebook-Plugins für soziale Netzwerke festzulegen?

72
Chaddeus

Die richtige funktionierende Antwort ist eine Kombination von Dingen, die ich hier gefunden habe. Die Antwort von Mikel ist ein guter Anfang:

Link zur Facebook-Entwicklerplattform

Das sagt:

Wir haben dafür eine Lösung vorgeschlagen. Ab jetzt können Sie die Breite angeben als 100% (z. B. Datenbreite = "100%"), um ein fließendes Layout zu erhalten. Dokumente sind Auch aktualisiert: https://developers.facebook.com/docs/plugins/comments Danke für Ihre Geduld.

Aber ... Dadurch wird die Breite des Plugins zur Ladezeit geladen. Wenn Sie die Größe Ihrer Seite ändern, bleibt sie so breit wie beim Laden der Seite. Um dies zu beheben - und eine echte responsive 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 ändert sich die Größe des Plugins auf den verfügbaren Speicherplatz, wenn Sie die Größe des Fensters ändern. 

Wenn Sie möchten, dass dieser Code für das Seiten-Plugin funktioniert, ändern Sie den Klassennamen 'fb-comments' in 'fb-page':

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

(Danke für den Zusatz Black_Stormy!)

35
patrick

keine dieser Methoden funktionierte, aber mit dieser Idee funktionierte Folgendes für mich:

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

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

Ich habe es geschafft, mit diesem Code zu funktionieren: 

.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 Ihre CSS je nach Div-Klasse ändern.

9
Sergiu Octavian

Obwohl dies eine alte Frage ist, ist dies jetzt das Top-Ergebnis von Google für "facebook comment plugin responsive", sodass es immer noch relevant ist. 

Die Problemumgehungen in den anderen Antworten sind nicht mehr erforderlich, da FB dies kürzlich (Mai 2014) am Ende behoben hat.

Von https://developers.facebook.com/x/bugs/256568534516879/ :

Wir haben dafür eine Lösung vorgeschlagen. Ab jetzt können Sie die Breite angeben als 100% (z. B. Datenbreite = "100%"), um ein fließendes Layout zu erhalten. Dokumente sind Auch aktualisiert: https://developers.facebook.com/docs/plugins/comments Danke für Ihre Geduld.

So können Sie jetzt Ihren HTML-Code einfach auf z. 

<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div> 

Und Sie brauchen keine zusätzlichen CSS-Workarounds.

Bearbeiten: Dadurch wird das Plugin erstellt, um die Breite beim Laden an den verfügbaren Speicherplatz anzupassen. Wenn Sie die Größe des Browser-Fensters ändern, bleibt das Plugin auf dieser ursprünglichen Breite. Um es reaktionsschnell zu machen, fügen Sie dies Ihrem CSS hinzu:

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

Dies führt dazu, dass sich das Plugin bei der Größenänderung des Browsers an den derzeit verfügbaren Speicherplatz anpasst 

7
mikel

Es wird definitiv funktionieren, nur um .fb-comments span in style hinzuzufügen.

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

Wenn Sie das offizielle WordPress-Facebook-Plugin verwenden, tun Sie dies aufgrund des mobilen Facebook-Sniffing.

Die Mobilversion wird automatisch angezeigt, wenn ein Mobilgerät Benutzeragent wurde erkannt. Sie können dieses Verhalten deaktivieren, indem Sie .__ einstellen. mobiler Parameter auf false. Bitte beachten Sie: Die mobile Version ignoriert das width-Parameter und hat stattdessen eine Fluidbreite von 100%, um Ändern Sie die Größe in Situationen, in denen Sie zwischen Hoch- und Querformat wechseln. Sie brauchen eventuell Um Ihr CSS für Ihre mobile Website anzupassen, nutzen Sie diese Verhalten. Falls gewünscht, können Sie die Breite weiterhin über ein .__ steuern. Containerelement . http://developers.facebook.com/docs/reference/plugins/comments/

Sie müssen die Zeile facebook/social-plugins/fb-comments.php in Zeile 35 ändern.

<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>

Dies ermöglicht Ihnen, mit dem untenstehenden 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 korrigieren oder eine Einstellung in die Plugins-GUI setzen könnten.

5
jnowland

Die akzeptierte Antwort hat bei mir nicht funktioniert.

Ich habe das von Craig Bailey in den Kommentaren hier gefunden: 

http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress

was vollkommen flüssig ist (getestet in osx ff & safari, ios6).

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

Anscheinend ist dieser Beitrag nicht sehr alt, aber die Antwort hat für mich 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;}

Beide .fb_iframe_widget und .fb_iframe_widget [style] schienen wichtig zu sein.

3
arnonate

Für diejenigen, die den HTML5 -Code für Facebook-Plugins wie den Activity Feed oder 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 Fließfähigkeit benötigen.
  • H/T zu Alan für den CSS-Trick-Link oben auf dieser Seite. (:
2
phpwns

Ein wichtiger Hinweis zu diesem Größenänderungsgegenstand: Wenn das Facebook-Kommentarskript feststellt, dass Sie sich auf einem mobilen Gerät befinden, unterbricht dies dies. Wenn Sie jedoch das <fb:comments>-Tag mit dem Attributwert mobile="false" versehen lassen, werden (vorerst) die Skripts von Facebook Ihr CSS respektieren.

2
murdaugh

Fügen Sie dies 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

Ich habe diese Arbeit mit diesem einfachen Skript gemacht (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 die URL Ihrer Seite verwenden.

Diese Lösung verwendet jQuery. Sie müssen also wissen, wie das funktioniert. Sobald Sie jedoch das Skript zur Ausführung erhalten, funktioniert Ihr responsives Design beim Laden der Seite oder beim Ändern der Seitengröße.

2
Steve Eldridge

Die uninformierten Massen mit meiner eigenen Lösung für dieses Problem verbinden, Stand September 2015:

Facebook bietet eine Option für das fb-page-Widget mit dem Namen adapt-container-width an, das (gemäß den Angaben in docs ,) die Breite des übergeordneten Elements (bis zu einer maximalen Breite von 500px) verfolgen soll. Beim erneuten Rendern mit FB.XFBML.parse() scheint sich das Widget bei einem merkwürdigen Wert für die Containerbreite des übergeordneten Objekts festzusetzen, ungeachtet dessen, was Sie für das eigentliche Widget selbst festgelegt haben. Im Moment funktioniert das gut genug:

  1. Erstellen Sie ein Element mit dem Code-Generator des FB (oben auf dieser Seite ).
  2. Binden Sie ein Ereignis an die window-Methode von resize (optional mit _.debounce mit einer sinnvollen Begrenzung), um eine Überlastung des Browsers mit den Zwischenanforderungen zu verhindern
  3. Warten Sie, bis Facebook mehr Widget-API verfügbar macht, damit wir sehen können, was zur Hölle 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 dem folgenden 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
2

Ich weiß nicht über die Kommentare Bescheid, aber mit dem Link-Feld müssen Sie nur die iframe-Option direkt von Facebook verwenden und die Breite in Pixel um einen Prozentsatz auswechseln. Diese ändert sich je nach Breite der Spalte ist es in.

1

Dies ist JQuery und könnte ein Teil der Antwort auf Ihre Frage sein. Ich verwende die HTML5-Version des Like-Buttons:

<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 der Like-Button in mein Design passen muss. Die Größenänderung funktioniert bis zum div so klein, dass das data-layout-Attribut in div.fb-like von "Standard" in eine Alternative geändert werden muss, die weniger horizontalen Platz benötigt. Ich bin neu bei diesem Thema, daher bin ich mir nicht sicher, ob dies die eleganteste Lösung ist, um den Like-Button-Effekt zu erzeugen. Ich hätte gerne eine Antwort auf diese Frage von jemandem, der eher ein Experte zu diesem Thema 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');
});
1
Brian McFann

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 einem Android-Webview

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

1
Chrifer7

Verwenden Sie das inspect-Element, um zu sehen, welcher Code generiert wird. In einigen Fällen, wie beispielsweise Wordpress-Facebook-Plugins, verwenden sie unterschiedliche "IDs"

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

Dies macht nicht immer den Trick im Lernen. Während Sie Farben ändern können und einige Größen, die es reagieren lassen, ist 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 es nicht funktioniert. Ich spiele mit @media-Abfragen, um die Größe entsprechend der Größe des Browserfensters zu ändern. 

Es wäre schön, wenn die Breite erkannt würde, aber @media scheint der einzige Weg zu sein.

1
Joel

Facebook hat einige Änderungen am ausgegebenen Markup über das Kommentar-Plugin vorgenommen. Ich verwende die HTML5-Version. Dies änderte CSS aus dem, was oben geteilt wurde.

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

Hier einige Jquery-Änderungen, die auch bei Änderungen des Ausgabe-Markups beibehalten werden sollten, da mit einem Regex-Ausdruck nur die Breite neu geschrieben wird und der Rest des style-Tags unverändert bleibt.

Sie müssen die richtige Container-ID oder den richtigen Selektor angeben, um mein Beispiel zu ersetzen: # footer-last. Die Größe des Iframes wird basierend auf den Änderungen in der Breite des Containers geändert, die als responsiv 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);
1
Aaron Klump

Hier ist eine kleine Arbeit, die das HTML5 Facebook LikeBox Plugin mit einer Antworthöhe oder -breite an das DOM anhängt.

        $(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>");
        });
1
Donald Derek

Ich habe es gerade ausprobiert und es scheint, dass es jetzt einen <div> in der iframe gibt, der eine feste Breite hat, was bedeutet, dass Sie das style-Tag tatsächlich mit Javascript entfernen müssen, um es flüssig zu machen.

BEARBEITEN: Mit JS können Sie nicht auf den Iframe-Inhalt zugreifen, da er von einer anderen Domäne stammt

0
blues_driven

Das funktioniert für mich 

/* 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;
}
0
Ahmad Ajmi

Das funktioniert für mich:

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

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>
0
ukando

Erstellen Sie ein leeres div, in dem Sie möchten, dass die Facebook-Box mit der Klasse 'fb-container' (oder ein anderes soziales Plug-in, funktioniert universell) verwendet wird. 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>');
});

p.s. Sie können PARENT DIV durch ein beliebiges anderes Element ersetzen, zu dem das Kommentarfeld passen soll, und WWW.YOURSITEHERE.COM durch Ihre Site.

0
pashOCONNOR

Hier ist was ich endete mit:

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

Ich habe es mit einem kleinen jQuery zum Laufen gebracht und das Attribut "Datenbreite" gesetzt, wenn die Seite geladen wird und die Größe des Fensters geändert wird. Das Problem, dem ich bei allen CSS-Ansätzen begegnet bin, ist, dass einige Kommentare und Schaltflächen außerhalb der Ränder des Containers verborgen waren oder überlaufen.

Hier ist mein $ 0,02, hoffe es hilft. Setzen Sie einfach den #content-Selektor auf das, was Sie möchten, dass das Kommentarfeld übereinstimmt, z.

jQuery (document) .ready (function () {

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

});

0
Wade Sonenberg

Ich denke, max-width ist in diesem Fall besser als width und funktioniert für mich:

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