Facebook 'Like' 按钮不使用 ':og' 标签答案

【问题标题】：Facebook 'Like' button doesn't use ':og' tagsFacebook 'Like' 按钮不使用 ':og' 标签
【发布时间】：2021-06-08 16:16:38
【问题描述】：

我目前正在开发一个 Ember.js 应用程序，但我在社交按钮方面遇到了很大的麻烦。我已经在这里做了一些研究，但没有什么帮助。

我的应用程序使用历史 API，og: 标签在页面转换时正确更改，但 Facebook 仍然使用我的 index.html 页面的初始值。致电FB.XFBML.parse() 也无济于事。

另外，FB OpenGraph 调试器显示来自我的index.html 的任何页面的信息，因此，我什至无法调试它的问题。

那么，有没有人遇到过这样的事情，并且可能想出了一个合适的解决方法？

【问题讨论】：

【解决方案1】：

您遇到的是预期行为。 Facebook scraper 将检查您的 URL 并提取存在的 og 标签（如果有）。

您的应用程序可能会很好地动态更改页面的内容（就像单页应用程序所做的那样），但 Facebook scraper 不会运行您的任何 JavaScript，因此它只会看到最初加载的 @ 987654324@页面。

您可以想象 Facebook 正在使用某种 cURL 或 wget - 不能（也不应该）解析/执行 JavaScript 或 CSS 的工具。 scraper 不在浏览器中运行 - 它不一定会看到与普通用户完全相同的东西。

为了能够提供多个“喜欢”插件，您的应用程序需要能够为每个“喜欢”项目提供唯一的 URL。这不一定可以从您的前端访问，但必须可以通过 Facebook scraper 访问。

我在过去的项目中所做的是为任何与 Facebook 相关的 scraping（例如 share_content.php）创建一个唯一的 URL，此页面将负责显示正确的 og 标签为请求。

例如：

 http://my-cool-site.com/share_content.php?item_id=5

share_content 代码将提取 item_id 并使用包含第 5 项值的 og 标记填充 HTML。

由于您可能不希望普通用户能够访问专门为 Facebook 生成的页面，因此您可以尝试识别和识别 Facebook 的 scraper 并仅向其显示内容 -如果普通用户访问这些页面，您可以重定向到实际资源。

有几种方法可以检测 Facebook 的 scrapers：

【讨论】：

@TwiStar - 哇......嗯......是的......听起来它完全符合您的需求。问题是你愿意为此维护另一个“服务器”吗？
好吧，因为我唯一的服务器是一个用 Yii 框架编写的 REST Api，服务器端呈现为零，我想设置另一个服务器可能比为 facebook 写 20 个视图更痛苦-and-share 插件。
@TwiStar - 我的意图是只编写一个可以接收参数的视图 - 但如果您没有服务器端代码来处理这个问题，我想使用其他解决方案也可以。