facebook-like 相关问题

我添加了维基百科的 iframe 来演示我遇到的问题。 Wiki iframe 按预期正确显示，但 facebook iframe 却不然。 HTML：我添加了维基百科的 iframe 来演示我遇到的问题。 Wiki iframe 按预期正确显示，但 facebook iframe 却不然。 HTML： <div class="iframe-fb-container mt-4"> <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe> <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe> </div> CSS： .iframe-fb-container { border: 1px solid blue; } .iframe-fb { width: 100%; } 如您所见，我向 facebook 请求一个宽度为 450px 的 iframe，在所附图像中，模拟器的宽度为 375px，但 fb iframe 仍然没有像维基百科 iframe 那样填充它的容器。如何制作fb iframe来填充它的容器？你无法以正常方式做到100%。这是你的 iframe src： https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe> 注意有参数：width=450px。它将 iframe 内容的宽度设置为 450px。根据Facebook插件文档： The pixel width of the plugin. Min. is 180 & Max. is 500. 所以 Facebook 可以获得的最大宽度是 500。 Facebook 在 Page Plugin 网站上声明默认情况下，插件将在页面加载时适应其父容器的宽度（最小 180 像素/最大 500 像素），这对于更改布局非常有用和无动态调整大小页面插件适用于响应式、流体和静态布局。您可以使用媒体查询或其他方法来设置父元素的宽度，但是：该插件将确定页面加载时的宽度页面加载后，它不会对盒模型的更改做出反应。如果您想在窗口大小调整时调整插件的宽度，您需要手动重新渲染插件。所以我认为最好的选择是尽可能填充父级的宽度（最多 500px 限制），然后将其在父级中居中。如果你尝试覆盖 facebook 设置的 CSS，它就会开始显示不正确，例如帖子没有填满时间线。 jQuery 解决方案怎么样？ jQuery(window).on("load resize", function () { jQuery('iframe[src*="facebook.com"]').each(function () { /* get width of parent element */ var width = Math.round(jQuery(this).parent().width()); if (width > 500) { width = 500; } else if (width < 180) { width = 180; } /* replace width value in iframe src */ var src = new URL(jQuery(this).attr("src")); src.searchParams.set("width", width); /* append new width */ jQuery(this).attr("src", src); jQuery(this).attr("width", width); }); }); 此脚本获取父元素的宽度并相应地调整 iframe。 Facebook 的 Page Plugin 它不能用作响应式容器，您必须按照 documentation 将宽度从最小 180px 添加到最大 500px。你也可以看看其他的答案，希望对你有帮助。谢谢响应宽度 Facebook 页面插件在 facebook bug 平台询问后我从他们那里得到了这个答案，这有助于一劳永逸地解决这个问题：正如 stackoverflow 中其他人已经回答的那样，根据文档， https://developers.facebook.com/docs/plugins/page-plugin/，您可以指定插件的宽度，但是，“100%”并不是什么支持。来自 facebook 文档的引用没有帮助，除非您针对代码中的错误引用它们，文档如下：插件的像素宽度。分钟。是 180 & 最大。是 500 并不是说不支持父容器100%宽度！唯一接近弄清楚的答案是阿隆的，这就是他获得赏金的原因。最终这就是我得到的代码： HTML： <div class="iframe-fb-container"> <iframe class="iframe-fb border" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGringo.co.il%2F&tabs=timeline&width=400&height=700&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe> </div> CSS： .iframe-fb-container { text-align: center; width:400px; height:700px; display:inline-block; } .iframe-fb { width: 400px; height: 700px; overflow: hidden; } 我希望这个答案能帮助将来的人:) 因为 _2p3a 和 uiScaledImageContainer _2zfr 的宽度为：450px；这就是为什么 facebook iframe 无法正确显示的原因。您始终可以使用比例缩放 iframe： iframe { transform: scale(1.3) } 请将 iframe 宽度设置为 100%。 :) iframe{ width: 100% !important //important if not working without it.. }

html css facebook facebook-like

回答 8 投票 0

如何为我的网络应用程序创建自定义“赞”按钮？

Flipboard（ios/Android）有一个 Facebook“喜欢”按钮，我试图模仿但不知道从哪里开始？我正在考虑使用 CSS 将图像放置在通用“喜欢”按钮的顶部。任何...

facebook button facebook-like custom-controls

回答 1 投票 0

如何查看所有点赞的人？

有没有办法查看谁点击了FACEBOOK Like BUTTON？在 http://developers.facebook.com/docs/reference/plugins/like 的设置框中，我可以选中“显示面孔”选项，但随后我可以...

facebook facebook-like

回答 1 投票 0

如何从 facebook 插件中删除边框

你好，我想从 Facebook 插件中删除两个边框，但它对我不起作用。我试过： .pluginBoxDivider { 边框顶部：无！重要； } 但它失败了。边框图片：