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

【问题标题】：Angular 2 - Share page URL, Title, and Description on FacebookAngular 2 - 在 Facebook 上分享页面 URL、标题和描述
【发布时间】：2017-08-25 19:25:22
【问题描述】：

我的最终目标很简单：

用户单击 UI 上的某个按钮。
click 调用的 Typescript 函数会在 facebook 上为用户打开一个新的共享选项卡。
共享页面的“标题”和“描述”均由我的网站提供。

我们有一篇关于在所链接页面上包含元标记的帖子，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/ 已不再是这种情况。看起来它必须从元标记中提取。

【问题讨论】：

您需要将这些元标记添加到您要共享的实际页面。阅读您发布的链接中的答案。
如果该页面是 angular 2 组件，我该怎么做？
不管它是什么。无论您在何处创建 html 页面的实际头部，您都将在其中添加元标记。

标签： javascript facebook angular meta-tags

【解决方案1】：

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

npm install --save ngx-sharebuttons

AppModule

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

模板

<share-buttons></share-buttons>

【讨论】：

这对我没有帮助：“如果您使用的是元标记模块，例如 ngx-meta、ng2-meta、角度元服务 ...等，它不会帮助社交网络识别元标记，因为它们使用 javascript 更新它们，而这些社交网络还不支持 javascript 执行。”

【解决方案2】：

问题是 Facebook 爬虫只会看到服务器端呈现的 HTML，Facebook 不会执行客户端 javascript。这就是您更新元标记的代码根本没有帮助的原因。

选项-

1) 查看像 phantom.js 这样的服务器端渲染选项

2) 如果整个应用程序中只有一个标题和描述，则将元标记直接放入根 index.html（我们在其中指定 Base Href 并加载应用程序、供应商 JavaScript 包）。正如@Stuart 在评论中指出的那样

【讨论】：

它是可变的。不同组别不同。

【解决方案3】：

试试下面的代码 -

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

【讨论】：

【解决方案4】：

如果你使用客户端渲染，Facebook爬虫无法在页面上执行js，所以它会获取从服务器返回的HTML并搜索OG元标记。

如果它是动态呈现的内容，您需要在服务器端将这些元标记添加到您要返回的index.html。（我不确定您在后端使用什么来服务/生成索引，但您可以使用例如handlebars.js）
否则只需将这些元标记直接放入您的index.html
然后您可以在这里进行测试 → https://developers.facebook.com/tools/debug/sharing

【讨论】：

【解决方案5】：

如果这可以帮助您修改标题描述？ angular-2-seo

【讨论】：

【解决方案6】：

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

在 Angular 4 中已解决。你可以在这个链接上看到-

Click Here

【讨论】：