Friday, May 14, 2021

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

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