How to make the new facebook post embed feature responsive?

问题

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>

回答1:

If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:

Can I customize how the post is displayed on my web page?

Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.

If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.

Details:

Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.

Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:

[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.

so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...

Another option would have been to just try on an http:// site only. At that point, I got the following errors:

Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().

This confirms my suspicion -- you need an app ID. I added an app ID and it works.

回答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.

回答3:

Set data-width to auto to use fluid width:

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

回答4:

Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.

Added - style="overflow-x: auto; max-width: 100%;"

To result in the following fb-post portion of the embed;

<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">

If you want a little more elegance can always implement styling on the scrollbar.

CSS Webkit Scrollbars - http://css-tricks.com/custom-scrollbars-in-webkit/

jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/

Hope someone finds this useful.

回答5:

If yours posts are video, you can use Embed Videos instead of Embed Posts, they are responsive. You can get all others datas from open graph and create your own design.

https://developers.facebook.com/docs/plugins/embedded-video-player

来源：https://stackoverflow.com/questions/19260741/how-to-make-the-new-facebook-post-embed-feature-responsive

标签

css

facebook

facebook-javascript-sdk