Facebook 的“赞”按钮破坏了 https/SSL答案

【问题标题】：Facebook 'Like' button breaks https/SSLFacebook 的“赞”按钮破坏了 https/SSL
【发布时间】：2016-11-23 11:51:35
【问题描述】：

在我维护的电子商务网站上，我按照此处的说明添加了 Facebook 的“点赞”按钮：

http://developers.facebook.com/docs/reference/plugins/like

我正在使用 iframe 方法：

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" 
  scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
   width:450px; height:80px;" allowTransparency="true">
</iframe>

它有效，但如果客户碰巧登录了她的帐户，她会得到臭名昭著的“mixed content warning”

有没有办法使用相同的 Facebook 的“赞”按钮代码，但在 SSL 模式下不会插入非 https 内容？

【问题讨论】：

标签： facebook ssl https facebook-like mixed

【解决方案1】：

您可以通过不具体说明传输协议来避免针对支持 SSL 的域的 SSL 警告。例如不要包括http:// 或https://，而是使用//。

而不是

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

使用

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

【讨论】：

我不知道这个技巧。它适用于所有浏览器吗？谢谢你介绍给我。
这不适用于 facebook。问题是实际图像目前仅在他们的 http 网站上。
@Noah，它对我有用吗？ @android-eve 当您将其留空时，用户代理将继承协议......这个技巧从早期的浏览器时代就已经存在......
@todd，我不知道怎么做。如果您尝试通过 https 查看类似图像本身，您看到了吗？如果是这样，您使用什么 URL 来查看它？
@Noah，我看到这个精灵 s-static.ak.facebook.com/rsrc.php/v1/z7/r/ql9vukDCc4R.png 正在被请求...您是否需要更新您的点赞按钮嵌入代码？

【解决方案2】：

这是一个提示，facebook.com 支持 SSL ;)

【讨论】：

facebook.com/plugins/…
您的意思是用“https”替换上述中所有出现的“http”吗？如果是这样，会不会有任何副作用？例如，客户未登录时的“混合内容”？或者......这会减慢搜索引擎机器人的爬行速度吗？（上述网站上有数百个带有此按钮的页面，如果答案为“是”，则可能会导致 SEO 出现重大问题。
是的，将 http 替换为 https。当您使用 ssl 时，Facebook 不会提供任何“混合”内容，因此它应该可以正常工作。搜索引擎不会加载 iframe 内容。你不是第一个遇到这个问题的人，这就是他们同时提供 http 和 https 的原因。
知道在 Live Stream Box 的情况下这将如何工作吗？我将 iframe 与 https 一起使用，它无法刷新 Box 页面。使用 HTTP 可以正常工作。

【解决方案3】：

您可以通过不具体说明传输协议来避免针对支持 SSL 的域的 SSL 警告。例如不要包括http:// 或https://，而是使用//。

代替

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

使用

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Fl

【讨论】：

【解决方案4】：

<iframe src="//www.facebook.com/plugins/follow?href=https%3A%2F%2Fwww.facebook.com%2Fludwika.karuna&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;width=450&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。