Is it possible to set a fluid width for Facebook's social plugins?

后端未结

关注

 29  1256

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

相关标签:

29条回答

野趣味

2020-12-22 19:07
It will definitely work just for adding .fb-comments span in style.
```
.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2020-12-22 19:07

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)

抹茶落季

2020-12-22 19:08
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)
发布评论:

提交评论
- 加载中...
渐次进展

2020-12-22 19:08
Joining the uninformed masses with my own solution to this problem, as of September, 2015:

Facebook provides an option to the fb-page widget called adapt-container-width, which (according to the docs,) should track the parent's width (up to a maximum width of 500px). When rerendering with FB.XFBML.parse(), the widget seems to get stuck on a strange value for the parent's container width, despite what you set on the actual widget itself. For now, this works well enough:
1. Create element using FB's code generator (at the top of this page)
2. Bind an event to window's resize method, (optionally using _.debounce with a sensible limit to prevent overloading the browser with the intermediate requests
3. Wait for Facebook to expose more of the widget API so we can see what the hell is going on
```
<div class="fb-page"
    data-adapt-container-width="false" 
    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>
```
combined with the following 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
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
粉色の甜心

2020-12-22 19:10
none of these methods worked but using this idea, the following worked for me:
```
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
我在风中等你

2020-12-22 19:11
If you are using the official wordpress facebook plugin due to the mobile sniffing facebook do.

The mobile version will automatically show up when a mobile device user agent is detected. You can turn this behavior off by setting the mobile parameter to false. Please note: the mobile version ignores the width parameter, and instead has a fluid width of 100% in order to resize well in portrait/landscape switching situations. You may need to adjust your CSS for your mobile site to take advantage of this behavior. If preferred, you can still control the width via a container element. http://developers.facebook.com/docs/reference/plugins/comments/

You will need to change the facebook/social-plugins/fb-comments.php on line 35.
```
<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>
```
This will allow you to style with the below.
```
.fb-social-plugin {
    width:98%!important;

}

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

.fb-comments iframe[style] {width: 100% !important;}
```
It would be nice if they could either fix their mobile version or put a setting on their plugins GUI.
0 讨论(0)
发布评论:

提交评论
- 加载中...