Question

我正在使用多个视图创建网站。页面的标记和标记通过$ rootScope变量进行更改。所以我有类似

的东西

<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延迟执行每个按钮的脚本，但没有好处。但是脚本只是读取了所写的内容，它们不会解析page_title。

有没有人知道解决这个问题？

谢谢

Answer 1

这不能使用javascript完成。有些人认为Facebook正在阅读当前页面上的内容。不是。它使用相同的url（来自window.location.href）使用它的Scraper向您的服务器发出单独的请求，并且Facebook Scraper不运行javascript。这就是为什么在点击像Facebook分享按钮这样的东西时获得{{page_title}}的原因。您的内容必须由服务器生成，因此当Facebook访问该网址时，它可以预先获得所需的内容，而无需使用javascript。您可以通过几种方式解决服务器端渲染问题。

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

Answer 2

您还可以重新呈现Facebook小部件。使用他们的解析方法：

FB.XFBML.parse();

在完成你的角色之后

。它不适用于我的分享按钮（还有!!），但我在喜欢上测试它，这很酷。基本上它重新扫描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]);
        }
    };
});

在创建角度转发器中的最后一个元素时，此片段会重新扫描用于html5 facebook fb类小部件的DOM。

og元标签，社交按钮和angularjs

2 个答案: