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.

Thumbsdown

Where are you looking to see the story? Facebook displays stories differently depending on where you look at them. For example on timelines, the large image is NEVER shown. Open up the individual post (by clicking the time posted) and you'll likely see the big image. – Unstoppable

commenting because i've got the exact same question. – Navigate

@Thumbsdown I've answered your question with a solution that worked perfectly for the same problem you had. – Conger

I'm having the same issue. @Freeocde, have you ever been able to resolve it? – Sokoto

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.

Conger

doesn't work for me. My image size is 1200 x 628 = 1.91:1 as said in the docs. But i only see the small image on the left site. – Adularia

This does not solve the issue because providing width and height only allows to render the image immediately without having to asynchronously download and process it. – Sokoto

Answer 2

Try to use an image with 1200X650 as stated instead of 1200X630. as stated on documentation images must keep aspect ratio.

Obryan