如何使用 hashbang url 处理 Facebook 分享/点赞？答案

【问题标题】：How to handle facebook sharing/like with hashbang urls?如何使用 hashbang url 处理 Facebook 分享/点赞？
【发布时间】：2015-10-25 10:45:07
【问题描述】：

我正在构建一个网站，我将从主页将网站上的其他一些 URI 打开到灯箱 (AJAX) 中，并且我想使用 HTML5 推送状态和哈希爆炸作为后备来管理状态更改。

现在我希望 url 可以抓取并且 Facebook 可以分享/喜欢..

如果用户浏览器支持 HTML5 推送状态，没问题，他可以分享 URL（例如：http://myserver/example），Facebook 会在静态内容中找到合适的 OG 元数据。

但如果用户使用 HTML4 浏览器，他将有一个类似http://myserver/#!/example 的 url。我希望他无论如何都能通过 facebook 分享它......

现在看起来 Facebook 支持 _escaped_fragment_ 替换方法，所以我会简单地重定向来自 http://myserver/?_escaped_fragment_=/example 的请求到http://myserver/example 每个人都应该快乐……

所以我在我的 htaccess 中添加了一个重写条件：

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=([^&]*)
RewriteRule .* http://%{HTTP_HOST}/%1? [R=301,L,NE]

我的问题是我无法使其与 Facebook 一起使用，使用 Facebook linter 它似乎总是在 hashbang 之后的 URL 部分进行百分比转义，导致 URL 像 http://myserver/%2Fexample 到达 404 :-(

有人知道如何欺骗 Facebook 不转义这部分 URL 吗？我可以在 apache mod_rewrite 方面做点什么吗？

我也对任何其他有效的 ajax 可抓取/喜欢的 URL 策略持开放态度；）

【问题讨论】：

标签： ajax facebook mod-rewrite pushstate hashbang

【解决方案1】：

我认为http://facebook.stackoverflow.com/questions/8896773/opengraph-on-ajax-based-website 的回答为如何实现这一目标提供了一些非常好的建议。

这是内容：

没有。开放图标记必须出现在 HTML 页面上，这些页面可以通过纯 HTTP 获取。

这是因为当用户与 OG 对象交互（例如，执行操作等）时，Facebook 将对 OG URL 执行 HTTP GET，并希望看到标记中返回的 OG 标签。

解决方案是为每个对象创建规范的 URL。这些 URL 包含基本的 HTML 标记，包括 OG 标记。

在对这些 URL 的请求中，如果您看到传入的用户代理字符串包含“facebookexternalhit”，那么您将呈现 HTML。如果你不这样做，你会提供一个 302 重定向到你的 ajax URL。在 ajax URL 上，您的点赞按钮和您发布的任何 OG 操作都应指向规范 URL 对象

例子：

作为用户，我在 http://yoursite.com/#!/artists/monet。我点击了一个赞按钮，或者发布了一个动作，但是赞按钮的 href 参数，或者当您发布该动作时对象的 URL 应该是该对象的 Web 可点击的规范 URL - 在这种情况下，可能是 http://yoursite.com/artists/monet

当使用浏览器的用户点击http://yoursite.com/artists/monet 时，您应该将他们重定向到http://yoursite.com/#!/artists/monet，但如果传入的用户代理说它是 Facebook 的抓取工具，您只需返回代表艺术家莫奈的标记。

有关真实世界的示例，请参阅都使用此设计模式的 Deezer、Rdio 和 Mog。

【讨论】：

是的，我想将 facebook 重定向到“真实”url yoursite.com/artists/monet。我找不到如何使用 htaccess 规则重定向它们，但我最终使用 php 标头位置进行了重定向，并且效果很好。现在，当用户想要与 hashbang 共享 url 时，facebook 会看到带有 OG metas 的干净 url。
有谁知道这种方法是否也适用于 Twitter、LinkedIn、Pinterest 和其他 OpenGraph 网络？

【解决方案2】：

我结束了使用 php header() 重定向，它完美地工作：

if(isset($_GET['_escaped_fragment_'])) {
    Header( "HTTP/1.1 301 Moved Permanently" );
    header('Location: http://'.$_SERVER['HTTP_HOST'].$_GET['_escaped_fragment_']);
    die();
}

我不知道为什么我在使用 htaccess 重写条件时得到了转义字符。

【讨论】：

【解决方案3】：

如果您使用以下语法，您可以在 facebook 上分享 hashbang url：https://stackoverflow.com/a/6138879/372838

【讨论】：