Responsive width Facebook Page Plugin

 Facebook plugin can fit into any div by specifying the width attribute 
exemple (here width is set 200px) 

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="200" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>

The only constraint is the 180px<=width <=500px

In case when we dont have the exact size of a div until the DOM load, an alternative is to differ the script load after DOM load and pass the correct width at that moment

in this few codes i m  trying to fit the fb feed into a 63.26% of  wrapper

   console.log('running fb script');
    var fb_block = document.getElementById('fb-wrapper');    
    if(fb_block !== null){
        var parent_width = $('.home-social-content').width();        
        var fb_width = parent_width * 63.26 / 100;        
        var rounded_fb_width = Math.round(fb_width);        
        if(fb_width < rounded_fb_width){
            rounded_fb_width -= 1;
        }        
        var inject_html = '<div class="fb-page" data-href="https://www.facebook.com/airbus" data-tabs="timeline" data-width="' + rounded_fb_width +'" data-height="732" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/airbus" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/airbus">Airbus</a></blockquote></div>';
        inject_html +='<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v10.0&appId=337498777087670&autoLogAppEvents=1" nonce="qjuBX7Rb"></script>';        
        $('#fb-wrapper').html(inject_html); 
        console.log('done...');