Responsive width Facebook Page Plugin

Question

Facebook introduced a new Page Plugin to replace the Like box plugin.

Documentation: https://developers.facebook.com/docs/plugins/page-plugin/

I'm replacing the Like Box plugin with this new plugin. On some websites I've used this CSS code to make the plugin responsive inside a element:

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

Replacing this with this code doet not work:

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

My Page plugin code looks like this (not providing a data-width attribute):

<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

It looks like Facebook has added a div element with a inline style element within the DOM loaded by the iframe:

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

When I adjust this width to 100%, every element is aligned at the full width except the cover photo.

It is possible to give this new Page plugin a responsive behavior just like with the Like box plugin?

User · Answer

It seems that Facebook Page Plugin doesn't change at all in past 5-7 years :) It wasn't responsive from the begining and still not now, even new param Adapt to plugin container width doesn't work or I don't understand how it works.

I'm searching for the most posible simple way to do PLUGIN SIZE 100% WIDTH, and it seems it is not posible. Nonsense at it's best. How designers solve this problem?

I found the best decision for this time 2017 Oct:

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

This lets do not broke screen size width for responsive screens, but still looks ugly, because cuted in some time and doesn't stretch... Facebook doesn't care about plugins design at all. That's the truth.

User · Answer

I m using the solution proposed by Robert Smith with max-width instead of width    fb-page   fb-page span   fb-page span iframe style        max-width  100   important      Also  i m using the Yugal Jindle s proposal and so i ve   data-width  555    and   data-adapt-container-width  true    Now my page is ok  Thank you alot

User · Answer

This doesn t work too well when you have the plugin placed in a thin column  like a sidebar for example  On medium sized screens these typically run smaller than 280px in width    fb-page    fb-page span    fb-page span iframe style         width  100   important       This is the code I use to stop the plugin breaking outside of a wrapping container  Unlike the old like box which would tile  this one just overflows  hiding the overflowed content

User · Answer

The accepted answer works for me only the first time that page is loaded, but after the browser is resized or I change from landscape to portrait in mobile devices the Facebook Plugin (version 3.2) doesn't adapt to my container. The solution for me was just check the Adapt to plugin container width, and add a listener to know when the page is resized then I remove the facebook iframe and load it again.

window.addEventListener('resize', this.resize);
resize = () => {
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
    FB.XFBML.parse();
};

By the way, I added a timeout to avoid multiple refreshing while the user is resizing the page, but it's optional

var FB_UPDATE_TIMEOUT = null;

window.addEventListener('resize', this.resize);
resize = () => {
    if(FB_UPDATE_TIMEOUT === null) {
        FB_UPDATE_TIMEOUT = window.setTimeout(function() {
            FB_UPDATE_TIMEOUT = null;
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
            FB.XFBML.parse();
        }, 100);
    }
};

Demo

User · Answer

