Image for Facebook and Google+

[aschempp]

Automatically generate the header image tag.

https://www.contao-community.de/showthread.php?29103-Mediabox-Produktbild-HTML5&p=197212&viewfull=1#post197212

--- Originally created by andreas.schempp on 2012-04-20 15:22:31 (ID 3096)

[aschempp]

@qzminski how would you know what image to generate, and which size?

[qzminski]

We just need to provide the main fullsize image URL . As far as I know, Facebook and Google+ have their own mechanism to resize and adjust the external images.

[aschempp]

As far as I know, there is a minimum and maximum image size for Facebook...

[qzminski]

Hmm, then I'll check it. A few months ago I did a simliar thing and it was possible to add images of 800px high (if I remember correctly).

[aschempp]

Ok, then is was the ratio I mean. Would it make sense to define this in the shop config image sizes?

[qzminski]

The official docs say:

The URL of a picture attached to this post. The picture must be at least 50px by 50px (though minimum 200px by 200px is preferred) and have a maximum aspect ratio of 3:1 https://developers.facebook.com/docs/reference/dialogs/feed/

So there is no maximum size of the image. I think we should use the main product image in its original size.

[qzminski]

Regarding the Google+ I have found the following notes:

Images that are too small or not square enough will not be included in the +Snippet, even if explicitly referenced using schema.org microdata or Open Graph markup. Specifically, the height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0. http://stackoverflow.com/questions/6536213/are-there-tags-to-specify-the-google-1-story-format-in-google-like-og-meta-for

For the image on the +1 listing they take the first useable image. The important part here is that even though on the +1 listing the image is resized to 45px x 45px the image you want to be used must be over 125px (at least). I'm using an image 180px x 180px (nice for scaling down to 45 x 45) and making sure it's the first large image on the page. http://stackoverflow.com/questions/6628201/google-1-generated-thumbmail-in-profile/6679700#6679700

So I guess the 200px by 200px should be enough for both. Google+ seems to also be using the OpenGraph protocol, so we will have the same photo for both FB and G+.

The question is - should we have this feature by default or enabled by checkbox?

[aschempp]

I agree with the main image, but I don't know if the user should be able to configure something (e.g. position of the thumbnail, watermark etc.). We could use the shop config image sizes? Add default values for "facebook" and "google+" ?

[qzminski]

The only case where og tags will be added is product reader, so I suggest to add a dropdown field there. The user would be able choose appropriate image size of the thumbnail (from shop config). Use case:

1. Create an image size "facebook" in shop config
2. Choose from dropdown "Social image" the "facebook" value in the product reader configuration

By the way, should we add other og tags like title/url/description?

[aschempp]

Good point, yes the size should be selectable in the reader.

Adding other OG info would make sense (but only if an image size is selected), right?

[qzminski]

I think we can have a subpalette checkbox "Enable social features" and a short checkbox list:

• Image
• Title
• Description
• URL

[aschempp]

I'd go for "convention over configuration". If the user selects an image size for social media, they do want social media integration (and it does not make sense to enable separate features). I'm not sure about the description though, we should take the meta description here (if available). The product description is rich text and might be very complex and long.

[aschempp]

this can actually easily be done in the template so it would be fully customisable and easy to change.