Is it possible to set a fluid width for Facebook&#

I'm developing a site around the "responsive design" concept, but the facebook social plugins are static width and "break" the layout when it's re-sized.

Using media queries, I've set the plugins to hide on low-res browsers (mobile, etc...). However, on desktop browsers, when the browser window is re-sized smaller, but not so small to hide the plugins, they break out of the layout.

Any way to set a fluid width for the Facebook social plugins?

标签： facebook-social-plugins responsive-design

29条回答

叼着烟拽天下

2楼-- · 2019-01-29 20:37

The correct working answer is a combination of things I found here. Mikel's answer is a good start:

Facebook Developers Platform link

This says:

We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.

But... This will load the width of what's available to the plugin at loading time. When you resize your page it will remain the same width it had when you loaded the page. To fix this - and make a true responsive version of the Facebook Social Plugin - Add the following in your CSS:

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

This will cause the plugin to resize to the available space as you resize the window.

If you want this code to work for the page plugin, change the class-name 'fb-comments' to 'fb-page':

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

(thanks for the addition Black_Stormy!)

0人赞添加讨论(0) 举报

贼婆χ

3楼-- · 2019-01-29 20:38

I think max-width is better than width in this case, and it works for me:

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

0人赞添加讨论(0) 举报

太酷不给撩

4楼-- · 2019-01-29 20:38

This works for me:

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

0人赞添加讨论(0) 举报

神经病院院长

5楼-- · 2019-01-29 20:39

I managed to make it work by using this code:

.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;

}

because in my html file I have this:

<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>

Tip: You should change your css depending of the div class.

0人赞添加讨论(0) 举报

何必那么认真

6楼-- · 2019-01-29 20:39

This works for me

/* 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人赞添加讨论(0) 举报

叼着烟拽天下

7楼-- · 2019-01-29 20:41

Here's a complete example, using jQuery, with a response width and a loading image. The CSS code of Alan and Jubair is commented in the code.

That's works fine in an 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>

0人赞添加讨论(0) 举报

1 2 3 4 5 下一页

Is it possible to set a fluid width for Facebook&#

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间