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?

Clarkson

Same issue here. The #u_0_0 element seems to be the problem, and as it's created within the facebook iframe I don't think it's possible to manipulate it — not even with javascript. – Galipot

Same issue as well: 280px width gets added by fb script itself. I think it's a small bug of the new fb feature. – Wateriness

Unlike Twitter widgets, it seems that at least Facebook Page plugin is not responsive. When placing it in bootstrap site it does not scale with the bootstrap column resizing – Chopine

I dont see how this is possible, as there is a div class="_2p3a" that is inside the iframe with width set and you cant override cross domain iframe css ??!! – Guitarfish

Answer 1

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

Martz

Yugal, thanks for the explanation! That makes sense =) Now I've configured the data-width attributed to 500px. When the container is lower than 500px, the plugin is indeed rendering to the width of the container with a minimal width of 280px. So the plugin will respond on the width of the container, only when it's being rendered. So what I see, this new plugin is somewhat responsive when being rendered between a 280px and 500px width of the container where the plugin is placed. – Clarkson

It seems very... very odd that facebook would not consider scenarios requiring a bit more flexibility with the new page plugin... Any updates in the future to override the min/max widths? Specifically for grid layouts that use percentages and media queries to switch to alternate responsive layouts. – Acrylyl

If your container is following the grid, then then plugin will follow. Provided width is between 280px to 500px. – Martz

Quick note: Facebook has since then changed the minimum width to 180px – Taunton

The width is determined at render time, so resizing the browser doesn't change the width of the plugin. Hit F5 to see the "responsive" size change. – Acierate

you should set both data-width="500" and data-adapt-container-width="true", otherwise, the max width will only go up to 340px only – Tumult

@Acierate and this is the problem for me. I would like to have facebook plugin fully responsive as if somebody will turn smartphone to the side, screen will be changed, but facebook will have still the same width. And If I understand it right, you can only rerender (means waste mobile data?). – Shaveling

Most of assets are cached as regular facebook requests, so rerendering shouldn't be as bad on data. – Martz

@SebastianHagens, I checked your answer but it's not working form. Can you add a snippet here or any link where I can check.? – Hexapartite

Answer 2

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.

Handsaw

upvote for simple CSS approach, even though it cuts the iframe content – Chopine

for some reason, this is the only answer that worked for me. even the other top-google-result stackoverflow question's answers didn't cut it. if you're asking this question in 2015, this is the answer. – Yttria

This did not work for me. Facebook iframe's inner content has fixed width 340px which still doesn't change. – Micelle

This cuts the content off from the right side, when the container is resized narrower. – Hippocrates

Answer 3

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>

Morn

Worked like a charm, twentyfortysix! Thank you so much! I entered my <div class"fb-page" ...> and my container and now the page is fully responsive again. – Hawken

Correction: almost there. The page is fully responsive on desktop again, BUT on mobile (Android Chrome) scrolling UP seems to trigger the refresh and sets the scrolltop to the start of the fb-page. ??? – Hawken

You're calling setTimeout every time the resize event is triggered. This will create multiple timeouts and call the re-rendering code many times whenever the browser is resized by dragging. You should assign a variable to the timeout and clear it before calling setTimeout again. – Clupeoid

This works for now. I agree with @Gavin. Set a variable and clear it before setting a new one – Kalinda

Answer 4

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.

Farthing

I tried this on <div class="fb-page"> with or without using the data-width attribute. The iframe becomes 306 pixels wide and if I reload the browser, it will not change. – Cougar

Answer 5

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);
    }
};

Crenelation

Answer 6

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.

<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"></div>

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.

Hawkins

Answer 7

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

Ishmaelite

the above code is to make it responsive, if you want to explicitly set the width to 220px you can do so with pure css. set ::::::: -webkit-transform: scale(0.785); -moz-transform: scale(0.785); transform: scale(0.785); – Ishmaelite

Thank You! Also, looks like facebook changed their policy and now the 220px wide like box not overflowing. – Carbarn

Answer 8

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

Confectioner

I tried this on a <div class="fb-page"> without success. The iframe becomes 306 pixels wide regardless of parent container. Reloading does not change this. – Cougar

@gldraphael, Can you add one example? Because I tried your code but It is not working. – Hexapartite

Answer 9

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

Dolichocephalic

Answer 10

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!

Highsounding

This seems to cut the text and images – Ringtailed

Answer 11

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&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('<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"><div class="fb-xfbml-parse-ignore"><blockquote cite="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>');
            if(typeof FB !== 'undefined') {
                FB.XFBML.parse( );  
            }  
          }, 100);  
        };

        recalc();

      $(window).bind("resize", function(){  
        if(oldwidth !== $(window).width()) {
            recalc();
            oldwidth = $(window).width();
        }
        }); 
    });

Pinkard

Answer 12

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.

Bio

Answer 13

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

Cleavland

I know I'm a few years late to the party, but I believe the behavior of the child nodes not being cleaned out can be eliminated if you set data-adapt-container-width="false". Once I changed that, my plugin grew and shrunk as desired based on how I resized the window. I suppose it might be beneficial to set it to true for the initial page load, but at that point I think it's easier to just set it to false and handle the initial page load in JS as well. – Anaglyph

Answer 14

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)) {
        $(".fb-page").attr("data-width", 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:

<body onload="changeFBPagePlugin()" onresize="changeFBPagePlugin()">

On the page I have my fb-page plugin wrapped in another div that is used as reference:

<div class="fb-container"> 
    <div class="fb-page" ...stuff you need for FB page plugin... </div>
</div>

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.

Disagreeable

Answer 15

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 > 540) ? 500 : window.innerWidth - 40;
    if (parent.firstChild && parent.firstChild.width == width) { return; }
    var url = 'https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width='+width+'&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&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);
});

Mayenne

Answer 16

My workaround is using media queries to calculate the data-width. E.g. with MUI:

export default function News() {
  const width = useMediaQuery("(min-width:482px)") ? 400 : 260;
  const facebookScript = `<script async="async" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/hu_HU/sdk.js#xfbml=1&amp;version=v20.0" nonce="yfUvgT65" onload="FB.XFBML.parse();"></script>`;
  return (
    <>
      <div id="fb-root" />
      <InnerHTML html={facebookScript} />
      <Box
        className="fb-page"
        data-href="https://www.facebook.com/HarmathDenes"
        data-tabs="timeline"
        data-width={width}
        data-height="700"
        data-small-header="true"
        data-adapt-container-width="false"
        data-hide-cover="true"
        data-show-facepile="true"
      >
        <blockquote
          cite="https://www.facebook.com/HarmathDenes"
          className="fb-xfbml-parse-ignore"
        >
          <a href="https://www.facebook.com/HarmathDenes">
            Harmath Dénes alkotásai
          </a>
        </blockquote>
      </Box>
    </>
  );
}

Tautologize

Answer 17

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

Knawel

data-width does not allow any percentage. it should be fixed numbers. please read the documentation. – Weihs

Answer 18

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!

Presuppose