web-dev-qa-db-ja.com

ogメタタグ、ソーシャルボタン、angularjs

複数のビューを使用してWebサイトを作成しています。タグとページのタグは、$ rootScope変数を介して変更されます。だから私は

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

各ビューがWebサイトに読み込まれるたびに、page_title変数が変更され、titleタグとog：titleタグが更新されます（すべてが期待どおりに機能します）。

問題は、Facebook、Google +、Twitterボタンをロードするためにいくつかのビューで必要なことです。正しく表示できますが、それぞれをクリックすると、ページタイトルは次のようになります。

{{page_title}}

SetTimeOutを使用して各ボタンのスクリプトの実行を遅らせようとしましたが、うまくいきませんでした。ただし、スクリプトは書き込まれたものを読み取るだけで、page_titleを解析しません。

誰かがこれの回避策を知っていますか？

ありがとうございました

facebookangularjsfacebook-opengraph
16
Terumi

これは、javascriptを使用して行うことはできません。 Facebookが現在ページにあるものを読んでいると考える人もいます。そうではありません。 Scraperを使用して（window.location.hrefから）同じURLを使用してサーバーに個別のリクエストを行い、FacebookScraperはjavascriptを実行しません。 Facebookの共有ボタンのようなものをクリックすると{{page_title}}が表示されるのはそのためです。コンテンツはサーバーによって生成される必要があるため、FacebookがURLにアクセスすると、JavaScriptを使用せずに必要なコンテンツを事前に取得できます。サーバーサイドレンダリングには、いくつかの方法で取り組むことができます。

  1. サーバー側のテクノロジにコンテンツのレンダリングを許可できます。
  2. PhantomJSアプローチを使用できます https://github.com/steeve/angular-seo 。
29
Earl Ferguson

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リピーターで最後の要素を作成するときに、html5 facebookfbのようなウィジェットのDOMを再スキャンします。

1
Zlatko