动态（Ajax）分享按钮（Facebook、Google+和Twitter），用于分享一张带有链接和描述的图片。

Question

我已经寻找解决方案几天了，但仍然无法弄清楚为什么它仍然不起作用。

我的目标是： 我有一个带幻灯片的网站。 图像会动态更改（使用上一页和下一页按钮）。 我只想在社交网络（Facebook、Google+和Twitter）上分享一张图片，并在我的主页上看到一小段描述和指向该页面的链接。

需要注意的是： 该图像是主要图像的缩略图（因此，其URL与主图像不同），我想发布的链接也不是当前页面（由于Ajax而是静态的）或图像页面的链接。

我尝试过的方法： 我在Facebook上几乎做到了，但是图像加载失败并且是使用共享按钮（似乎已被喜欢的按钮取代），至于Google+，当我点击+1时，+1按钮变为红色... 我尝试过XFBML和OpenGraph，但问题出现在Ajax上（即使使用createElement() URL也不会改变）。

我的问题是： 1. 是否有任何预打包的解决方案（例如addthis，但按照我想要的方式工作）？ 2. 或者您能否提供给我一个线索或解决方案吗？ 3. 我是唯一一个认为官方Facebook和Google+ Ajax文档很糟糕的人吗？

非常感谢。 雨果

附言：如果我可以使用浮出式窗口编辑将要共享的内容，那将是太棒了！

- user1110805

---

对于Google +1按钮，您可以使用JavaScript API（https://developers.google.com/+/plugins/+1button/#jsapi）来实现。但是，您无法通过JavaScript传递共享的内容。要共享的图像和描述必须存在于具有唯一URL的页面上。然后，您可以使用opengraph或schema.org标记标记此页面并将其用作+1。 是否存在一个显示图像和所需描述的唯一URL？ - mimming

这个问题需要花费很多精力来回答，因为在这三个社交网络中，发布和分享的API都非常不同。Twitter刚刚发布了一个图像API，但是与FB上的发布方法完全不同，这需要不同的答案和可能需要使用不同的技术来完成。你可以使用JS或HTTP请求来分享其中一个，而另一个则可能需要通过PHP发送POST请求。我建议将问题分成每个社交网络一个问题。此外，我之前见过这个问题，如果我能找到它，我会提供链接。 - Chamilyan

你有解决这个问题的办法吗？我也是一样。 - KeithComito

我猜，对于Facebook来说，你可以使用Like按钮的iFrame版本，并动态加载新的iFrame来完成。否则，你也可以使用FBML，但需要使用JavaScript方法FB.XFBML.parse重新解析fb：like。https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ - Alexcode

Answer 1

一种实现这个目标的方法是使用隐身技术。

设置一个页面，向社交应用程序（如Facebook、Google+）提供图像、标题和描述。然后，您可以使用JavaScript将用户重定向到您实际想要用户查看的页面。对于没有启用JavaScript的用户，该页面应显示指向目标页面的链接，并带有“如果您未自动重定向，请单击此处”提示。图像应存在于页面上，但您可以将其放置在样式为"display: none;"的div中，以便用户实际上看不到它。

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

- Ralph Ritoch

Answer 2

你正在使用的社交分享按钮都有一个共同点：当你分享对象的URL表示时，它们最有效。其中一些，即Facebook的“赞”按钮和Google的“+1”按钮，使用该页面的内容创建要共享的片段。

虽然这不是一个新问题。 AJAX应用程序的搜索索引 面临的是同样的问题。可悲的是，没有简单的解决方案。以下是一些具有挑战性的方法：

编程方案 您可以改进后端，使其能够为幻灯片展示中每个可共享步骤呈现页面：每个图像一个页面。当您浏览幻灯片时，您可以每次销毁并重新创建社交分享插件，以将其定位到该图像的机器可访问版本。

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

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

- mimming