Hi everybody   My version with a live demonstration native JavaScript    1   Javascript code in a separate file  the best solution    Codepen   x000D   x000D     Vanilla JS    x000D  function setupFBframe frame    x000D    var container   frame parentNode  x000D   x000D    var containerWidth   container offsetWidth  x000D    var containerHeight   container offsetHeight  x000D   x000D    var src   x000D       https   www facebook com plugins page php    x000D        href https 3A 2F 2Fwww facebook com 2Ffacebook    x000D        amp tabs timeline    x000D        amp width     x000D      containerWidth   x000D        amp height     x000D      containerHeight   x000D        amp small header false    x000D        amp adapt container width false    x000D        amp hide cover true    x000D        amp hide cta true    x000D        amp show facepile true    x000D        amp appId   x000D   x000D    frame width   containerWidth  x000D    frame height   containerHeight  x000D    frame src   src  x000D    x000D   x000D     begin Document Ready                                 x000D                                                  x000D   x000D  document addEventListener  DOMContentLoaded   function     x000D    var facebookIframe   document querySelector   facebook iframe    x000D    setupFBframe facebookIframe   x000D    x000D       begin Window Resize                                 x000D                                                    x000D     x000D       Why resizeThrottler  See more   https   developer mozilla org ru docs Web Events resize x000D     function     x000D      window addEventListener  resize   resizeThrottler  false   x000D   x000D      var resizeTimeout  x000D   x000D      function resizeThrottler     x000D        if   resizeTimeout    x000D          resizeTimeout   setTimeout function     x000D            resizeTimeout   null  x000D            actualResizeHandler    x000D             66   x000D          x000D        x000D   x000D      function actualResizeHandler     x000D        document querySelector   facebook iframe   removeAttribute  src    x000D        setupFBframe facebookIframe   x000D        x000D          x000D       end Window Resize x000D                                                    x000D      x000D     end Document Ready                                 x000D                                                  x000D   import url  https   fonts googleapis com css family Indie Flower    x000D  body   x000D    font-family   Indie Flower   cursive  x000D    x000D   container   x000D    max-width  1170px  x000D    width  100   x000D    margin-left  auto  x000D    margin-right  auto  x000D    x000D   content   x000D    overflow  hidden  x000D    x000D   x000D   left sidebar   x000D    position  relative  x000D    float  left  x000D    width  30   x000D    max-width  300px  x000D    x000D   x000D   main content   x000D    position  relative  x000D    float  left  x000D    width  70   x000D    background-color   DDEFF7  x000D    x000D     ------- begin Widget Facebook --------------    x000D   widget--facebook--container   x000D    padding  10px  x000D    border  1px solid  000  x000D    x000D   x000D   widget-facebook   x000D    height  500px  x000D    x000D   x000D   widget-facebook  facebook iframe   x000D    border  none  x000D    x000D   x000D     ---------- end Widget Facebook----------------    x000D   x000D     ----------------- no need --------------------    x000D   block   x000D    color   fff  x000D    height  300px  x000D    background-color   00A7F7  x000D    border  1px solid  005dff  x000D    x000D   x000D   block h3   x000D    line-height  300px  x000D    text-align  center  x000D    x000D   lt  -- Min  responsive 180px -- gt  x000D   lt div class  container  gt  x000D     lt div class  content  gt  x000D       lt div class  left sidebar  gt  x000D         lt aside class  block  gt  x000D           lt h3 gt Content lt  h3 gt  x000D         lt  aside gt  x000D         lt  -- begin Widget Facebook x000D                                                -- gt  x000D         lt aside class  widget--facebook--container  gt  x000D           lt div class  widget-facebook  gt  x000D             lt iframe id  facebook iframe  class  facebook iframe  gt  lt  iframe gt  x000D           lt  div gt  x000D         lt  aside gt  x000D         lt  -- end Widget Facebook x000D                                                  -- gt  x000D         lt aside class  block  gt  x000D           lt h3 gt Content lt  h3 gt  x000D         lt  aside gt  x000D       lt  div gt  x000D       lt div class  main content  gt  x000D         lt h1 gt Responsive width Facebook Page Plugin lt  h1 gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    2   Javascript code is written in HTML   Codepen   x000D   x000D   import url  https   fonts googleapis com css family Indie Flower    x000D  body   x000D    font-family   Indie Flower   cursive  x000D    x000D   x000D   container   x000D    max-width  1170px  x000D    width  100   x000D    margin-left  auto  x000D    margin-right  auto  x000D    x000D   x000D   content   x000D    overflow  hidden  x000D    x000D   x000D   left sidebar   x000D    position  relative  x000D    float  left  x000D    width  30   x000D    max-width  300px  x000D    x000D   x000D   main content   x000D    position  relative  x000D    float  left  x000D    width  70   x000D    background-color   DDEFF7  x000D    x000D   x000D   x000D     ------- begin Widget Facebook --------------    x000D   x000D   widget--facebook--container   x000D    padding  10px  x000D    border  1px solid  000  x000D    x000D   x000D   widget-facebook   x000D    height  500px  x000D    x000D   x000D   widget-facebook  facebook iframe   x000D    border  none  x000D    x000D   x000D   x000D     ---------- end Widget Facebook----------------    x000D   x000D   x000D     ----------------- no need --------------------    x000D   x000D   block   x000D    color   fff  x000D    height  300px  x000D    background-color   00A7F7  x000D    border  1px solid  005dff  x000D    x000D   x000D   block h3   x000D    line-height  300px  x000D    text-align  center  x000D    x000D   lt  -- Vanilla JS -- gt  x000D   lt  -- Min  responsive 180px -- gt  x000D   lt div class  container  gt  x000D     lt div class  content  gt  x000D       lt div class  left sidebar  gt  x000D         lt aside class  block  gt  x000D           lt h3 gt Content lt  h3 gt  x000D         lt  aside gt  x000D         lt  -- begin Widget Facebook x000D                                                  -- gt  x000D         lt aside class  widget--facebook--container  gt  x000D           lt div class  widget-facebook  gt  x000D             lt script gt  x000D              function setupFBframe frame    x000D                if  frame src  return     already set up x000D   x000D                var container   frame parentNode  x000D                console log frame parentNode   x000D   x000D                var containerWidth   container offsetWidth  x000D                var containerHeight   container offsetHeight  x000D   x000D                var src   x000D                   https   www facebook com plugins page php    x000D                    href https 3A 2F 2Fwww facebook com 2Ffacebook    x000D                    amp tabs timeline    x000D                    amp width     x000D                  containerWidth   x000D                    amp height     x000D                  containerHeight   x000D                    amp small header false    x000D                    amp adapt container width false    x000D                    amp hide cover true    x000D                    amp hide cta true    x000D                    amp show facepile true    x000D                    amp appId   x000D   x000D                frame width   containerWidth  x000D                frame height   containerHeight  x000D                frame src   src  x000D                x000D   x000D              var facebookIframe  x000D   x000D                 begin Window Resize                                 x000D                                                              x000D   x000D                 Why resizeThrottler  See more   https   developer mozilla org ru docs Web Events resize x000D               function     x000D                window addEventListener  resize   resizeThrottler  false   x000D   x000D                var resizeTimeout  x000D   x000D                function resizeThrottler     x000D                  if   resizeTimeout    x000D                    resizeTimeout   setTimeout function     x000D                      resizeTimeout   null  x000D                      actualResizeHandler    x000D                       66   x000D                    x000D                  x000D   x000D                function actualResizeHandler     x000D                  document querySelector   facebook iframe   removeAttribute  src    x000D                  setupFBframe facebookIframe   x000D                  x000D                    x000D                 end Window Resize x000D                                                              x000D             lt  script gt  x000D             lt iframe id  facebook iframe  class  facebook iframe  onload  facebookIframe   this  setupFBframe facebookIframe   gt  lt  iframe gt  x000D           lt  div gt  x000D         lt  aside gt  x000D         lt  -- end Widget Facebook x000D                                                  -- gt  x000D         lt aside class  block  gt  x000D           lt h3 gt Content lt  h3 gt  x000D         lt  aside gt  x000D       lt  div gt  x000D       lt div class  main content  gt  x000D         lt h1 gt Responsive width Facebook Page Plugin lt  h1 gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laborum earum  temporibus  maxime repudiandae obcaecati veritatis  odio dolore provident tenetur perferendis ipsam  rem esse vitae laudantium voluptatem iste aliquam optio ab  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Thanks storsoc   All the best to you all and have a nice day

