Fixed Thumbnails size/ratio and facebook og:image

marremp2

Active member
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

XenForo developer
Staff member
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:
HTML:
<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/tools/debug/sharing/?q=https://xenforo.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

Active member
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 :

upload_2017-6-18_12-10-5.png

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

XenForo developer
Staff member
:rolleyes:

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:
HTML:
<meta property="og:image" content="{$image}" />
Add:
HTML:
<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.
 

Chris D

XenForo developer
Staff member
Yes, possibly, though that fix may be somewhat more complicated.

We'll look at that in due course.
 

marremp2

Active member
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

XenForo developer
Staff member
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

XenForo developer
Staff member
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.
 
Top