OG元标记、社交按钮和AngularJS

Question

OG元标记、社交按钮和AngularJS

16

我正在使用多个视图创建网站。通过$rootScope变量，页面的<title>和<meta>标签会发生变化。因此，我有类似下面的代码：

<html>
<head>
   <title ng-bind="page_title"></title>
   <meta property="og:title" content="{{page_title}}">
</head>

每当网站上的每个视图被加载时，page_title变量会更改，标题和og:title标签也会随之更新（一切都按预期工作）。

问题是，在某些视图上，我需要加载Facebook、Google+和Twitter按钮。我可以正确地显示它们，但如果我单击其中任何一个，页面标题似乎会变成：

{{page_title}}

我尝试使用setTimeOut延迟每个按钮的脚本执行，但是没有效果。但是脚本只读取写入的内容，不解析页面标题。

有人知道解决办法吗？

谢谢

- Terumi

2个回答

1

你也有可能重新渲染 Facebook 插件。使用他们的 parse 方法：

FB.XFBML.parse();

在你的Angular代码完成后，使用它。它还不能用于我的分享按钮（但是!!），但我已在喜欢功能上测试过了，效果很棒。基本上，它会重新扫描DOM并呈现Facebook小部件。你还可以将其传递给单个元素，类似于这个指令：

'use strict';    
angular.module('ngApp')
.directive("fbLike", function($rootScope) {
    return function (scope, iElement, iAttrs) {
        if (FB && scope.$last) {
            FB.XFBML.parse(iElement[0]);
        }
    };
});

这段代码会在Angular repeater创建最后一个元素时重新扫描DOM，以查找HTML5 Facebook fb-like小部件。

- Zlatko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Earl Ferguson · Accepted Answer

无法使用JavaScript完成此操作。有些人认为Facebook正在阅读当前页面上的内容，但实际上不是这样。它使用与window.location.href相同的URL（使用其Scraper）向您的服务器发出单独的请求，并且Facebook Scraper不运行JavaScript。这就是为什么在点击Facebook共享按钮之类的内容时会得到{{page_title}}的原因。因此，您的内容必须由服务器生成，以便当Facebook访问该URL时，它将立即获得所需的内容，而无需JavaScript。您可以通过以下几种方式解决服务器端呈现问题：

您可以允许服务器端技术呈现内容。
您可以使用PhantomJS方法https://github.com/steeve/angular-seo。