prettyPhoto lightbox social tools: all images have the same number of Facebook likes

Question

Background: I have a site using a prettyPhoto lightbox to display photos. I've enabled social tools to display the 'tweet' and Facebook 'like' buttons on the lightbox, in hope to enable the ability to 'like' only the current photo being displayed to the one viewing it.

Problem: The Facebook 'like' button actually results in all photos in the same gallery being liked: all photos display the same number of likes in the lightbox; and on Facebook, the user's 'like' in their news feed or recent activity links to the gallery page rather than the actual photo that was liked.

What I've tried: I have tried editing the jquery.prettyPhoto.js file to add in the placeholder found in this answer: https://stackoverflow.com/a/11796964/2205165

I have also tried replacing 'location_href' with '{path}' to see if that used the photo's full path/URL, but it did not, or didn't appear to do so.

I've tried the above with 'deeplinking' enabled and disabled, with no avail.

Help: If anyone has a solution to enable Facebook liking and Twitter tweeting of individual photos from the prettyPhoto lightbox, I'm all ears. Even if it's to the degree of photos displaying the correct number of likes, rather than all having the same number: I'm not too fussed at this stage about linking back to the individual photo: linking back to the main gallery page will suffice for that.

Thank you!

Answer 1

In case anyone ever comes up on this again, This solution worked for me and it shares the image directly.

This is for images only, but there's no reason it wont work for the rest of the cases in PrettyPhoto.

In your PrettyPhoto parameters in prettyPhoto.js, switch out the facebook iframe to look like this with whatever params you want, all that matters here is that "{path}" is in the href spot of the iframe src:

<iframe id="fbiframe" src="//www.facebook.com/plugins/like.php?href={path}&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:26px;" allowTransparency="true"></iframe>'

Then around line 274 in the prettyPhoto.js file you should see this line:

$pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g, pp_images[set_position]);

Add another line just like it and replace the href for the src like below, again with whatever params you want, the point is that the href is replaces with the image location variable:

$('#fbiframe').attr('src', "//www.facebook.com/plugins/like.php?href="+pp_images[set_position]+"&width&layout=button&action=like&show_faces=false&share=true&height=26");