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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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...' ); |