Fancybox 具有“共享”功能链接到独特图像的按钮

Question

我想在 Fancybox 弹出窗口中显示一个类似 facebook 的按钮。

我想象的交互类似于 Pinterest 在模式弹出窗口右侧显示社交共享按钮的方式（例如 http://pinterest.com/pin/73465037641354472/）。每个图像都有一个唯一的 URL，以便您可以直接链接到弹出窗口的内容。

我如何：

1. 确保 Fancybox 库中的每个图像都附加到唯一的 URL
2. 在链接到该唯一 URL 的弹出窗口中显示“赞”按钮

对于 #1，我发现以下页面中讨论了以下代码： fancybox 内的 this.id

$("a.fancybox").each(function() {
  var element = this;
  $(this).fancybox({
    'titleFormat'   : function() {
      var astring = '<span>' + element.id + '</span>';
      return astring;
     }
  });
});

这是我需要的代码吗？如果是这样，我应该在 HTML 中做什么才能让 JavaScript 正常工作？

非常感谢您的帮助！

Answer 1

您需要有一种基于唯一 URL 的机制来提供正确的 http://ogp.me og：由 Facebook 的 linter 解析的元标记。

请记住，linter 不运行 javascript，因此需要在响应流中正确定义它们。

编辑

每个图像都有自己的 URL 的示例。这些将有助于 Facebook 获得正确的 html 和 og: 标签。

http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3

在来自每个唯一 URL 的 HTML 响应中，指定了正确的 og: 标记。在该 HTML 中，您应该有一个 javascript 重定向到实际页面以显示图片。由于 linter 不会运行 javascript，因此 linter 应该能够读取这些 og: 标签。

请参阅 http://ogp.me 了解如何指定 og 标签。