Facebook& Pinterest风格的图像共享推特

时间:2014-03-04 13:22:16

标签: facebook image twitter share

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

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

所以......有没有人有解决方案?

1 个答案:

答案 0 :(得分: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 App ID

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