CSS 如何使新的 facebook 帖子嵌入功能响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19260741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the new facebook post embed feature responsive?
提问by JohnC--
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
我在谷歌上找不到任何可以使新引入的 facebook 帖子嵌入响应的解决方案。有没有人有解决方案或技巧？谢谢
<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>
采纳答案by AndrewF
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:
如果您的意思是“响应式设计”中的“响应式”，则不能。Facebook 使用跨域 iframe 来实现 JS/CSS 隔离和会话安全，并使用特权跨域通信根据内容动态生成 iframe 尺寸，因此您不能只是玩弄 CSS 来获得您想要的东西. 有关社交插件，请参阅官方页面上的此部分：
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 Codebutton 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.initas seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.
您的标记缺少应用 ID。你在哪里找到这个标记？您需要指定一个应用程序 ID。如果您手动加载 JS SDK，这意味着将其添加到 的参数中，FB.init如下所示。在您的情况下，您使用的是缩短的基于 URL 的初始化，其中 SDK URL 在其片段中有参数：#xfbml=1在您的示例中。您将需要对其进行更改，使其更像#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:
更新：您应该使用浏览器内置开发人员工具（或 Firebug 等）中的控制台来查看有关 JS SDK 错误的信息。当我在 https:// 站点上尝试您的代码时，出现此错误：
[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/...
所以我将 URL 从http://connect.facebook.net/...更改为协议相对 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:
另一种选择是仅在 http:// 站点上尝试。那时，我收到以下错误：
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.
这证实了我的怀疑——您需要一个应用程序 ID。我添加了一个应用程序 ID，它可以工作。
回答by tvorog
Set data-widthto autoto use fluid width:
设置data-width为auto使用流体宽度：
<div class="fb-post" data-href="url" data-width="auto"></div>
<div class="fb-post" data-href="url" data-width="auto"></div>
回答by Brian Rohde
I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-widthattribute, we can listen for width changes on our page, update the data-widthattributes and then re-render the plugins.
我创建了一个小的 jQuery 插件来解决这个问题。由于 Facebook Embedded Posts 插件在使用data-width属性时呈现正确的宽度，我们可以监听页面上的宽度变化，更新data-width属性，然后重新呈现插件。
See http://jsfiddle.net/brohde/GRcen/
见http://jsfiddle.net/brohde/GRcen/
Usage: $('#post').autoResizeFbPost();
用法： $('#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.
- Save original HTML of
- The Fix:Update all
<div class="fb-post">elements with the correctdata-widthattribute (Uses$('#post').width()). - On window resize, run The Fixagain 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 andFB.XFBML.parse();calls.
- 文件准备好后：
- 保存原始 HTML
$('#post')以保留任何<div class="fb-post">元素——Facebook SDK 将其从 DOM 中删除。
- 保存原始 HTML
- 修复：
<div class="fb-post">使用正确的data-width属性 (Uses$('#post').width())更新所有元素。 - 在调整窗口大小时，再次运行The Fix并调用
FB.XFBML.parse();渲染 Facebook 插件。插件将在最后一个窗口调整大小后等待 1 秒，以避免多次 DOM 更新和FB.XFBML.parse();调用。
回答by Garrett Hyder
Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.
发现它令人沮丧我找不到比使用溢出和最大宽度 100% 来强制水平滚动条更优雅的事情了。
Added - style="overflow-x: auto; max-width: 100%;"
添加 - style="overflow-x: auto; max-width: 100%;"
To result in the following fb-post portion of the embed;
导致嵌入的以下 fb-post 部分；
<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">
<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/
CSS Webkit 滚动条 - http://css-tricks.com/custom-scrollbars-in-webkit/
jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/
jQuery 微型滚动条 - http://baijs.nl/tinyscrollbar/
Hope someone finds this useful.
希望有人觉得这很有用。
回答by Vincent Guyard
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://developers.facebook.com/docs/plugins/embedded-video-player
