Setting the default image for facebook sharing


(Cyrus Stoller) #1

How is the image that shows up on Facebook determined? Is it possible to have a separate settings field for a default image?

Right now it’s showing my full logo by default which is too wide. Is there an easy way to change it so that it will default to the square logo instead?


Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
Facebook and G+ don't show excerpt for private communities
Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
(Robin Ward) #2

When you say “shows up on Facebook” what do you mean? When you post a link to a Discourse forum in your news feed?


(Cyrus Stoller) #3

Sorry I should have been clearer.

Yea. I ran into this when I was going to add a link to a discourse topic in a wall post.

For a blog post I would set the

<meta property="og:image" content="{{img url}}"" />

(Robin Ward) #4

It looks like the og:image will sometimes use an image from discourse, for example a user’s avatar if you link to that user. However if you link to a topic or topic list that doesn’t have an image it will use your site logo by default, like you discovered.

There is no way currently to overwrite this, but it wouldn’t be too difficult to add a site setting like we do for logos and such to configure it, if you feel like submitting a pull request we’d definitely accept it :smile:


(Tomo Vukasović) #5

@eviltrout I second this. It does not look nice.

og:image – This is an image associated with your media. We suggest that you use an image of at least 1200x630 pixels.


Posting to FB, pictures in text
(Tomo Vukasović) #6

To fix this problem temporary go to: Admin > Customize > Text Content > HTML Head and add this url:

<meta property="og:image" content="http://url-to-your-image.png"/>

Make sure that image is more than 200px x 200px. Delete Facebook “cache” from:

https://developers.facebook.com/tools/debug


(Dean Taylor) #7

The og:image is already set to the so you may well be adding a duplicate

I believe it is set here:

Via a call like this:


(Tomo Vukasović) #8

I assume your example is only for topics. There is no default og:image for index, categories etc. This way…well in my particular case I prefer having one image as main default og:image. I am planning Facebook campaign for new community and index page logo/image is important.


(Dean Taylor) #9

@eviltrout the avatar images don’t seem to be used when sharing on Facebook:

If you pop this URL into the Facebook debugger you will see:
https://meta.discourse.org/t/error-message-translation-missing-de-system-messages-restore-succeeded-subject-template/21115
https://developers.facebook.com/tools/debug/og/object/

This is likely because the image is only 45x45 - it should probably be a minimum of 200x200 for Facebook.


(여주현) #10

Facebook fetch order the image

  1. og:image = avatar image
  2. logo image ( if bigger than 200px )
  3. some other images

So, make your logo image size smaller than 200px. ( ex: 199 x 66 )

Test this URL into Facebook og debugger ( Log into Facebook | Facebook )

http://www.jumak.net/t/topic/141
http://www.jumak.net/t/live-2d/142

Facebook choose an image inside post, not avatar or logo image


Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
(Andrew ) #11

It seems Discourse is still generating the og:image tags from logo url in Admin > Settings > Required. For posts that don’t have images, is there somewhere else Discourse checks for an image to use instead of the logo for the OpenGraph tag?

For a use case example: I have a topic with a lovely Vimeo Openbox embed, and the best Facebook can do is scrape and find the site logo, which is formatted to fit in the header, which has almost nothing to do with Facebook’s specs or the post.

It would be cool if there was a series of checks that Discourse would go through to generate the most relevant og:image tag.

Perhaps (from least to most relevant):

  1. Site Logo
  2. Default Image (could be a new field in Admin > Settings > Whatever?)
  3. Category Image
  4. Tag Image (first tag?)
  5. Topic scrape
  6. Onebox scrape (from Vimeo, YouTube, etc. thumbnails)
  7. Topic Image (akin to WordPress “Post Thumbnails” or “Featured Images”) that is linked to a post, but doesn’t necessarily display in the content.

The ability to set a default site image that’s specifically chosen for sharing, and is not the site logo, would cover most of my aesthetic needs.

Upon further discovery while testing and writing the above: I dunno. When I look in Facebook’s Object Debugger, it shows images that seem to be page scrapes. Further, there is no og:image tag in my HTML source. The links @DeanMarkTaylor posted lead me to believe there should be a tag there, but I have everything populated in the Required settings and there’s still no image (other og tags are present). Is this set up the way I want it to and I’m just missing a setting elsewhere?


Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
(Jeff Atwood) #12

There is no og:image tag. It was removed by request a while ago.


Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
(Andrew ) #13

Are we privy to the rationale of the request/removal’s implementation?

Leaving it all up to chance and Facebook (Google, Twitter, etc.) doesn’t seem like a best practice, but if there’s a compelling/structural reason it can’t be handled otherwise I can move on to other concerns.

As it stands, the only way for a topic to display nicely when shared seems to be somehow socially engineering users to add an image that conforms to myriad guidelines and technical specifications in each topic–a rather unlikely scenario.


Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
(Jeff Atwood) #14

Feel free to read all the prior discussion. Searching for og:image works perfectly.


Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text
(Evans Akanno) #15

So what’s the final fix to this glitch?

I just shared to Facebook from a discourse thread on - http://chat.zegist.com/t/movie-reviews-good-bad-or-meh/188 and it took the logo.

Is there anyway we can pin a fix to this so people can easily identify it. Better still add a function to an update so we can know if its a 800x800px square .png that works perfect or a rectangle 1200x627px .png for the default sharing image.


(Dean Taylor) #16

For reference there was a recent update to the image used, relevant post: