Skip to content

Instantly share code, notes, and snippets.

@RopoMen
Created July 21, 2015 18:15
Show Gist options
  • Save RopoMen/29516a94e31455afe9b6 to your computer and use it in GitHub Desktop.
Save RopoMen/29516a94e31455afe9b6 to your computer and use it in GitHub Desktop.
Simple way to resize Facebook's new Page plugin
<!--
Width 10000px is quite wide, but it has room for new "max", also because Facebook's "adaptation" means only shrinking
the Page plugin to fit smaller container. To use Page plugin with larger container than 500px (current max.) you could try
to add example Bootstrap class '.center-block' which would center the Page plugin inside larger container.
-->
<div class="row">
<div class="column-xs-6">
<div class="fb-page center-block" data-width="10000" data-adapt-container-width="true" data-href="https://www.facebook.com/facebook"></div>
</div>
</div>
<script>
var TIMEOUT = null;
$(window).on('resize', function() {
if(TIMEOUT === null) {
TIMEOUT = window.setTimeout(function() {
TIMEOUT = null;
//fb_iframe_widget class is added after first FB.FXBML.parse()
//fb_iframe_widget_fluid is added in same situation, but only for mobile devices (tablets, phones)
//By removing those classes FB.XFBML.parse() will reset the plugin widths.
$('.fb-page').removeClass('fb_iframe_widget fb_iframe_widget_fluid');
FB.XFBML.parse();
}, 300);
}
});
</script>
@nobutsta
Copy link

Not work with the new page plugin. So sad :(

@videsignz
Copy link

Works for me :)

@ujwaldhakal
Copy link

worked for me !

@trongnguyen1210
Copy link

worked for me !

Thank so much

@angelinetran
Copy link

Thank you so much for the script!

Here is a plain JS version:

<script>
let TIMEOUT = null;
window.onresize = () => {
  if(TIMEOUT === null) {
    TIMEOUT = window.setTimeout(() => {
      TIMEOUT = null;
      //fb_iframe_widget class is added after first FB.FXBML.parse()
      //fb_iframe_widget_fluid is added in same situation, but only for mobile devices (tablets, phones)
      //By removing those classes FB.XFBML.parse() will reset the plugin widths.

      document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
      document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid')
      FB.XFBML.parse();
    }, 300);
  }
}
</script>

@yazilimci21
Copy link

yazilimci21 commented Feb 6, 2020

<div id="fbcontainer" style="width:100%; height: 350px;">
//facebook code here
</div>

document.addEventListener("DOMContentLoaded", function(event) {
$(window).bind("load resize", function(){
setTimeout(function() {
$("#fbcontainer .fb-page").attr("data-width", parseInt($("#fbcontainer").width()));
FB.XFBML.parse( );
}, 100);
});
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment