How to make the new facebook post embed feature responsive?

Question

I couldn't find any solutions on google which can make the newly introduced facebook posts embed to responsive. Does anyone got a solution or tricks? Thanks

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766">Post</a> by <a href="https://www.facebook.com/security">Facebook Security</a>.</div></div>

Answer 1

Set data-width to auto to use fluid width:

<div class="fb-post" data-href="url" data-width="auto"></div>

Answer 2

I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-width attribute, we can listen for width changes on our page, update the data-width attributes and then re-render the plugins.

See http://jsfiddle.net/brohde/GRcen/

Usage: $('#post').autoResizeFbPost();

Plugin logic:

• On document ready:
  • Save original HTML of $('#post') to preserve any <div class="fb-post"> elements – the Facebook SDK removes this from the DOM.
• The Fix: Update all <div class="fb-post"> elements with the correct data-width attribute (Uses $('#post').width() ).
• On window resize, run The Fix again and also call FB.XFBML.parse(); to render the Facebook plugin(s). The plugin will wait 1 second after the last window resize to avoid multiple DOM updates and FB.XFBML.parse(); calls.