Angular 2 - 在Facebook上共享页面URL,标题和描述

Question

我的最终目标很简单:

1. 用户单击UI上的某个按钮.
2. 被调用的Typescript函数click在Facebook上为用户打开一个新的共享选项卡.
3. 共享页面的"标题"和"描述"均由我的网站提供.

我们在链接的页面上有一个包含元标记的帖子,fb知道包括作为标题/描述(如何自定义Facebook的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:共享者曾经允许您在网址中输入标题和说明,但根据https://developers.facebook.com/x/bugs/357750474364812/不再是这种情况.看起来它必须从元标记中提取.

Answer 1

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

npm install --save ngx-sharebuttons

的AppModule

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

模板

<share-buttons></share-buttons>

Answer 2

尝试以下代码 -

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."/>'