Pinterest style image sharing for Facebook & Twitter

Question

We have several pages that contain multiple images we would like to make "Social". I've successfully embedded the code for the Pinterest "Pin It" widget for each of theses images. After an extensive search I have not found a solution to "Share" or "Tweet" these images in a similar manor.

I am aware of the meta tags that Facebook uses and the Twitter Cards used by Twitter. However this tags are page specific, not image specific. And I don't want to rely on the user to flip through thumbnails to select the image intended to be shared.

So... does anyone have a solution for this?

Answer 1

Can you not use multiple share buttons, each of them with an absolute URL to the image? Like so for 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>

And like so for 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>

You'll need to replace some variables in the above code, and generate a Facebook App ID, by visiting http://developer.facebook.com

You only need to include the script elements once. Then duplicate the <div>/<a href> for each image.