Dynamic (Ajax) share buttons (Facebook, Google+ and Twitter) to share an image, with a link and a description

Question

It's been few days I'm looking for a solution and I can't figure out why it's still not working.

Here is my goal: I have a website with a sideshow. The images are dynamically changed (with previous and next buttons). I just want to share an image on social networks (facebook, google+ and twitter) and actually see the image in my wall with a little description and the link to a page.

Precision: The image is a thumbnail (so, not the same url) of the main image and the link I want to publish is neither the page I'm on (which is static due to Ajax) nor the image one.

My tries: I have almost got it on facebook but the image loading failed and it was with a share button (which seems to be deprecated in favor of like) and for google+, the +1 button become red after I click it... I tried XFBML and OpenGraph, but the problem is with Ajax (url is the one of the page or is not changed even with createElement("

Questions: 1. Is there any packaged solution (like addthis, but working the way I want)? 2. Or do you have one (or a clue) for me please? 3. Am I the only one to think that offical facebook and google+ ajax documentation are lame?

Thanks a lot. Hugo

PS: if I could have a fly-out to edit a comment with the content I'm about to share, it would be fantastic!

Answer 1

One way to accomplish this is with cloaking.

Setup a page which provides the image, title, and description to the social application (aka. facebook, google+). You can then use Javascript to redirect the user to the page you actually want the user to see. For users without Javascript the page should display a link to the target page with a "Click here if you are not automatically redirected". The image should exist on the page but you can place it in a div with style="display: none;" so the user doesn't actually see it.

A more advanced technique would be to use the IP address and browser name (user agent) to determine if the visitor is a user or a social network robot and using a 502 temporary redirect to the page you want the user to see if the visitor is not a social robot. The social robots would be shown a page which has the image, title and description.