9

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

我使用iframe“Like”按钮的版本只是因为我不需要任何额外的脚本。

<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>

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

在此处输入图像描述

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

在此处输入图像描述

所以我想也许是因为清单版本 2 中添加了（有点愚蠢和）限制政策？因为如果我把它放在一个普通的网页上它就可以工作。（单击“赞”按钮后，它会显示“确认”。）

在此处输入图像描述

关于如何解决这个问题的任何想法？

4

2 回答 2

6

//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，该按钮仍不会显示。要获得所需的结果，您必须通过清单文件放宽 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"or
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com https://www.facebook.com"）

于 2014-03-02T20:51:18.410 回答
2

除了 Rob W 的建议之外 - 还有几点可以涵盖可能面临相同错误但使用facebook 应用程序的其他人 （即您已登录 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 提供建议：)

于 2014-03-07T04:01:26.700 回答