Fixed Thumbnails size/ratio and facebook og:image

[marremp2]

Hi,
I noticed that when someone shares on facebook an embed video page from the gallery, facebook does not use the thumbnail image set in og:image but other images it found in the page (in widgets for example).
After some research, I think it may be due to the format of thumbnail (square), which has been cropped from images uploaded as thumbnail or directly from Youtube thumbnail.
Is there a way to solve this problem ? => change thumbnails width/height ratios ?
Many thanks for your help, I just launched the media gallery on our site, and this problem is really blocking for social sharing.

 

[Chris D]

This looks to me like some sort of bug or change on Facebook's side.

There's a load of best practices here:
https://developers.facebook.com/docs/sharing/best-practices#images

The important bit:

Minimum Image Size
The minimum image size is 200 x 200 pixels. If you try to use an image smaller than this you will see an error in the Sharing Debugger.

If you take a video like this, for example:
https://xenforo.com/community/media/cyrus-origins.1758/

The image tag is:

<meta property="og:image" content="https://xenforo.com/community/data/xengallery/youtube/youtube_um5RiDroMUo_thumb.jpg" />

And, as you can see, the image is the thumbnail of the video which by default is 300 x 300:

The OG debugger doesn't seem to have any issues with this:
https://developers.facebook.com/too...nforo.com/community/media/cyrus-origins.1758/

There's not even any warnings.

Yet, the thumbnail is not showing for some reason, and that's what leads me to believe this is an undocumented change or a bug......

OK, this is weird. I started writing this message a few hours ago but got wrapped up in something else. Since I did, the image appears to now be working. So maybe this was a temporary issue after all?

 

[marremp2]

Thank Chris for the tip !

I checked the media page with OG debugger, and the problem was coming from too much delay to get the thumbnail due to an ad script present in the page.
I removed the script and FB found the right thumbnail for this page.

Though when I tested an other media page, I had an other issue :



This is in french, it says that new images are treated in an asynchronous way and that if I want that new pages shared on facebook have images, I need to include width and height properties.

How can I add these properties ?

 

[Chris D]

That's new... literally that has come in to action since we last discussed this.

We will need to make changes in the next release.

For now, please edit the following template:
xengallery_meta_data

And below:

<meta property="og:image" content="{$image}" />

Add:

<meta property="og:image:width" content="{$xenOptions.xengalleryThumbnailDimension.width}" />
<meta property="og:image:height" content="{$xenOptions.xengalleryThumbnailDimension.height}" />

You will need to revert that template before the next update.

 

[marremp2]

Thanks !
Any change to do for other page thumbnails ? (threads, resources ?)

 

[Chris D]

Yes, possibly, though that fix may be somewhat more complicated.

We'll look at that in due course.

 

[marremp2]

ok thanks.
An other question that may be related (??) : when I share a thread page from my site, the image displayed by Facebook is the logo of Xenforo. I updated xenforo recently, so I thought that was the reason and I modified the logo.og.png but facebook still displays the wrong image.
Could it be related to my site cache ? facebook cache ? the new og:image rules ??

 

[Chris D]

You can change the URL of your open graph image in style properties. That is recommended and it will force a cache expiry on FB's end too. It will also mean upgrades won't overwrite any changes you made.

 

[Chris D]

We'll be outputting the width/height tags in XFMG 1.x, but not making changes elsewhere just yet. Mostly because most other pages don't actually have a large enough image to display.

This sort of changes in XF2 where we do potentially have a large enough image to output and know its width/height (we support high resolution avatars for new avatar uploads) so you will eventually see some changes there.