Mar.15

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


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.

How To & Tips
Share this Story:
  • facebook
  • twitter
  • gplus

Comments(5)

  1. Trackback: Search Engine Optimization – Basic SEO How To’s for Bloggers

  2. Yusrie
    1986 days ago

    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.

  3. Greg
    1604 days ago

    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
      1602 days ago

      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="http://ericnagel.wpengine.com/wp-content/uploads/2011/05/tim-hortons-coffee-icon.png" / >' . "\n");
      } // ends else from if (is_single() && (get_post_meta(get_the_ID(), 'image_src', true) != ''))

      • Greg
        1600 days ago

        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” – http://gihamilton.com/blog
        Thanks for the quick reply and effective solution! Cheers, Greg

Leave a comment

Comment