Invisible Facebook OpenGraph Image

Edit by Ben: Added above image for testing

Shared a post from here to the Unity Facebook Community Group and no image appeared (viewing on laptop), but when I viewed on my mobile I could just make out the edges of some letters. Looks like maybe an invisible image is being used with then CSS to colourise behind it? Just thought I would let you know as the shared posts would look a bit better on Facebook with an image of sorts :slight_smile:

Thanks Rob, I have noticed that

Cool, just thought I’d share.

On a slightly unrelated note… there’s a “badge” which you earn by posting via replying to an email notification about a discussion etc… It doesn’t/didn’t work… guessing there’s an option that allows responses via email that is perhaps turned off, or some service that isn’t running/installed checking for the mails?

Anyway, again, thought I’d let you know (and it wasn’t at all that I was trying to earn another badge to come across as being even more insanely awesome)… :smiley:

1 Like

Thanks Rob, actually we can make custom badges too. I’ll make a note re email replies. Thanks

1 Like

We are in a game dev forum after all. Race you to 1000000 gamerscore?

1 Like

Note that if you want your Facebook preview image to work properly you can…

  1. Put your image at the very top of your post
  2. Write your post below it
  3. Use the share button
  4. Enjoy proper preview image

Hi @ben, this would be for posts to Facebook where we link to a post on the forum yes? Any news/resolution for when the post on the forums don’t have an image? At best I’ve seen the “GameDev.tv” green text appear on FB, but only the “ame” part normally… be nice to have that appear correctly too… :slight_smile:

Just testing this today, seems not to include the image or logo now! However, it does look ok to me.

I have, however, changed the default Open Graph image to this one…

… let’s see if that helps

The behaviour has changed.

Originally there was some of the green text from GameDev.tv in the image, but you couldn’t read it properly because it hadn’t scaled.

Recently I saw a post where there was the open graph image and text sections, but no image in the image on the left, not until I dragged the mouse across the page, however having just tried to repeat this, it failed to display an image.

The behaviour seems to change based on the content that it is reading in also…

For example, I posted a link to the Sandbox forum, a post regarding testing code tags… with only the link pasted in only the text part of the Open Graph box appeared. When I went back into the post and deleted the text link, leaving only the attachment (which you cannot delete on Facebook!) it placed the text part of the Open Graph box at the bottom and used the first image that it found in one of the posts above it (the screenshot of some code).

In this test I put a sentence before and after the link, leaving the link in the content of the post and got this:

That is posted not just the preview you see before clicking post. As you can see it has a white empty image box on the left. I thought I would try the “hold the mouse button down and drag” trick that worked before, it didn’t;

It does seem that the output will vary depending on the content of the page it is linking to. An empty white box isn’t great, but I suppose better than half a word you can’t read properly. It seems a shame to not have the image you have posted above appearing consistently.

Maybe there are some Open Graph rules that I don’t understand with regards to how the post should be formulated, but being that it won’t always be a member of the team or a moderator posting, e.g. it could be anyone, there is no guarantee that they would all do it the way intended.

Just re-tested and it’s working about as well as we can hope now, if the image is the first thing in the post it looks fine, and it’s rarely making a mess of things. I think we need to close this and leave it to Discourse to continue to improve.

Privacy & Terms