适用于 Facebook 和 Twitter 的 Pinterest 风格图像共享答案

【问题标题】：Pinterest style image sharing for Facebook & Twitter适用于 Facebook 和 Twitter 的 Pinterest 风格图像共享
【发布时间】：2014-04-06 01:25:09
【问题描述】：

我们有几个页面，其中包含我们想要制作为“社交”的多张图片。我已经成功地为这些图像中的每一个嵌入了 Pinterest“Pin It”小部件的代码。经过广泛搜索后，我没有找到在类似庄园中“分享”或“推特”这些图片的解决方案。

我知道 Facebook 使用的元标记和 Twitter 使用的 Twitter 卡片。但是，此标签是特定于页面的，而不是特定于图像的。而且我不想依赖用户翻阅缩略图来选择要共享的图像。

那么...有没有人对此有解决方案？

【问题讨论】：

标签： facebook image twitter share

【解决方案1】：

你不能使用多个分享按钮，每个按钮都有一个图片的绝对 URL 吗？就像 Facebook 一样...

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=[App ID]";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://[full-path-to-image].jpg" data-type="button_count"></div>

Twitter 也是如此......

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://[full-path-to-image].jpg" data-via="{Twitter handle}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

您需要替换上述代码中的一些变量，并通过访问http://developer.facebook.com 生成一个 Facebook 应用 ID

您只需要包含一次脚本元素。然后为每张图片复制<div>/<a href>。

【讨论】：

不确定 Facebook 代码，但在我看来，就像来自我们自己帐户的推特一样。我弄错了吗？
data-via 变量将在推文末尾附加“via @username”。所以它不会来自您的帐户，但会显示一个返回您帐户的链接。如果你不想要这个，你可以从 href 中删除 data-via
感谢您的帮助。您的解决方案有效，因此我将其标记为已回答。但我确实想评论一下，由于 Facebook 和 Twitter 小部件的限制，这不如 Pinterest“Pin It”小部件好。将 data-href 值设置为图像 url 确实会显示图像，但您不能设置默认文本，并且返回的链接仅指向图像，而不是图像所在的页面。 Twitter 允许这样做，但不显示图像（为此必须使用 Twitter 卡片）。