You want to share your posts on Facebook, but when you do, the thumbnail image that displays isn’t relevant or pretty or even related to the post you’re sharing.  So, you leave your links bare and lose that visual “Pow!” that helps draw attention to your content.

If you’re using Thesis theme for WordPress, here’s a simple way to pull the post’s Featured Image to use as the thumbnail image when your post is shared on Facebook.

We’re assuming you’ve already set up your Thesis theme to use WordPress’s built-in Featured Image function.  If not, do that first.  You can find some helpful tutorials to do that here, here and here.

First, the easy way.

I don’t want to use the Thesis Post Thumbnail as described here (and everywhere else on the web).  I want to use the ‘Featured Image’ that we’ve set in our posts.  I’ve already trained my clients to set a Featured Image and it’s used throughout the site as the post thumbnail on archives.

The right way, or, the way I want to do it.

Facebook’s Open Graph tags allow you to specify exactly how your pages and posts will be shared across Facebook’s network.  You can set the title, description and select the image.  You can tie the post to your Fan page and you as the administrator.  And it’s all quite simple … unless you want to get fancy.

There are, essentially, three steps in this process.

Add your filters.

First, you’ll have to make sure your browser knows to expect some code that isn’t quite HTML.  We need to specify the Facebook and Open Graph nameservers in our opening HTML tags.  We do this by adding a couple filters to allow for Facebook’s markup language.

Open your custom_functions.php file and add this:
[code]add_filter(‘language_attributes’, ‘add_og_xml_ns’);
function add_og_xml_ns($content) {
return ‘ xmlns:og=”” ‘ . $content;

add_filter(‘language_attributes’, ‘add_fb_xml_ns’);
function add_fb_xml_ns($content) {
return ‘ xmlns:fb=”” ‘ . $content;

Grab the Featured Image.

We need to tell Facebook to use the post thumbnail (featured image), so open your custom_functions.php file and add this:
function get_fbimage() {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ”, ” );
if ( has_post_thumbnail($post->ID) ) {
$fbimage = $src[0];
} else {
global $post, $posts;
$fbimage = ”;
$output = preg_match_all(‘/<img.+src=[‘”]([^'”]+)[‘”].*>/i’,
$post->post_content, $matches);
$fbimage = $matches [1] [0];
if(empty($fbimage)) {
$fbimage = “”;
return $fbimage;

You’ll notice that you’re able to specify a fallback image, in the case that a post-thumbnail is not set. I used my client’s logo for this. Be sure to put the URL of your fallback image where it belongs.

Now that we’ve specified our Facebook image, we just need to be sure to tell Facebook, using their Open Graph meta tags.

Add your tags.

Lastly, we add Facebook’s Open Graph tags to the head of the page.  We’ll utilize the oft-overlooked “wp_head” hook (a WordPress hook, not Thesis specific).

Using the tags from DIY’s own post (above), I pasted this into my custom_functions.php file:
[code]function insert_fb_opengraph() { ?>

if (is_single() || is_page()) { echo “article”; } else { echo “website”;} ?>”/>

Description is pulling the excerpt of the page. If you want to use a specific SEO plugin to write custom descriptions, you could insert a simple “if/then” to use as the description.

And the jackpot here lies in the og:image declaration which pulls the post thumbnail (featured image) we’ve specified.

See for yourself!

Facebook’s own debugger is a quick and easy way to test your new code.

Read more about Facebook Open Graph for Developers.

This article is translated to Serbo-Croatian language by Anja Skrba from

Want more posts like this?

Shoot us your email and we’ll hook you up with fresh, helpful content.