Set the image used for social network sharing?

Yes, that’s good in Discourse but I’m talking about posting links to Discourse topics in Facebook, Twitter and so on.

They don’t do what Discourse does, they show a blank image unless you put those tags. Try it. But once we put those meta tags, now they override everything.

I’m just saying, it would be a great idea for forums to have a field for a default image that is used when posting, but overridden when the topic has a better image. (And if you really want to get fancy, then topics can have one.)

The meta tags I’m talking about are og:image and twitter:card

This isn’t really correct.

For the topic case https://cards-dev.twitter.com/validator shows

For the post case https://cards-dev.twitter.com/validator shows

I tend to agree that we should normalize behavior here, in the first case… when no image exists in the first post, go ahead and use the site logo cc @techAPJ

But note that the link on your twitter refers to a post that does not exist:

https://forum.intercoin.org/t/wall-st-conference-at-mar-a-lago/391/2

There is no post #2 in that topic…

6 Likes

I agree regarding that. Just go to Facebook.com and paste a link to a Discourse post with no images. Is it blank?

My apologies. Just tried it and Facebook seems to have changed its behavior, now it pulls the image correctly when sharing this page.

If I want a large image, though, I would have to somehow set the meta og:image

Anyway… thanks for your attention!

3 Likes

I also wanted to say that I found the settings I was advocating are already in the Settings! Cool!

I like the way this works, and images in social shares are very effective.

However, I find that many first posts in topics don’t include images, so I have to massage my posts on Twitter and Facebook to include an image. This is a) fiddly and b) only benefits my social media shares and not other peoples’

I’d really appreciate a new feature allowing mods/admins to upload an image to assign to a topic for the purposes of social shares.

We could go in and edit people’s posts to include an image, but I have found people can take issue with the content of their posts being edited, understandably so. And they may not understand why their posts are being edited to include an image.

As already stated above, we’re going to change it so the site logo is used for topic links if there are no images in the first post, since that’s how Discourse oneboxes other Discourse instances already, see examples posted earlier in this very topic.

However for deep links to individual posts, the user avatar will still be used if the post does not contain an image.

1 Like

Yes, I can already get this behaviour by setting the default OG image.

However, this isn’t as engaging or topical as an image that’s tailored to the topic in hand.

It would be great for mods/admins to be able to upload and assign an image per topic

Yes, and they can do that by editing the first post, or changing the site’s logo.

This is not on any of our roadmaps for the forseeable future.

3 Likes

No worries. I may see if I can reuse the image upload code from core settings, and the Topic List Previews code that @angus wrote and perhaps I can knock up a plugin to achieve this.

Currently if the topic first post does not have an image we are defaulting to opengraph_image setting. I’ll modify the code to use logo if the opengraph_image setting is blank. So the priority for topic opengraph image will be: first post image > opengraph_image > logo.

5 Likes

Yes this is a great fallback.

1 Like

Also apologies I forgot we added that other per-category social media share image setting. I kinda blacked that out due to trauma over the earlier discussion :face_with_head_bandage:

5 Likes

When working on adding this feature I caught a bug. I noticed that right now here is how we prioritize OpenGraph image: first post image > opengraph_image > twitter_summary_large_image_url > site_apple_touch_icon_url.

And https://discourse.codinghorror.com did had the site_apple_touch_icon_url so the twitter:image tag was present <meta name="twitter:image" content="/images/default-apple-touch-icon.png" />.

Turns out Twitter does not support relative image paths. This is now fixed via:

https://github.com/discourse/discourse/commit/f83533e1cb5ff262cb25d9392bc2dcc1621fb0ab

Above commit also adds logo_url as last resort for OpenGraph/Twitter image tag. This updates opengraph image priority to: first post image > opengraph_image > twitter_summary_large_image_url > site_apple_touch_icon_url > logo_url.

Verified the fix on https://discourse.codinghorror.com:

ch

7 Likes

When set, the large_icon may be preferable than site_apple_touch_icon_ur because it’s larger. Also we did bug everyone to set it already.

7 Likes

I added the large_icon as fallback. The new priority is: first post image > opengraph_image > twitter_summary_large_image_url > site_large_icon_url > site_apple_touch_icon_url > site_logo_url .

https://github.com/discourse/discourse/commit/ec7f418a22188bcdf7749c8bb75d8d3ddc2927b0

This also removes the warning that has been flooding the logs.

SiteSetting.logo_url has been deprecated and will be removed in the 2.4 Release. Please use SiteSetting.logo instead

10 Likes

Many of the posts in our community may contain several images.

Is there a way to tag an image or define, for a specific topic, which image to use for opengraph and social sharing?

Also, the Topic List Previews (by @merefield and @angus) plugin takes the first image in a post and uses that for the thumbnail or tile image. I’m wondering if there’s a way to tell the plugin to use the 2nd, or 3rd, or 8th image, etc.


btw @codinghorror, I got to test out that Better Insert Hyperlink feature from the 2.4 release, above, to find Topic List Previews plugin discussion, and right here with this hyperlink. Snazzy new feature!! :raised_hands:

1 Like

That’s already in the plugin. I added a thumbnail picker last year :slight_smile: (btw, I’ve not considered how that might impact social sharing, feel free to experiment!).

3 Likes

Yes – the first big image is the one that is used. So make sure the most important image is first (and large enough, tiny images won’t work).

@merefield and @codinghorror - I can confirm that using the Topic List Previews tool not only allows you to select which image you would like to use as the featured image for your thumbnails but when doing so, that image you select will also become the image that appears for opengraph and social sharing, instead of the default setting of displaying the first image in the post!

Here’s an example where I’ve chose to use the 8th image with the “Select Thumbnail” feature and here’s how the post now appears when sharing (and on my “Latest” topics page):

Here’s how to select a thumbnail image, using the Topic List Preview plugin

5 Likes