动态 (Ajax) 共享按钮（Facebook、Google+ 和 Twitter）用于共享图像、链接和描述

Question

这几天我一直在寻找解决方案，但我无法弄清楚为什么它仍然不起作用。

这是我的目标： 我有一个附带节目的网站。图像是动态变化的（带有上一个和下一个按钮）。我只想在社交网络（facebook、google+ 和 twitter）上分享一张图片，然后在我的墙上看到这张图片，上面有一些描述和页面链接。

精度： 该图像是主图像的缩略图（因此，不是相同的 url），我要发布的链接既不是我所在的页面（由于 Ajax 是静态的）也不是图像。

我的尝试： 我几乎在 facebook 上得到了它，但是图像加载失败了，它带有一个分享按钮（似乎不赞成使用喜欢），对于 google+，+1 按钮在我点击后变成红色......我试过 XFBML和 OpenGraph，但问题在于 Ajax（url 是页面之一，或者即使使用 createElement("

问题： 1. 是否有任何打包的解决方案（如 addthis，但按我想要的方式工作）？ 2. 或者你有什么（或线索）给我吗？ 3. 我是唯一一个认为官方 facebook 和 google+ ajax 文档很烂的人吗？

非常感谢。 雨果

PS：如果我可以用我要分享的内容来编辑评论，那就太棒了！

Answer 1

实现此目的的一种方法是隐藏。

设置一个页面，为社交应用程序（又名 facebook、google+）提供图像、标题和描述。然后，您可以使用 Javascript 将用户重定向到您实际希望用户看到的页面。对于没有 Javascript 的用户，该页面应显示指向目标页面的链接，并带有“如果您没有被自动重定向，请单击此处”。图片应该存在于页面上，但您可以将其放置在 style="display: none;" 的 div 中所以用户实际上并没有看到它。

更高级的技术是使用 IP 地址和浏览器名称（用户代理）来确定访问者是用户还是社交网络机器人，并使用 502 临时重定向到您希望用户查看的页面访客不是社交机器人。社交机器人将显示一个包含图像、标题和描述的页面。

Answer 2

您使用的所有社交共享按钮都有一个共同点：当您共享的对象有一个 URL 表示时，它们都最有效。其中一些，即 Facebook 的点赞按钮和 Google 的 +1 按钮，使用该页面的内容来创建共享的 sn-p。

不过，这不是一个新问题。这与search indexing of AJAX applications 面临的问题相同。可悲的是，没有简单的解决方案。以下是几个具有挑战性的：

程序化解决方案 您可以改进您的后端，以便它能够为幻灯片放映状态下的每个可共享步骤呈现页面：每张图像一页。当您逐步浏览幻灯片时，您可以在每次将社交共享插件定位到该图像的本机可访问版本时销毁并重新创建它们。

快照解决方案 您可以使用能够执行 JavaScript 的爬虫工具来制作应用程序不同状态的快照。然后，您可以将社交分享按钮定位到当前状态的快照。

这可能需要较少的后端工作，但可能难以保持最新状态。