og 元标记、社交按钮和 angularjs答案

【问题标题】：og meta tags, social buttons and angularjsog 元标记、社交按钮和 angularjs
【发布时间】：2013-06-12 06:05:06
【问题描述】：

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

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

每当网站上加载每个视图时，page_title 变量都会发生变化，并且 title 和 og:title 标签会更新（一切都按预期工作）。

问题是我需要在某些视图上加载 facebook、google+ 和 twitter 按钮。我可以正确显示它们，但如果我单击每个它们，页面标题似乎是这样的：

{{page_title}}

我尝试使用 setTimeOut 来延迟每个按钮的脚本的执行，但效果不佳。但是脚本只是读取所写的内容，它们不解析 page_title。

有人知道解决方法吗？

谢谢

【问题讨论】：

标签： facebook angularjs facebook-opengraph

【解决方案1】：

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

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

【讨论】：

检查prerender.io，它也是基于phantomjs，但似乎支持多个js框架和服务器平台，如node、java或php。
我在这里的一篇文章中概述了 Earl 的第一个建议（服务器端渲染）的简单实现：michaelbromley.co.uk/blog/171/…

【解决方案2】：

您还可以重新渲染 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]);
        }
    };
});

当在角度转发器中创建最后一个元素时，此 sn-p 将重新扫描 DOM 以查找类似 html5 facebook fb 的小部件。

【讨论】：