User · Answer

We have overcome some limitations of the responsiveness of the Facebook plugin by using it as an IFRAME, but bootstrapping at render time with some JavaScript that dynamically sizes the frame (and width/height parameters in the SRC URL) to fill the container element.

If the container is greater than 500px, to avoid having an obvious gutter on the right hand side, we simply add a scale transform with some simple math.

The IFRAME onload event fires when SRC is initially empty (when we bootstrap it) and then again after it finishes loading when we set the SRC, but we simply short-out if SRC attribute already exists.

In our usage, we don't change the width of the Facebook feed for desktop usage, and for handheld/tablet viewports, those widths are fixed by nature (yes, we trap orientation change) but if you want yours to continually adjust if the browser window dimensions change, you could just re-fire the code as an exercise for yourself.

This is tested in with Chrome and Safari, on desktop and iOS/Android:

<script>
    function setupFBframe(frame) {

        if(frame.src) return; // already set up

        // get parent container dimensions to use in src attrib
        var container = frame.parentNode;

        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

        var src = 'https://www.facebook.com/plugins/page.php' +
                '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
                '&tabs=timeline' +
                '&width=' + containerWidth +
                '&height=' + containerHeight +
                '&small_header=true' +
                '&adapt_container_width=false' + /* doesn't seem to matter */
                '&hide_cover=true' +
                '&hide_cta=true' +
                '&show_facepile=false' +
                '&appId';

        frame.width = containerWidth;
        frame.height = containerHeight;
        frame.src = src;

        // scale up if container > 500px wide
        if(containerWidth) > 500) {
            var scale = (containerWidth / 500 );
            frame.style.transform = 'scale(' + scale + ')';
        }
    }
</script>
<style>
    #facebook_iframe {
        transform-origin: 0 0;
        -webkit-transform-origin: 0px 0px;
        -moz-transform-origin: 0px 0px;
    }
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

EDIT: Forgot about transform-origin, removed need for adjusting left/top to accommodate scale. Thanks Io Ctaptceb

User · Answer

Facebook s new  Page Plugin  width ranges from 180px to 500px as per the documentation    If configured below 180px it would enforce a minimum width of 180px If configured above 500px it would enforce a maximum width of 500px   With Adaptive Width checked  ex     Unlike like-box  this plugin enforces its limits by sticking to the boundary values if mis-configured   For small screens   Responsive behaviors   When rendering on smaller screens  enforce desiered width on the plugin container and plugin would try to fit in  The plugin renders at a smaller width  to fit in smaller screens  automatically  if the container is of slimmer than the configured width  You can scale down the container on mobile and the plugin will fit in as long as it gets the minimum of 180px to fit in    Without Adaptive Width     The plugin will render at the width specified  irrespective of the container width

User · Answer

this works for me  the width is forced by javascript and FB plugin loaded via javascript    lt div id  fb-root  gt  lt  div gt   lt script gt  function d  s  id      var js  fjs   d getElementsByTagName s  0     if  d getElementById id   return    js   d createElement s   js id   id    js src      connect facebook net en US sdk js xfbml 1 amp version v2 5 amp appId 443271375714375     fjs parentNode insertBefore js  fjs     document   script    facebook-jssdk      jQuery document  ready function          window  bind  load resize   function        setTimeout function       var container width       container   width                container   html   lt div class  fb-page            data-href  http   www facebook com IniciativaAutoMat           data-width      container width      data-tabs  timeline  data-small-header  true  data-adapt-container-width  true  data-hide-cover  false  data-show-facepile  true  gt  lt div class  fb-xfbml-parse-ignore  gt  lt blockquote cite  http   www facebook com IniciativaAutoMat  gt  lt a href  http   www facebook com IniciativaAutoMat  gt Auto Mat lt  a gt  lt  blockquote gt  lt  div gt  lt  div gt         FB XFBML parse              100                lt  script gt   lt div id  container  style  width 100    gt     lt div class  fb-page  data-href  http   www facebook com IniciativaAutoMat  data-tabs  timeline  data-small-header  true  data-adapt-container-width  true  data-hide-cover  false  data-show-facepile  true  gt  lt div class  fb-xfbml-parse-ignore  gt  lt blockquote cite  http   www facebook com IniciativaAutoMat  gt  lt a href  http   www facebook com IniciativaAutoMat  gt Auto Mat lt  a gt  lt  blockquote gt  lt  div gt  lt  div gt   lt  div gt

User · Answer

I refined Twentyfortysix answer a bit  to only trigger the event after the resize is done   In addition I added check for the width of the window  so it won t trigger the reinitialisation on Android    function d  s  id          var js  fjs   d getElementsByTagName s  0         if  d getElementById id   return        js   d createElement s   js id   id        js src      connect facebook net en EN sdk js xfbml 1 amp version v2 3         fjs parentNode insertBefore js  fjs         document   script    facebook-jssdk          jQuery document  ready function              var oldwidth     window  width            var timeout           var recalc   function               clearTimeout timeout             timeout   setTimeout function               var container width       fbcontainer   width                        fbcontainer   html   lt div class  fb-page                    data-href  YOUR FACEBOOK PAGE URL                   data-width      container width      data-height  750  data-adapt-container-width  true  data-hide-cover  false  data-show-facepile  true  data-show-posts  true  gt  lt div class  fb-xfbml-parse-ignore  gt  lt blockquote cite  YOUR FACEBOOK PAGE URL  gt  lt a href  YOUR FACEBOOK PAGE URL  gt YOUR FACEBOOK PAGE TITLE lt  a gt  lt  blockquote gt  lt  div gt  lt  div gt                 if typeof FB      undefined                     FB XFBML parse                                    100                         recalc             window  bind  resize   function              if oldwidth       window  width                  recalc                oldwidth     window  width

User · Answer

for those of you looking for a JS solution to sizes smaller than 280

here is my code snippit:

facebookScale = function () {
    var adjustWidth;
    adjustWidth = $('.facebook-likebox').width() / 280;
    return $('.fb-page').css({
      '-webkit-transform': 'scale(' + adjustWidth + ')',
      '-moz-transform': 'scale(' + adjustWidth + ')',
      'transform': 'scale(' + adjustWidth + ')'
    });
  }

$(function(){
    $('.fb-page').on('resize DOMSubtreeModified', facebookScale);
    $(window).on('resize', facebookScale);
  })

edit. make sure the following is in the css:

.fb-page{
  transform-origin: 0 0;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
}

User · Answer

Don t forget the data-href field  For me comments were working without it but were not responsive  And of course data-width  100

User · Answer

I m putting this here for those that had the same problem as me and couldn t find their answer here between the comments or on any other stackoverflow page   I added the Facebook Page Plugin with settings that would adjust it to the container width   data-adapt-container-width  true   However  one or more elements within the iframe or Javascript SDK element were given the width of 340px making the Page Plugin not adapt to the container width  While it should have a minimum of 180px and a maximum of 500px   The code provided by Facebook was missing something however      lt div class  fb-page  data-href  https   www facebook com Paras-Design-393209377418188  data-tabs  timeline  data-small-header  false  data-adapt-container-width  true  data-hide-cover  false  data-show-facepile  false  gt  lt  div gt    By manually adding data-width  500  the Page Plugin responded as expected and adapted to the container width to a maximum width of 500px   I hope this helps anyone coming across the same problem

