0

No idea how to ask this... so I'll give it my best.

I have a Wordpress site, self hosted. When I post a link to a post on Facebook, Facebook tries to detect a preview graphic to show along with the post (see screenshot)

Example

For whatever reason, Facebook always picks up the Stumbleupon share button for the graphic. It's not the first graphic on the page, and it's not the last either, so I'm not sure why.

But more importantly, my question is... when I am not using a Featured Image for the post (sometimes I do, sometimes I do not), how can I make sure that previews such as this pick a different image? The site uses a favicon, but that doesn't seem to work in this instance.

Is there an image, or something I can set in code, that would allow me to specify what image gets picked up when a site tried to create a preview like this?

Improve this question

2 Answers 2

Reset to default
2

The accepted answer over on StackOverflow looks to be the best way to do this. You'll want to get into your header.php file to make these changes.

https://stackoverflow.com/questions/6693499/how-can-i-set-a-website-image-that-will-show-as-preview-on-facebook

Now if the image should change from post to post, I would probably write something using JQUERY to change the value of the meta tag on the post.

Improve this answer
1
  • 1
    This also seems to be the way to go for WordPress websites, yes. But you wouldn't set/alter the image via jQuery—you would do this in PHP. For instance, use the featured image of the first post that has one (with a fallback solution), or so. And don't forget to wp_reset_postdata after you cycled through your posts.
    – tfrommen
    Commented Feb 14, 2014 at 19:29
1

There are meta elements you can add into your <head> to tell Facebook what to use for the image and description. You can manually add them into your theme. But there are already WordPress plugins that will add this. The benifit is they handle the logic for each post too.

  1. Facebook's WordPress plugin (it does much more than just the open graph tags): https://developers.facebook.com/docs/wordpress/
  2. WP Open Graph plugin: http://wordpress.org/plugins/wp-open-graph/
  3. WordPress.com's Jetpack plugin adds them (among many other things it does): http://jetpack.me/tag/open-graph/
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.