Javascript Angular 2-在Facebook上共享页面URL、标题和说明

我的最终目标很简单：

用户单击UI上的某个按钮

单击

调用的Typescript函数为用户在facebook上打开一个新的共享选项卡

我的网站提供了共享页面的“标题”和“说明”

我们有一篇关于在被链接的页面上包含metatags的帖子，fb知道会将其作为title/description（）包含。问题是我使用的是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');这可以工作，但没有参数


可选附录（用于动态添加元标记的示例代码，可以使用，但没有帮助）：

附录2：共享者过去允许您在url中输入标题和描述，但根据的情况已不再如此。看起来它必须从元标记中提取。
请尝试以下代码-

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

var windowObj=window.open（）；
windowObj.document.head.innerHTML=''
你应该看看@可能会有帮助

npm install --save ngx-sharebuttons

AppModule

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

<share-buttons></share-buttons>

模板

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

<share-buttons></share-buttons>


这是否可以帮助您修改标题说明
 问题是Facebook爬虫程序只会看到服务器端呈现的HTML，Facebook不会执行客户端javascript。这就是为什么更新元标记的代码根本帮不上忙的原因

选择权-

1） 查看服务器端渲染的选项，如phantom.js

2） 如果整个应用程序中只有一个标题和描述，那么直接将meta标记放到root index.html（在这里我们指定Base Href并加载应用程序、供应商javascript包）。正如@Stuart在评论中指出的，如果您使用客户端呈现，Facebook crawler无法在页面上执行js，因此它会获取从服务器返回的HTML并搜索OG元标记


如果它是动态呈现的内容，您需要在服务器端将这些元标记添加到您要返回的
index.html
。（我不确定您在后端使用什么来服务/生成索引，但您可以使用例如）
否则，只需将这些元标记直接放入
index.html

然后你可以在这里测试它→ 

如果使用Angular 2，则无法使用Angular 2在客户端进行HTML呈现之前使用动态元标记。使用Angular 2时，只能在服务器端渲染

它在角4中解析。
你可以在这个链接上看到-

您需要将这些元标记添加到要共享的实际页面中。阅读你发布的链接中的答案。如果该页面是一个角度2组件，我该怎么做？它是什么并不重要。无论您在哪里创建html页面的实际页眉，都会在那里添加元标记。这对我没有帮助：“如果您使用的是元标记模块，如ngx meta、ng2 meta、angular meta service…等，它将不会帮助社交网络识别元标记，因为它们使用javascript更新元标记，而这些社交网络还不支持javascript执行。”这是可变的。对于不同的组不同。