Facebook og元标记、社交按钮和angularjs_Facebook_Angularjs_Facebook Opengraph

Facebook og元标记、社交按钮和angularjs

facebook angularjs

Facebook og元标记、社交按钮和angularjs,facebook,angularjs,facebook-opengraph,Facebook,Angularjs,Facebook Opengraph,我正在使用多个视图创建一个网站。标签和页面的标签通过$rootScope变量进行更改。所以我有点像 <html> <head> <title ng-bind="page_title"></title> <meta property="og:title" content="{{page_title}}"> </head> 我尝试使用setTimeOut延迟每个按钮脚本的执行，但没有效果。但是脚本只读取所写的

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

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

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

有人知道解决这个问题的方法吗

谢谢

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

您可以允许服务器端技术呈现内容

您可以使用PhantomJS方法

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

在你的角形动作完成之后。它对我的共享按钮不起作用（现在！！），但我在喜欢的东西上测试了它，很酷。基本上，它会重新扫描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中创建最后一个元素时，此片段将重新扫描html5 facebook fb类小部件的DOM。

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

FB.XFBML.parse();

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