16

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

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

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

問題は、いくつかのビューで facebook、google+、および twitter ボタンをロードする必要があることです。それらを適切に表示できますが、それぞれをクリックすると、ページのタイトルは次のようになります。

{{page_title}}

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

誰もこれに対する回避策を知っていますか?

ありがとうございました

4

2 に答える 2

29

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

  1. サーバー側のテクノロジーがコンテンツをレンダリングできるようにすることができます。
  2. PhantomJS アプローチhttps://github.com/steeve/angular-seoを使用できます。
于 2013-07-08T18:24:06.727 に答える
1

Facebook ウィジェットを再レンダリングできる可能性もあります。parseメソッドを使用します。

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]);
        }
    };
});

このスニペットは、angular リピーターで最後の要素を作成するときに、html5 facebook fb のようなウィジェットの DOM を再スキャンします。

于 2013-12-05T02:02:10.247 に答える