web-dev-qa-db-ja.com

Angular 2-FacebookでページのURL、タイトル、説明を共有する

私の最終目標は簡単です：

  1. ユーザーがUIのいくつかのボタンをクリックします。
  2. clickによって呼び出されるTypeScript関数は、ユーザーのFacebookに新しい共有タブを開きます。
  3. 共有ページの「タイトル」と「説明」はどちらもサイトから提供されています。

リンクされているページにメタタグを含めることに関する投稿があり、タイトル/説明として含めることがわかっています（ Facebookのsharer.phpをカスタマイズするには ）。問題は、私がAngular 2を使用しているため、Facebookで表示される前に、ページにメタタグを動的に追加する必要があることです。

FBサーバーがNG2アプリにアクセスしてメタタグを検索すると想定しているので、それがどのように機能するかを想像するのに苦労しています（共有リンクを開いているブラウザーでメタタグを編集しても意味がありません。FBAPIが異なるためです。 htmlのインスタンス）。

tl; dr：NG2アプリからfb url共有ダイアログを開き、タイトル/説明を提供するにはどうすればよいですか？

注：「fbで共有」ページは、次のように簡単に開くことができます。window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com');これは機能しますが、パラメーターはありません。

オプションの付録（メタタグを動的に追加するサンプルコード。これは機能しますが、役に立ちません）：

var titleMeta = document.createElement('meta');
var descMeta = document.createElement('meta');

titleMeta.setAttribute('property', 'og:title');
titleMeta.setAttribute('content', 'The Rock');

descMeta.setAttribute('property', 'og:description');
descMeta.setAttribute('content', 'Foo Description');

document.getElementsByTagName('head')[0].appendChild(titleMeta);
document.getElementsByTagName('head')[0].appendChild(descMeta);

補遺2：タイトルと説明をURLに入れることを許可するために使用されていた共有者ですが、 https://developers.facebook.com/x/bugs/357750474364812/のように、そうではありません。 。メタタグからプルする必要があるようです。

javascriptfacebookangularmeta-tags
13
VSO

@ Share Buttons が役立つはずです

npm install --save ngx-sharebuttons

AppModule

import {ShareButtonsModule} from 'ngx-sharebuttons';
@NgModule({
  imports: [
   //...
   HttpModule, 
   ShareButtonsModule.forRoot(),
  // ...
  ]
})

テンプレート

<share-buttons></share-buttons>
6
Rahul Singh

問題は、Facebookクローラーはサーバー側でレンダリングされたHTMLのみを表示し、Facebookはクライアント側のJavaScriptを実行しないことです。これが、メタタグを更新するコードがまったく役に立たない理由です。

オプション-

1）phantom.jsのようなサーバー側レンダリングのオプションを確認します

2）アプリケーション全体でタイトルと説明が1つだけの場合は、メタタグをルートindex.htmlに直接配置します（ベースHrefを指定してアプリ、ベンダーのJavaScriptバンドルをロードします）。コメントで@Stuartが指摘したように

2
jonuojha

次のコードを試してください-

var windowObj = window.open();
windowObj.document.head.innerHTML='<meta property="og:title" content="The Rock"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/><meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/><meta property="og:site_name" content="IMDb"/><meta property="fb:admins" content="USER_ID"/><meta property="og:description"      content="A group of U.S. Marines, under command of               a renegade general, take over Alcatraz and               threaten San Francisco Bay with biological               weapons."/>'
1
Rakesh Chouhan

クライアント側のレンダリングを使用している場合、Facebookクローラーはページでjsを実行できないため、サーバーから返されるHTMLを取得し、OGメタタグを検索します。

  • コンテンツが動的にレンダリングされる場合は、サーバー側でそれらのメタタグをindex.htmlに追加する必要があります。 （バックエンドで何を使用してインデックスを提供/生成しているのかわかりませんが、たとえば handlebars.js を使用できます）

  • それ以外の場合は、これらのメタタグを直接index.htmlに挿入してください

  • その後、ここでテストできます→ https://developers.facebook.com/tools/debug/sharing

1
Maielo

Angular 2を使用している場合、HTMLレンダリング前のダイナミックメタタグは、クライアント側でAngular 2を使用してレンダリングすることはできません。 Angular 2、サーバー側のレンダリングでのみ可能です。

Angular 4.で解決されます。このリンクで確認できます-

ここをクリック

0
Aman Jain

これがタイトルの説明を変更するのに役立つかどうか angular-2-seo

0
Jonathan Zhao