Facebook Messenger API：在浏览器中打开的 Web 视图答案

【问题标题】：Facebook Messenger API: Webviews Opening in BrowserFacebook Messenger API：在浏览器中打开的 Web 视图
【发布时间】：2017-02-13 07:03:00
【问题描述】：

我正在尝试使用 Facebook Messenger API 创建带有按钮的“通用”消息。当单击该按钮时，我想显示一个“webview”（即 Messenger 中网页的框架版本）。

但是，即使我的按钮具有所需的webview_height_ratio 属性，它仍然会在我手机的浏览器中打开，而不是在 Messenger 中。由于 Facebook 文档声称这就是使按钮打开 web 视图所需的全部内容，因此我不确定我可能做错了什么。

我发送给 Facebook 以创建按钮（作为通用模板的一部分）的消息是：

{
    "recipient":{
        "id": "some ID"
    },
    "message": {
        "attachment":{
            "payload":{
                "elements":[{
                    "buttons": [{
                        "title":"Webview example",
                        "type":"web_url",
                        "url":"http://www.example.com",
                        "webview_height_ratio":"compact"
                    }],
                    "image_url": "http://www.example.com/image.png",
                    "item_url": "http://www.example.com",
                    "subtitle":"It's a TV!",
                    "title":"Some TV"
                }],
                "template_type":"generic"
            },
            "type":"template"
        }
    }
}

谁能告诉我我做错了什么？

编辑：我不确定是否有必要，但我已将我试图为 webview 指向的域列入白名单（但显然这没有帮助）。

【问题讨论】：

标签： facebook-messenger facebook-messages

【解决方案1】：

为了让 webview 在浏览器上工作（chrome 和 rambox messenger 测试），除了添加 webview_height_ratio 字段外，您还需要将 messenger_extensions 设置为 true。

【讨论】：

【解决方案2】：

我也遇到过同样的问题。

在这个区块

      "buttons": [{
                    "title":"Webview example",
                    "type":"web_url",
                    "url":"http://www.example.com",
                    "webview_height_ratio":"compact"
                }],

尝试在网页视图高度比例后添加这部分

"messenger_extensions": "true"

在 Web 视图中使用 URL 之前，应将其列入白名单。用于将域列入白名单。参考链接

https://developers.facebook.com/docs/messenger-platform/thread-settings/domain-whitelisting/

【讨论】：

【解决方案3】：

事实证明，我做的一切都是正确的：问题出在 Facebook。显然，当您使用 web 视图时，它仅会影响移动用户。无论您是否指定 webview_height_ratio，基于 Web 的 Messenger 用户都会获得一个新窗口。

【讨论】：

这已经过时了。

【解决方案4】：

我发现 webview 仅适用于“高”和“紧凑”尺寸，因为“完整”会在我的 Android 手机上打开默认浏览器。我没有使用扩展，但尝试将此选项设置为 false 和 true，但这只是使按钮不出现。

【讨论】：

【解决方案5】：

显然，webview 是在上次更新时才开始工作的。

尝试更新您的 Messenger 应用。

https://messengerblog.com/bots/messenger-platform-1-2-link-ads-to-messenger-enhanced-mobile-websites-payments-and-more/

【讨论】：

感谢您的建议，但我没有要更新的 Messenger 应用程序：我自己正在编写 JSON，所以我知道它正在生成我的问题中显示的 JSON。只是出于某种原因，Facebook 似乎忽略了webview_height_ratio 属性。
我不确定您所说的“我没有要更新的 Messenger 应用程序”是什么意思，但如果我理解正确，当您在 Messenger 中触摸从 JSON 创建的按钮时应用程序，它正在离开应用程序以使用浏览器打开页面。我的意思是你应该去 Google Play / App Store 更新你的 Messenger。
哦，我明白你的意思了。