动态数据传递到 Facebook 和 linkedIn 共享答案

【问题标题】：Dynamic Data passing to Facebook and linkedIn sharing动态数据传递到 Facebook 和 linkedIn 共享
【发布时间】：2019-11-02 08:45:59
【问题描述】：

我有一个 HTML 页面，我在其中使用 javascript 根据查询字符串值加载内容.. 在 javascript 中，我有一些动态代码可以根据此查询字符串值在页面上加载单独的数据。

现在我的页面链接看起来像

https://example.com?datatype=1
https://example.com?datatype=2
https://example.com?datatype=3

基于此，我的页面数据会有所不同。现在我想在分享中添加 Facebook 和链接，并希望发送自定义信息以在 facebook 和 LinkedIn 上分享。

根据我的研发，这些数据可以使用元标记发布。正如我告诉你的，我的页面是一个纯粹的客户端页面。所以这些元标记不适用于动态数据。

谁能建议我如何将 URL、标题和描述发布到这个 linkedIn 和 facebook。

提前致谢

【问题讨论】：

对于 Facebook 上的普通分享，您将必须使用 OG 元标记。唯一可以在发帖时设置标题、描述和缩略图的情况是，您通过 API 将自己的 Facebook 页面作为您的页面发帖，并且之前已声明域所有权。对于在自己的时间线上共享您的 URL 的普通用户，它需要 OG 元标记。您将不得不在这里涉及某种形式的服务器端渲染。

标签： facebook facebook-graph-api linkedin facebook-social-plugins socialsharing-plugin

【解决方案1】：

所以，我想重点谈谈你在这里所说的一件事：

根据我的研发，这些数据可以使用元标记发布。正如我告诉你的，我的页面是一个纯粹的客户端页面。所以这些元标记不适用于动态数据。

这实际上不是完整的故事。即使您的网页是“纯客户端”，您仍然绝对需要一个 HTML 框架来保存它，即使它是最小的：<html><head><script type="text/javascript" src="...."></head></html>。您需要做的是编辑为您的客户端应用程序提供的文档。

您没有提到一种语言，所以我们假设您使用的是 ReactJS。此处的过程与其他客户端页面相同。

做了一个react项目后，我有这个文件，./public/index.html，里面是……

<!doctype html>
<html lang="en">
    <head>
        <title>Scheduler</title>
        <meta charset="utf-8" />
        <link id="css-root" href="" rel="stylesheet" type="text/css" />
    </head>
    ...
</html>

您需要做的就是将og: 标签插入您的LinkedIn。只需使用 Official LinkedIn Share Documentation 中描述的标签。这应该看起来像这样......

<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />

希望这会有所帮助！

【讨论】：