javascript - Angular 2 - 在 Facebook 上分享页面 URL、标题和描述

Question

我的最终目标很简单:

1. 用户点击了用户界面上的某个按钮。
2. 单击 调用的 Typescript 函数会在 Facebook 上为用户打开一个新的共享选项卡。
3. 共享页面的“标题”和“说明”均由我的站点提供。

我们有一篇关于在被链接页面上包含元标记的帖子，fb 知道将其包含为标题/描述 (How do I customize Facebook's sharer.php)。问题是我使用的是 Angular 2，所以我必须以某种方式在 facebook 看到它之前为页面动态添加元标记。

我很难想象它是如何工作的，因为我假设 FB 服务器会访问我的 NG2 应用程序并搜索元标记(因此在浏览器中打开共享链接编辑元标记是没有意义的，因为 FB API 将获取 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/，情况不再如此。 .看起来它必须从元标记中提取。

Answer 1

你应该看看@Share Buttons可能有帮助

npm install --save ngx-sharebuttons

应用模块

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

模板

<share-buttons></share-buttons>