How Space links are displayed in Facebook

And I have to add one bug to be solved. Recently I shared the url on FB to ask people to come to here. Somehow on FB appeared the image of a Lucas next to the link. That was not considered the most appropriate image, and, however, is outside the control of someone sharing the link on FB. https://m.facebook.com/groups/511418892316698?view=permalink&id=1594906747301235

1 Like

Can you share a screenshot, please? That link is not public.

1 Like

@qgil-WMF
image

2 Likes

Thank you. @HDothiduc_WMF might know better but let me guess: Facebook looks for the first image available to feature it in their onebox. https://space.wmflabs.org has no visible images, but they can be found in the source HTML (we are probably hiding them via CSS). The only images we have right now are the avatars of whoever is featured under “Recent discussions”. Facebook picks the avatar of the topic listed at the top.

Interesting, and problematic indeed.

Space has no logo for now (intentionally, we have to work on the whole identity / brand / design). Either we find an image for Space (that we could hide via CSS anyway) or we could perhaps feature the first Recent News entry with the blog post image, and this is what Facebook would pick.

I wonder what happens in other social media. I bet there is a way to signal to external services what is the image we want to serve them, instead of letting them figure it out.

2 Likes

I wonder if we can use the same image as the favicon for this, for now?

This same link preview happens in gchat (the avatar of whoever commented most recently). It’s probably across the board. (To clarify, what I’ve noticed applies when people post links to topics, not to the homepage, which is what it appears @Ad_Huikeshoven did here.)

1 Like

Hello! Thanks a lot for bringing this up! I agree that this is a big problem and so I solved it immediately.

@qgil-WMF was totally right with all of his guesses :clap:

What I did for now is add an open graph tag and a twitter tag in the head of the homepage describing which image to grab when the page is shared on Facebook/Twitter.

(FYI: I also tried changing the parameters of the discourse plugin that we use to show recent discussions, but this would be a rather hacky solution)

(another FYI: This tool can reset whatever image Facebook has “saved” from their last crawl of a specific URL https://developers.facebook.com/tools/debug/)

The problem we are left with now are blog posts that don’t have any images (e.g. the latest Tech News), those would grab the author’s profile image for example. @CKoerner_WMF, we should probably find a holistic solution for this on Wordpress.

3 Likes

I think a logo would solve this problem once and forever.

[quote=“hang-WMF, post:7, topic:1198”]
an open graph tag and a twitter tag in the head of the homepage describing which image to grab when the page is shared on Facebook/[/quote]

@HDothiduc_WMF the result is a greenish rectangle on Facebook https://www.facebook.com/ad.huikeshoven/posts/10156931884755958

1 Like

/me points people at https://developers.facebook.com/tools/debug/sharing/ so you don’t have to test by making a hundred posts ;)

3 Likes

Great, so it’s working as intended. The green square is a placeholder until we get far enough along in development to start considering an actual logo. I’d say a big improvement over huge picture of a user!

It looks better in Twitter as well (test here).

If you’re not scrolled to the top of a topic then it still shows a user’s profile icon though (i.e. when the URL ends in …blah/123/4 where 123 is the topic ID and 4 is the reply number).

Hrm, this is tricky. If we were using the featured image setting in WordPress social media sites would pull the image from there. However, we’re using @Samwilson’s Embed Wikimedia plugin since it does a nice job pulling the images from Commons and giving proper attribution. This way we don’t have to re-upload images to Space or muck with making sure we get the attribution correct every time we use an image.

@HDothiduc_WMF I don’t have a Facebook account. Can you share a screenshot of what happens when you try to share this article?

https://space.wmflabs.org/2019/09/05/how-to-request-a-new-category-or-closed-group/

The fact that the favicon is now taken as a preview image, makes the link previews in Telegram include the favicon as the “preview image” resulting in very verbose links. Some websites like Wikipedia just provide a text preview (in Telegram), why wouldn’t that be appropriate here?

1 Like

@Smile4ever or another Telegram user, can you provide a screenshot please?

This is what it looks like for me:

Is there anyway to completely remove the og:image and twitter:image meta tags, rather than replacing them with the big green image? Or add an empty string as their value?

<meta property="og:image" content="https://discuss-space.wmflabs.org/uploads/default/original/1X/ec4826dbc8c228359ae302d55467d918ab205980.png">
1 Like

On a positive note, we might attract creative abstract painters… :wink:

1 Like

Wikimedia Space is going through its green phase. :stuck_out_tongue:

3 Likes

Yes, but it’s a HUGE green square. Screenshots below.

Facebook:
S%C3%A9lection_109
Twitter:
S%C3%A9lection_110

@Delphine_WMF Did you use the same URL for your Twitter example? Because there’s a difference between the topic URL and a reply’s URL, e.g.

https://discuss-space.wmflabs.org/t/how-space-links-are-displayed-in-facebook/1198
https://discuss-space.wmflabs.org/t/how-space-links-are-displayed-in-facebook/1198/21

The extra number at the end is the reply number, and it’s supposed to use a different image for that (i.e. the poster’s profile image). The snippet is also from the reply rather than from the top post itself.

The annoying thing is that as you scroll down, the URL changes, so most people will share a post URL, and the embedded (Twitter, Facebook, wherever) card will have the poster’s image. I guess that’s a reasonably careful design decision on the part of the Discourse developers.