Facebook custom stories with big Image - Open Graph with Javascript

Question

I am trying to create a custom story that has a new image every time someone tries to post it. Now I have created an Object, and Action and a Story combining the two. What I would like to achieve is a story that looks like this https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.2178-6/851562_1376970469205025_523101852_n.png , yet all i seem to be getting is https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.2178-6/851560_389589627833470_1903099476_n.png

Lets say my Object is course and my action is run. Below is the code I have the does not return the correct results. The image I am including is 1200 x 630.

    FB.api(
        'me/namespace:run',
        'post',
        {
            course  : {

                "og:type"       :   "namespace:course",
                "og:url"        :   "http://example.com",
                "og:title"      :   "Title",
                "og:description":   "Description",
                "fb:app_id"     :   "####",
                "og:image"      :   "http://example.com/chart.png"
            },
            distance    : 25.5,
            location    : "Sample location: Longitude",
            message     : "Special Caption Message"
        }

I also tried using the 'user_generated' image flag, it displayed the image at full story width however when you click on the image it does not link you back to the website but it opens up the image in the modal box ( like a gallery image ).

I am not sure if it's the code or not. Maybe some settings I am unaware of. Let me know if there is any more information I can provide to get a solution for this issue.

Answer 1

You need to specify a width and a height:

"og:image:width":  1200,
"og:image:height": 650

I haven't tried it with a 630px height, but it appears that it should work and may even be better with a value of 630. See Facebook content sharing best practices.