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

<         


        

Answer 1

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
    elements – the Facebook SDK removes this from the DOM.
• The Fix: Update all
  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.