User · Answer

Like others  I ve found that the plugin can be made  via JS  to shrink when the container shrinks  but afterwards will not grow when it expands   The issue is that the original FB XFBML parse   creates a set of child nodes with fixed styles in the document tree  and later invocations will not properly clean out the old nodes   If you do it yourself in your code  all is well   Facebook HTML  I merely added ID elements to what Facebook provided  to avoid any selector accidents     lt div id  divFacebookFeed  class  fb-page  data-href           gt       lt blockquote id  bqNoFeed  cite   your URL   class  fb-xfbml-parse-ignore  gt           lt a href   your URL   gt Your Site lt  a gt       lt  blockquote gt   lt  div gt       JQuery code to resize the widget to 500px and preserve the inner fallback element   var bq       bqNoFeed   detach    var fbdiv       divFacebookFeed     fbdiv attr  data-width   500   fbdiv empty    fbdiv append bq   FB XFBML parse

User · Answer

After struggling for some time  I think I found out quite simple solution  Inspired by Robin Wilson I made this simple JS function  the original resizes both width and height  mine is just for the width    function changeFBPagePlugin         var container width   Number     fb-container   width    toFixed 0       if   isNaN container width                quot  fb-page quot   attr  quot data-width quot   container width             if  typeof FB      undefined             FB XFBML parse              It checks for the current width of the wrapping div and then puts the value inside fb-page div  The magic is done with FB XFBML object  that is a part of Facebook SDK  which becomes available when you initialize the fb-page itself via window fbAsyncInit I bind my function to html body s onLoad and onResize   lt body onload  quot changeFBPagePlugin   quot  onresize  quot changeFBPagePlugin   quot  gt   On the page I have my fb-page plugin wrapped in another div that is used as reference   lt div class  quot fb-container quot  gt        lt div class  quot fb-page quot     stuff you need for FB page plugin     lt  div gt   lt  div gt   Finally the simple CSS for the wrapper to assure it stretches over the available space   fb-container       width  95       margin  0px auto     Putting all this together the results seem quite satisfying  Hopefuly this will help someone  although the question was posted quite a long time ago

User · Answer

As of Graph API 2 3 Facebook provides code similar to the following for the comments plugin    lt div class  fb-comments      data-href  http   absolute url      data-numposts  5  gt   lt  div gt    Add a data-width  100   to make it semi-responsive as follows    lt div class  fb-comments      data-href  http   absolute url      data-numposts  5      data-width  100   gt   lt  div gt     Semi-responsive because  the plugin doesn t resize itself on page resize  The size depends on the size of the screen when the plugin loads

User · Answer

Here s a dynamic resize of iframe include way  with some delayed rerender on resize event   function  facebook          var parent   document getElementById  facebook        var width    window innerWidth  gt  540    500   window innerWidth - 40      if  parent firstChild  amp  amp  parent firstChild width    width    return        var url    https   www facebook com plugins page php href YOUR FACEBOOK PAGE URL amp tabs messages amp width   width   amp height 500 amp small header false amp adapt container width true amp hide cover false amp show facepile true amp appId YOUR APP ID       var i   document createElement  iframe        i src   url      i width   width      i height   500      i style    border none overflow hidden       i scrolling    no       i frameborder    0       i allowTransparency    true       while  parent firstChild    parent removeChild parent firstChild         parent appendChild i        facebook       window  resize function         clearTimeout window resizedFinished       window resizedFinished   setTimeout function             facebook           250

User · Answer

To make the new Facebook Page Plugin responsive on initial page load, you'll want to remove the data-width attribute and instead add

data-adapt-container-width="true"

This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.

I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).

No Dynamic Resizing

The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

The plugin will determine its width on page load. It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

Source: https://developers.facebook.com/docs/plugins/page-plugin

You could make it dynamically responsive by reinitializing the widget on browser resize, as Io Ctaptceb suggested, but by doing that you run the risk of eating up memory very quickly.

Yugal Jindle had a good answer, but I wanted to clarify that I have yet to find a way to make the plugin truly dynamically responsive.

[facebook-social-plugins] Responsive width Facebook Page Plugin

The answer is

Tags

[facebook-social-plugins] Responsive width Facebook Page Plugin

The answer is

Examples related to facebook-social-plugins

Tags