Question

我在扩展程序中实现了一个简单的Facebook“赞”按钮。但是，它似乎没有起作用。

我正在使用iframe version of the "Like" button，因为我不需要任何额外的脚本。

<iframe src="//www.facebook.com/plugins/like.php?href=[dummy_text]&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;blah..." scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

首先，按钮确实显示正确且正确：

enter image description here

但是，点击它后，它会以红色显示“错误”：

enter image description here

所以我想也许是因为^{_{(kind of stupid and)}} restricted policies added in manifest version 2？因为如果我把它放在常规网页上就可以了。（点击“赞”按钮后显示“确认”。）

enter image description here

有关如何解决这个问题的想法吗？

Answer 1

//www.facebook.com/...是协议相对URL。当您在普通的http（s）网站上嵌入此类网址时，该网址会解析为http(s)://www.facebook.com/...。但是，在Chrome扩展程序中，它会解析为chrome-extension://www.facebook.com/... ...

要解决此问题，请在网址前加上https:，即使用https://www.facebook.com/...。

执行此操作后，由于Content Security Policy，按钮仍然不会显示。为了获得理想的结果，您必须通过manifest文件放宽CSP来嵌入Facebook：

"content_security_policy": "script-src 'self'; object-src 'self'; frame-src https://www.facebook.com",

（您还可以将http网站列入白名单，例如使用
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com"或
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com https://www.facebook.com"）

Answer 2

除了Rob W的建议 - 还有几点可以覆盖可能面临同样错误的其他人，但使用facebook app （即您已登录fb和在生成iframe代码期间，您会看到“此脚本使用您应用的应用ID：”上方带有下拉列表以选择fb app ：

以HTML格式

<head>
    <!-- for Facebook --> 
    <meta property='og:image' content="http://example.com/logo.jpg"/>
    <meta property='og:url' content="http://example.com"/>
    <meta property="og:title" content="Example"/>
    <meta property="og:description" content="Description"/>
    <meta property="fb:admins" content="<admin name>" />
    <meta property="fb:app_id" content="<app id>" /> 
    <meta property="og:type" content="article" /> 
</head>

请确保上述og：url中的网址与您的Facebook应用中的完全相同的网址相关联。
app id必须与您的Facebook应用ID相匹配才能进行跟踪（如果上述参数相同，您甚至可以“转移”喜欢使用不同域名的其他网页）

FB应用中设置的网址必须与html中的网址匹配，以及用于访问网页的网址。

调试

如果这不成功，我会使用facebook'调试器' -

https://developers.facebook.com/tools/debug

只需输入您的网址，然后让facebook进行通知：）

喜欢按钮无法在Chrome扩展程序中使用

2 个答案:

以HTML格式

调试