Fancybox with "share" buttons linked to unique image

Question

I would like to display a facebook-like button within the Fancybox popup.

The interaction I'm imagining is similar to how Pinterest displays the social sharing buttons to the right of a modal popup (e.g. http://pinterest.com/pin/73465037641354472/). Each image has a unique url so that you can link to the content of the popup directly.

How can I:

Ensure that each image within my Fancybox gallery is attached to a unique URL
Display a Like button in the popup linked to that unique URL

For #1, I found the following code discussed in the following page: this.id inside of fancybox

$("a.fancybox").each(function() {
  var element = this;
  $(this).fancybox({
    'titleFormat'   : function() {
      var astring = '<span>' + element.id + '</span>';
      return astring;
     }
  });
});

Is this the code that I need? If so, what do I do in the HTML in order for this JavaScript to work properly?

Thanks so much for any help!

DMCS DMCS · Accepted Answer · 2012-02-13T14:20:08

You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.

Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.

EDIT

Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags.

http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3

Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.

See http://ogp.me for how to specify og tags.

Fancybox with "share" buttons linked to unique image

1 Answers