knockout.js - 在单页应用程序中使用开放图(与 FB、G+、twitter 共享)

Question

我正在为我的单页应用程序使用 knockout (应用程序只有一个入口点，应用程序的 View 正在通过进行 ajax 调用和修改页面而改变)。

我是我的应用程序，我希望人们能够通过 fb、twitter、g+ 共享页面。在标准应用程序中，我会做这样的事情:

<meta property="og:title" content="page title" />
.. other things like url, image ..

在 fb 上分享页面的人会得到一个不错的页面标题。但是在SPA中，我的标题是在开始时创建的，但我正在用JS对其进行修改: $('meta[name="og:title"]').attr('content', 'new title');所有社交网络都采用旧内容(这是意料之中的，它写在 these resources 中)。

我的应用程序使用 JS 路由，所以每个不同的页面都有自己的特定地址，如下所示: http://domain.com/#!route/123 .阅读两个类似的问题，我得到了矛盾的答案:

这是not possible

这可以通过实现 specific server-side logic 来实现，它基于跟踪FB用户代理。

当然，第二个仅适用于 FB。

我的问题是:2014 年引擎解析开放图信息的方式是否有任何改进，是否可以在单页应用程序中正确使用它。我特别有兴趣在 FB、Twitter、G+ 上很好地呈现共享内容。

Answer 1

我的操作假设您了解 og 标签必须在服务器上呈现(即它们不需要 JS，如果您使用查看源代码，它们应该仍然存在)。

服务端渲染

您的第一个也是最好的选择是使用服务器端渲染在页面加载时插入 og 元标记。为此，您需要切换到 HTML5 (pushState/replaceState) 路由而不是 hashbang ( #! )，因为无法通过服务器读取哈希值。然后，您需要为您想要具有元标记的页面复制您的路由，并以与当前相同的方式为您的应用提供服务，只是预先填充了元标记。

明确的分享链接

或者，您可以让您的共享按钮在您的共享按钮上指定一个 href 指向一个页面，该页面只有元标记和重定向。

例如，您的分享按钮:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>

<div class="fb-share-button" data-href="https://example.com/articles/some-article/share" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticles%2Fsome-article%2Fshare&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

(根据 Facebook's documentation ，但这种方法理论上适用于任何社会服务)

关键位是 data-href属性和 u href 的查询字符串参数属性。该页面将呈现如下内容:

<!html>
  <meta property="og:title" content="page title">
  <script>
    document.location.href = 'https://example.com/articles/some-article'
  </script>
</html>

然而，这种方法有多个缺点:

直接从浏览器复制/粘贴 url 将导致缺少元标记。您可能会检测到服务器上的用户代理以重定向到 /share自动呈现这无关紧要，但这也需要更改为 HTML5 路由，在这种情况下，您不妨使用第一个解决方案

与后退按钮行为困惑。您的用户最终会遇到这样的情况:在单击共享链接之前，他们必须双击后退按钮才能返回原来所在的页面。

每个社交服务都需要一个按钮(或者如上所述进行基于用户代理的重定向)

将此视为“是的，它有效，但实际上不是一个好主意”的解决方案。

Prerender.io

最后(也是最简单的)解决方案是使用类似 prerender.io 的东西。 .我从来没有亲自使用过它，所以这就是我的输入结束的地方，但值得一提的是，这正是它创建的场景。