使用 jsp 可以获取动态数据以在 Open Graph 协议中显示吗？答案

【问题标题】：Using jsp can I get dynamic data to display in Open Graph protocol?使用 jsp 可以获取动态数据以在 Open Graph 协议中显示吗？
【发布时间】：2017-10-10 00:01:06
【问题描述】：

我的应用程序中有一个特定页面，我希望用户能够分享他们在前一页面上所做的某些选择，这些选择是我从我的数据库中接收到的。

例如 - 我有一个用户 - Barry。我可以使用 ${user} 访问他的名字。

有人问了他一个问题：

当我问及 ${animals} 时，您首先想到的是什么

他们选择的答案已提交给数据库，我现在希望答案显示为 Facebook 的共享描述。显然，每个用户的答案都是独一无二的——所以我不能在这里硬编码任何信息。

我的代码如下：

<meta property="og:description" content="${user} thinks:%0A%0A<c:forEach var='animal' items='${animals}' >${animal} - ${animal.thoughts}%0A</c:forEach> />

当我查看页面的源代码时，我看到：

<meta property="og:description" content="Barry thinks:%0A%0AElephant - Gray%0ABird - Chirpy%0AMonkey - Funny%0ADog - Loyal />

但是，当尝试在 Facebook 上分享内容时，描述只是空的，就好像不存在描述一样。

不幸的是，这个页面只有在用户登录时才可用，所以使用 Facebook 刮板https://developers.facebook.com/tools/debug/ 只是向我显示了已注销登录页面的 og 数据。

我错过了什么吗？

编辑

基于下面@Cbroe 的cmets，我现在已经修改了代码以在公共页面上共享（即您无需登录即可查看的IE）。

我还将描述和图像位置设置为 URL 中的参数 - 这样任何共享此页面的人都会看到与其相关的描述和图像。

通过 Facebook 抓取工具运行完整 URL 时，我看到了我所追求的确切结果：但是，当实际从应用程序共享链接时，来自 URL 的动态信息将被忽略。

<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />

我的 og:url 包含完整的 URL，包括动态参数。如果其他人有任何想法，我很想听听。

编辑 2

由于公司政策，帮助 CBroe 调试的链接已被删除。我的回答中提供了示例链接。

【问题讨论】：

“我错过了什么吗？” - 除了显而易见的，你的意思是……？如果您将数据隐藏在爬虫一无所知的登录系统后面，您希望 Facebook 爬虫如何获取数据？
@CBroe - 我知道为什么刮板无法获取数据 - 但我仍然认为从页面共享正确的元描述时它会起作用？
好吧，你想错了。抓取工具将尝试从您要共享的 URL 中获取元数据。该请求与您当前页面访问者所看到的内容没有任何关系，它完全独立于此。
@cbroe - 好的 - 但是爬虫无论如何都无法获取用户提交的动态信息，不是吗？那么甚至可以共享这样的动态数据吗？正如我在帖子中提到的，在查看页面源代码时，og:description 具有动态数据。
@CBroe 哦，哇，先生，我欠你一杯啤酒。非常感谢您在整个过程中的洞察力。我将发布您在此过程中提出的所有建议的答案。你帮了大忙。

标签： facebook jsp facebook-graph-api

【解决方案1】：

非常感谢@CBroe 在这个过程中与我一起裸露并帮助我在 cmets 中脱颖而出，我现在已经找到了解决这个问题的方法。

首先，我创建了一个面向客户端的页面，该页面不需要用户登录即可查看。这将作为共享动态内容的页面。

我现在的代码如下所示：

元标记

<meta property="og:title" content="My Title" />
<meta property="og:url" content="${pageUrl}" /> // generates FULL URL including all parameters
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />

共享生成器（使用 jQuery）

var currentLink = encodeURIComponent(window.location.href); // NB to use encodeURIComponent instead of just encodeURI
var tWindow;
$('.facebookShare').on('touchstart click', function(){
    tWindow = window.open('about:blank', 'sharer', 'toolbar=0,status=0,width=548,height=325');
    tWindow.location.href = 'https://www.facebook.com/dialog/share?app_id=${facebookAppId}&display=popup&href=' + currentLink;
});

然后用于共享页面的链接如下所示：

https://[myURL]?description=My%20favourite%20animals:%20Elephant%20-%20gray%20%7C%20Dog%20-%20Cute%20%7C%20Cat%20-%20Cant%20be%20trusted%20%7C%20Leopard%20-%20Never%20changes%20its%20spots&image=[url_to_my_image]

使用此代码，在共享页面时，每次都会生成正确的（和动态的）图像和描述。

再次感谢 @CBroe 帮助我了解这一点 - 我希望这可以在未来帮助其他人。

【讨论】：