Facebook Thumbnails: Using A Woo Themes Custom Image or WordPress Post Thumbnail

When I wrote my last article, Facebook Send: Adding A Button To Your Theme, I noticed that the thumbnail wasn’t being set.  On AskCharlyLeetham.com, I noticed the thumbnail was being set to a random image from my page!  This has been a big issue for many wordpress website owners, as the image displayed often appeals to the reader or attracts as much attention as the headline or the words…

The question was, how to fix it!  My next dilemma was how to use the custom image that was applied to the post, as I use Woo Themes which has a custom image per post…

Thanks to the people over at iTechBlog (who found the solution at Ashframe) I found a very simple solution to the problem – although I did have to make some mods to the suggested code to get it to work with the WooThemes custom image setting.

That also led me to consider how I would modify the code to take advantage of the WordPress Post Thumbnail functionality…..

The suggestion was to add the following code to the themes “functions.php” file:

/**
* Function which sets the first image of the post as the thumbnail which shows up on FB like and share – http://blog.ashfame.com/?p=888
*/
add_action( 'wp_head', 'fb_like_thumbnails' );
function fb_like_thumbnails()
{
global $posts;
$default = 'http://blog.ashfame.com/wp-content/themes/ashfameblog/images/ashfame-logo.png';
$content = $posts[0]->post_content; // $posts is an array, fetch the first element
$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
if ( $output > 0 )
$thumb = $matches[1][0];
else
$thumb = $default;
echo "\n\n<!– Facebook Like Thumbnail –>\n<link rel=\"image_src\" href=\"$thumb\" />\n<!– End Facebook Like Thumbnail –>\n\n";
}

In the above code, change the line:

$default = 'http://blog.ashfame.com/wp-content/themes/ashfameblog/images/ashfame-logo.png';

To point to the full location of the default image you want to use.
The code will display the first image in a post or a page.

Customising for Woo Themes

However, I wanted to use the Woo Themes custom image as standard…. so some mods were required.

To do this, I had to find the custom name applied to the image field in the posts.  In Woo Themes, this is done in the “theme-options.php” file… in wp-admin -> Appearance -> Editor, locate theme-options.php in the right hand column and click on it.

Scroll through the file and locate the section (near the bottom) that starts with

// Woo Metabox Options

It will look a bit like this:

From this section, I now know the name of the custom field that I need is called image (all lower case).

I modified the above code as follows:

add_action( 'wp_head', 'fb_like_thumbnails' );
function fb_like_thumbnails()
{
global $post;
$default = 'link to my logo';
// get the post image
if ( get_post_meta($post->ID, 'image', true) ) {
$imgsrc = get_post_meta($post->ID, 'image', true);
} else {
$imgsrc = $default;
}
echo '<!– Facebook Like Thumbnail –><link rel="image_src" href="'.$imgsrc.'" /><!– End Facebook Like Thumbnail –>';
}

Note: change $default=’link to my logo’ to a full web link to the image you want to use if a post image doesn’t exist!

The ‘get_post_meta’ function retrieves the link to the custom image.  If the functions returns ‘something’, the post image is used and if it doesn’t, the default image is used.

Using the WordPress Post Thumbnail

Using the WordPress Post Thumbnail requires a few more lines of code and big thanks to Lee Willis for the code to retrieve the Post Thumbnail url.

The Post Thumbnail has several ‘sizes’ associated with it, I recommend you choose something other than the ‘thumbnail’ setting, as WordPress will generally crop the thumbnail to 150px by 150px (but that depends on your wordpress settings).

In this example, we’re going to use the ‘large’ size.

add_action( 'wp_head', 'fb_like_thumbnails' );
function fb_like_thumbnails()
{
global $post;
$default = 'link to my logo';
// get the post image
if ( get_post_thumbnail_id($post->ID)) {
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id,'large');
$imgsrc = $image_url[0];
} else {
$imgsrc = $default;
}
echo '<!– Facebook Like Thumbnail –><link rel="image_src"  href="'.$imgsrc.'" /><!– End Facebook Like Thumbnail –>';
}

Taking Effect

Once you’ve added this code to your themes functions.php, the code is effective immediately BUT Facebook will ‘scrape’ a page once every 24 hours so your new image may not show immediately.  You can try the Facebook url linter to have your page ‘re-scraped’ immediately.