javascript - Make Facebook plugin responsive - Stack Overflow

So I am using the new Facebook plugin (Page Plugin) and have a hard time to get it responsive on window resize.

I have set the option data-adapt-container-width="true", but that only triggers when there i a page load/reload.

Please se my JSFiddle: / (try it in exporer and if that dont work try my plunker: ) where i have set the start width for the plugin to max (500px), but I want to trigger a reload of the plugin when the container (window) gets smaller then the plugin at that particular time.

I am thinking about somthing like:

$(window).resize(function () {
    //Do the reload of plugin
});

Hope you guys have an idea of an solution that can guid me in the right way.

So I am using the new Facebook plugin (Page Plugin) and have a hard time to get it responsive on window resize.

I have set the option data-adapt-container-width="true", but that only triggers when there i a page load/reload.

Please se my JSFiddle: http://jsfiddle/29zgc790/ (try it in exporer and if that dont work try my plunker: http://plnkr.co/edit/IPnjpJUXxkO4WTLFTTW0?p=preview) where i have set the start width for the plugin to max (500px), but I want to trigger a reload of the plugin when the container (window) gets smaller then the plugin at that particular time.

I am thinking about somthing like:

$(window).resize(function () {
    //Do the reload of plugin
});

Hope you guys have an idea of an solution that can guid me in the right way.

• javascript
• jquery
• css
• facebook

Share Improve this question Follow edited Nov 19, 2015 at 10:35 Zorken17 asked Nov 19, 2015 at 10:05 Zorken17Zorken17 1,89611 gold badge1212 silver badges1616 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Embed the iframe generated:

<iframe id="facebook" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="http://www.facebook./v2.5/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.%2Fconnect%2Fxd_arbiter%2FTlA_zCeMkxl.js%3Fversion%3D41%23cb%3Df1ce7bfb%26domain%3Drun.plnkr.co%26origin%3Dhttp%253A%252F%252Frun.plnkr.co%252Ff152208424%26relation%3Dparent.parent&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.%2Fmicrosoft&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=true&amp;small_header=true&amp;width=500" style="border: none; visibility: visible;width: 500px; height: 500px;" class=""></iframe>

Get parent width and set it into iframe and iframe's src attribute

$(window).resize(function() {
  //Do the reload of plugin
  var new_width = $("#facebook").parent().width();
  $("#facebook").css("width", new_width);
  var url = $('#facebook').attr('src').split("&width=");
  url = url[0] + '&width=' + new_width;
  $('#facebook').attr('src', url);
});

After a few days of trying to achieve this, I came up with a working solution! I actually registered only to share it :)

1. Copy the iframe code of the page plugin here: Facebook Page Plugin (go to "Get code" and then click on "iFrame" on the top of the window that just opened.)
2. Paste the code to your html inside a div with class fb-column, then remove the width and src attributes (paste the value of the src attribute - the long link - somewhere else, you will need it later)

3. Add this code to your main .js file (credit for calculating the box size and calling the function goes to Mugo Web

   function resizeFBPlugin() {
     //calculate parent box width
     var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
     // set the src and replace the actual width with the calculated width. 
     document.getElementById("fb-column").src = //paster link from iFrame here. Be sure to keep everything as it is, only replace the number after &width= with container_width
     // it should look something like this: 'https://www.facebook.....&width='+container_width+'&height=......';
     // NOTE: take note of the use of apostrophes and + signs
     //set the width of the iframe
     document.getElementById("fb-column").width = container_width;
   };
   
   // call the function on resize and on window load
   
   $(window).on('resize', function() {
   setTimeout(function(){resizeFBPlugin()}, 500);
   });
   
   $(window).on('load', function() {
   setTimeout(function(){resizeFBPlugin()}, 1500);
   });
   

That's it! You now have a fully responsive Facebook page plugin (of course, within the min 180px and max 500px width.

BTW, The Twitter plugin works perfectly. I have no idea why Facebook decided not to fix this... I suppose they don't have the money for the right developers :)

So after reading the documentation for the facebook web sdk I found this little function that reloads the iframe.

FB.XFBML.parse();

https://developers.facebook./docs/reference/javascript/FB.XFBML.parse

That solved my problem, but @LucaGiardina hade a good solution as well but I think its always a god practice to use the built in functions if thay exist.

I have found out some solution but i think the best one is at least for me is that setting the parent tag of fb-ment-wrapper in a certain responsive then use facebook built in css data-width:

<div class="fb-ment-wrapper">
   <div class="fb-ments" data-href="{{request.build_absolute_uri}}" 
   data-numposts="3" data-width="100%">
   </div>
</div`>