Facebook sharing problem with custom and dynamic data

Question

I need to choose an image from a gallery. This image is shown in a modal (using Bootstrap) and under it there's a Facebook sharing button. This button must share the chosen image at full-width, a custom title (always the same), a custom description (always the same) and, when a Facebook user clicks on the shared post, redirect to a custom URL (always the same, not the image one).

I've tried different ways (FB dev docs, http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript, different "method", different "action_type" etc) but I always experience different problems.

By following the drib.tech suggestions, here's the situation:

• web: it shares the right title, description and custom link but the image is always a thumbnail and it says "John Cats LIKES a link" instead of "John Cats SHARES". That's because I used "action_type": "og.likes", I think, but with any other type (og.shares etc) it shares wrong image, title and description (it takes the custom link data)
• Android (in app): it looks like the web result but then it doesn't close the popup
• iOS: nothing works, I assume it hates popups.

I've tried with iframe instead of popup but it says it's not allowed.

I've also tried with just the Facebook sharer URLs:

https://www.facebook.com/sharer/sharer.php?u=" + url + "&title=" + titolo + "&picture=" + picture
https://www.facebook.com/share.php?u=" + url + "&title=" + titolo + "&picture=" + picture

but the result is wrong image, title, description.

So... I've run out of ideas, my script is a mess and I can't find any other ideas. Any suggestions?

Answer 1

The latest updates from the FB API require another structure of the action_properties object.

This is a working example:

FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
            object: {
                "og": {
                    "url": your_url,
                    "title": your_title,
                    "image": {
                        "url": your_image_URL
                    }
                }
            }
        })
    }, function(response){});