如何使新的Facebook帖子嵌入功能具有响应性？ [英] How to make the new facebook post embed feature responsive?

问题描述

我在Google上找不到任何可以使新引入的Facebook帖子嵌入响应的解决方案。有人解决方案或技巧吗？谢谢

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>

推荐答案

如果您的意思是响应，如响应式设计 ，您不能这样做。 Facebook使用跨域iframe来实现JS / CSS隔离和会话安全，它使用特权跨域通信根据内容动态生成iframe尺寸，因此您不能随便玩CSS来获得所需的内容。请参见社交插件的官方页面上的这一部分：

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.

详细信息：

您的标记丢失了应用ID。您在哪里找到此标记？您需要指定一个应用程序ID。如果您手动加载JS SDK，则意味着将其添加到 FB.init 如此处所示。在您的情况下，您使用的是缩短的基于URL的初始化，其中SDK URL的片段中包含参数：在示例中为＃xfbml = 1 。您将需要对其进行更改，使其更像＃xfbml = 1& appId = 1234567890 。

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.

更新：您应该使用浏览器内置的开发人员工具（或Firebug等）中的控制台来查看有关JS SDK错误的信息。当我在https：//站点上尝试您的代码时，出现此错误：

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.

所以我从 http://connect.facebook.net更改了URL /...到相对协议的网址： // connect.facebook.net /...

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

另一个选择是仅尝试http：//网站。到那时，我遇到以下错误：

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().

这证实了我的怀疑-您需要一个应用程序ID。我添加了一个应用ID，它可以正常工作。

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

这篇关于如何使新的Facebook帖子嵌入功能具有响应性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！