喜欢按钮在 Chrome 扩展程序中不起作用答案

【问题标题】：Like button not working in a Chrome extension喜欢按钮在 Chrome 扩展程序中不起作用
【发布时间】：2014-03-07 15:21:21
【问题描述】：

我在我的扩展程序中实现了一个简单的 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>

起初，按钮确实显示得很好且正确：

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

所以我想也许是因为^{_{(kind of stupid and)}} restricted policies added in manifest version 2?;因为如果我把它放在一个普通的网页上它就可以工作。（点赞按钮后显示“确认”。）

知道如何解决这个问题吗？

【问题讨论】：

您的分机是否有权访问 facebook？
@MostafaShahverdy 因为它在 iframe 中，所以我不需要添加任何权限，但我确实将 Facebook 包含在权限列表中。

标签： javascript facebook google-chrome-extension

【解决方案1】：

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

要解决此问题，请在 URL 前加上 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"）

【讨论】：

致反对者：在您声称这不起作用之前，请确保您重新加载扩展程序以确保内容安全策略生效。这可以通过在chrome://extensions/ 的扩展程序上单击重新加载来完成，或者通过卸载然后重新安装扩展程序来完成。

【解决方案2】：

除了 Rob W 的建议之外 - 更多点以涵盖可能面临相同错误的其他人，但使用facebook app （即您在 fb 上登录并在生成 iframe 代码，您会在上方看到“此脚本使用您的应用的应用 ID：”，并带有一个下拉菜单以选择 fb 应用）：

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 中的 url 与您的 Facebook 应用中的完全相同的 url 相关联。
app id 必须与您的 Facebook 应用程序 ID 匹配以进行跟踪（如果上述参数相同，您甚至可以将喜欢“转移”到具有不同域的另一个页面）

FB 应用中设置的 url 是否必须与您的 html 中设置的 url 匹配，以及您用于访问页面的 url。

调试

如果这不起作用，我会使用 facebook 'debugger' -

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

只需输入您的网址，让 facebook 提供建议：)

【讨论】：