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

Answer 1

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

Answer 2

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

<div id="divFacebookFeed" class="fb-page" data-href="..." ...>
    <blockquote id="bqNoFeed" cite="(your URL)" class="fb-xfbml-parse-ignore">
        <a href="(your URL)">Your Site</a>
    </blockquote>
</div>

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

Answer 3

Hi everybody!

My version with a live demonstration(native JavaScript):

1). Javascript code in a separate file (the best solution):

Codepen

/* Vanilla JS */
function setupFBframe(frame) {
  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%2Ffacebook" +
    "&tabs=timeline" +
    "&width=" +
    containerWidth +
    "&height=" +
    containerHeight +
    "&small_header=false" +
    "&adapt_container_width=false" +
    "&hide_cover=true" +
    "&hide_cta=true" +
    "&show_facepile=true" +
    "&appId";

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

/* begin Document Ready                       				   		
############################################ */

document.addEventListener('DOMContentLoaded', function() {
  var facebookIframe = document.querySelector('#facebook_iframe');
  setupFBframe(facebookIframe);
 
  /* begin Window Resize                       				   		
  ############################################ */
  
  // Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
  (function() {
    window.addEventListener("resize", resizeThrottler, false);

    var resizeTimeout;

    function resizeThrottler() {
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();
        }, 66);
      }
    }

    function actualResizeHandler() {
      document.querySelector('#facebook_iframe').removeAttribute('src');
      setupFBframe(facebookIframe);
    }
  })();
  /* end Window Resize
  ############################################ */
});
/* end Document Ready                       				   		
############################################ */

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
  font-family: 'Indie Flower', cursive;
}
.container {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content {
  overflow: hidden;
}

.left_sidebar {
  position: relative;
  float: left;
  width: 30%;
  max-width: 300px;
}

.main_content {
  position: relative;
  float: left;
  width: 70%;
  background-color: #DDEFF7;
}
/* ------- begin Widget Facebook -------------- */
.widget--facebook--container {
  padding: 10px;
  border: 1px solid #000;
}

.widget-facebook {
  height: 500px;
}

.widget-facebook .facebook_iframe {
  border: none;
}

/* ---------- end Widget Facebook---------------- */

/* ----------------- no need -------------------- */
.block {
  color: #fff;
  height: 300px;
  background-color: #00A7F7;
  border: 1px solid #005dff;
}

.block h3 {
  line-height: 300px;
  text-align: center;
}

<!-- Min. responsive 180px -->
<div class="container">
  <div class="content">
    <div class="left_sidebar">
      <aside class="block">
        <h3>Content</h3>
      </aside>
      <!-- begin Widget Facebook
    ========================================= -->
      <aside class="widget--facebook--container">
        <div class="widget-facebook">
          <iframe id="facebook_iframe" class="facebook_iframe"></iframe>
        </div>
      </aside>
      <!-- end Widget Facebook
      ========================================= -->
      <aside class="block">
        <h3>Content</h3>
      </aside>
    </div>
    <div class="main_content">
      <h1>Responsive width Facebook Page Plugin</h1>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
    </div>
  </div>
</div>

2). Javascript code is written in HTML:

Codepen

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
  font-family: 'Indie Flower', cursive;
}

.container {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.content {
  overflow: hidden;
}

.left_sidebar {
  position: relative;
  float: left;
  width: 30%;
  max-width: 300px;
}

.main_content {
  position: relative;
  float: left;
  width: 70%;
  background-color: #DDEFF7;
}


/* ------- begin Widget Facebook -------------- */

.widget--facebook--container {
  padding: 10px;
  border: 1px solid #000;
}

.widget-facebook {
  height: 500px;
}

.widget-facebook .facebook_iframe {
  border: none;
}


/* ---------- end Widget Facebook---------------- */


/* ----------------- no need -------------------- */

.block {
  color: #fff;
  height: 300px;
  background-color: #00A7F7;
  border: 1px solid #005dff;
}

.block h3 {
  line-height: 300px;
  text-align: center;
}

<!-- Vanilla JS -->
<!-- Min. responsive 180px -->
<div class="container">
  <div class="content">
    <div class="left_sidebar">
      <aside class="block">
        <h3>Content</h3>
      </aside>
      <!-- begin Widget Facebook
      ========================================= -->
      <aside class="widget--facebook--container">
        <div class="widget-facebook">
          <script>
            function setupFBframe(frame) {
              if (frame.src) return; // already set up

              var container = frame.parentNode;
              console.log(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%2Ffacebook" +
                "&tabs=timeline" +
                "&width=" +
                containerWidth +
                "&height=" +
                containerHeight +
                "&small_header=false" +
                "&adapt_container_width=false" +
                "&hide_cover=true" +
                "&hide_cta=true" +
                "&show_facepile=true" +
                "&appId";

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

            var facebookIframe;

            /* begin Window Resize                       				   		
            ############################################ */

            // Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
            (function() {
              window.addEventListener("resize", resizeThrottler, false);

              var resizeTimeout;

              function resizeThrottler() {
                if (!resizeTimeout) {
                  resizeTimeout = setTimeout(function() {
                    resizeTimeout = null;
                    actualResizeHandler();
                  }, 66);
                }
              }

              function actualResizeHandler() {
                document.querySelector('#facebook_iframe').removeAttribute('src');
                setupFBframe(facebookIframe);
              }
            })();
            /* end Window Resize
            ############################################ */
          </script>
          <iframe id="facebook_iframe" class="facebook_iframe" onload="facebookIframe = this; setupFBframe(facebookIframe)"></iframe>
        </div>
      </aside>
      <!-- end Widget Facebook
      ========================================= -->
      <aside class="block">
        <h3>Content</h3>
      </aside>
    </div>
    <div class="main_content">
      <h1>Responsive width Facebook Page Plugin</h1>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
      <p>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.</p>
    </div>
  </div>
</div>

Thanks storsoc!

All the best to you all and have a nice day!

Answer 4

this works for me (the width is forced by javascript and FB plugin loaded via javascript)

<div id="fb-root"></div>
<script>(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&version=v2.5&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('<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"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
    FB.XFBML.parse( );    
  }, 100);  
}); 
});

</script>
<div id="container" style="width:100%;">  
<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"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>

Answer 5

As of Graph API 2.3 Facebook provides code similar to the following for the comments plugin:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5">
</div>

Add a data-width="100%" to make it semi-responsive as follows:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5"
    data-width="100%">
</div>

---

^{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.}

Answer 6

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