Eric Nagel

Eric Nagel

CTO, PHP Programmer, Affiliate Marketer & IT Consultant

How To Specify The Thumbnail Image When Sharing A Link On Facebook From Your Thesis Site

I have been, or can be if you click on a link and make a purchase, compensated via a cash payment, gift, or something else of value for writing this post. Regardless, I only recommend products or services I use personally and believe will be good for my readers.

Thesis ThemeAt the time of writing this, Facebook’s Like (or Share) button acts the same as sharing or posting a URL to your wall, except you don’t have the chance to leave a comment or choose which image to include with the post.

If you post a link to your wall, Facebook will guess at which images on the page may be best suitable for the page, and allow you to choose from several of them

Facebook Image Loop
Facebook Image Loop

However, with the Like button that you can add to your Thesis site, when a user clicks the button, Facebook decides which image to use, and it isn’t always the best.

In order to control this, a tag is added to the <head> of the page, specifying the image_src for the page. There are probably WordPress plugins that do this, but with Thesis, we don’t have to use a plugin.

WordPress Screen Options
WordPress Screen Options
First, when writing a new post, make sure you have Custom Fields visible. This is where we’re going to set the value. If you don’t see a section for Custom Fields, you can click on Screen Options near the upper-right of the screen and check that box.

Next, create a new Custom Field named image_src, and for the value, enter the full URL to the image you’d like to feature.

WordPress Custom Field for image_src
WordPress Custom Field for image_src

Now we’re going to get our hands dirty. Open custom_functions.php, which is saved in /wp-content/themes/thesis_xx/custom (with xx being the version number). The first thing we’re going to do is add the function to write the image_src tag in the :

function image_src() {
	if (is_single() && (get_post_meta(get_the_ID(), 'image_src', true) != '')) {
		echo('<link rel="image_src" href="' . get_post_meta(get_the_ID(), 'image_src', true) . '" / >' . "\n");
	} // ends if (is_single() && (get_post_meta(get_the_ID(), 'image_src', true) != ''))
} // ends function image_src()

Next, add the hook, telling Thesis when to execute the function call:

add_action('wp_head', 'image_src');

Now, if the page that’s called is a single post, and the image_src custom field is set, when a user clicks the Like button, the specified image will be used.

If you wanted to take this a step further, add an else condition after the if block, giving a default image to use for the sharing. Or, leave it as-is and let Facebook decide.

  • Trackback: Search Engine Optimization – Basic SEO How To’s for Bloggers
  • Yusrie
    Posted June 27, 2011 5:07 pm 0Likes

    Just what I need, thank you for this writing this. I haven’t yet see any other tutorial about this, yours the first one. Previously I used a plugin to do that. Haven’t tried with your method yet will try soon.

    I believe it doesn’t clash with facebook social graph right?

    Eric, Thank You.

  • Greg
    Posted July 13, 2012 1:10 pm 0Likes

    This is great, thank you. I tried several other sets of codes and a plugin and got fatal errors. Yours was the most bug free and easy to follow. One more favor to ask: would you please you give an example of the “else” condition code that would specify a default image? You suggest this at the end of your post but I’m not experienced at coding enough to create it myself. Thanks!

    • Eric Nagel
      Posted July 15, 2012 7:40 pm 0Likes

      I would leave it blank, and let Facebook pick out the image(s), but if you want to specify a default:

      else {
      echo('<link rel="image_src" href="" / >' . "\n");
      } // ends else from if (is_single() && (get_post_meta(get_the_ID(), 'image_src', true) != ''))

      • Greg
        Posted July 17, 2012 4:26 pm 0Likes

        Great, thanks. That worked well. Now it uses the post-specific image first, and if there isn’t one, it goes to my default image for the whole blog. You can see how it works at “Beer vs. Bread” –
        Thanks for the quick reply and effective solution! Cheers, Greg

Leave A Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.