facebook is not showing image and video after share using feed dialog

Question

I am trying to share video link using Facebook share dialog but after sharing the url on Facebook, Facebook does not show the image and also does not play video on the Facebook after sharing it.

I am trying to share links like how YouTube share their videos on Facebook so that user can play the videos on the Facebook after sharing it. Here is my code

FB.ui(
    {
        method: 'share',
        quote: 'share it using facebook',
        mobile_iframe: true,
        href: 'https://example.com/raisingfundsthroughvideo',
        hashtag:'#websitename',
    }
);

in my meta tags i have also used the image width and height but still the image is not showing.

<meta property="og:image:type" content="image/jpg" /> 
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

facebook link debugger gives me this error on its page

Provided og:image, https://d3ekuwxfrjk8w6.cloudfront.net/folder/folder/filename could not be downloaded because it exceeded the maximum allowed sized of 8Mb or your server was too slow to respond.

the above image url is valid and I don't know why it is not showing the image is it because of the Cloudfront url?

Answer 1

I use cloudfront as well and at least for the thumbnail preview that you see after sharing a URL on the share dialog, I know that it must be an image served from the same website URL and the index.html has this:

<meta property="og:url" content="http://example.com/"/>
<meta property="og:image" content="http://example.com/assets/thumbnail.png"/>

And yes, you must comply with the size limits of the thumbnail image.

Update: The URL you provide in "og:image" has to be publicly visible which means that if you copy, paste and visit that URL on a new browser window you should see the thumbnail image.

In this example you would need to have an S3 bucket called example.com which has the content of your site and another one www.example.com which is empty but is setup for Static Website Hosting which redirects to example.com. Your cloud front needs to have be setup as follows:

• origin: example.com.s3.amazonaws.com
• cname: example.com, *.example.com (so that www.example.com works)

Go in your cloudfront distribution and click Edit you will see a place to enter the CNAMEs and enter example.com *.example.com and save the changes.

Click on the Origin tab and setup an origin as follows: Origin Domain Name: example.com.s3.amazonaws.com Origin ID: s3-example Origin Type: S3 Origin

Then wait until after cloudront re-enables your distribution.