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=”http://ogp.me/ns#” ‘ . $content;
}

add_filter(‘language_attributes’, ‘add_fb_xml_ns’);
function add_fb_xml_ns($content) {
return ‘ xmlns:fb=”https://www.facebook.com/2008/fbml” ‘ . $content;
}[/code]

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:
[code]
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 = “http://www.gogirlfinance.com/wp-content/uploads/2011/03/logo.jpg”;
}
return $fbimage;
}

[/code]
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”;} ?>”/>
“/>
[/code]

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 Webhostinggeeks.com.

9 Responses to “How to Set a Facebook Thumbnail Image Using WordPress’s Featured Image & Thesis Theme”

  1. yash

    can you please help me how to add apps name / detail / app logo

    under like a link on facebook

    DivyaBharat likes a link.

    app logo | Like | Share | 2 seconds ago

  2. Rahul

    Hey,

    Thanks for this write-up. Is this content still applicable, given all the changes to Facebook over the past few months?

    I followed your steps to the tee and for some reason I am getting an error when adding the last batch of code that says:
    Parse error: syntax error, unexpected $end in /home/content/o/r/e/orenharrisflow/html/wp-content/themes/thesis_18/custom/custom_functions.php on line 167

    Here’s the batch of code that is causing the error:
    function insert_fb_opengraph() { ?>
    <meta property="og:title" content="”/>
    <meta property="og:description" content="ID)); ?>” />
    <meta property="og:url" content="”/>
    <meta property="og:image" content="”/>
    <meta property="og:type" content="”/>
    <meta property="og:site_name" content="”/>

    Also, I notice you say you use the wp_head hook, but I don’t see it anywhere in your code. Do I simply need to add this line to my custom_functions.php file?

    add_action(‘wp_head’, ‘add_facebook_open_graph_tags’,99);

    Thanks for your help!
    Rahul

  3. Cecily

    Any updates on this? I tried it on my site and it didn’t work — the Thesis community is in a tizzy over this would be great to find a solution that works!

    • Andi

      Hi Cecily – you’ll see that this post is quite old BUT … we’ve used this same code successfully on a few sites, though we haven’t touched Thesis 2.0 at all so I’m not sure it would work there. It’s unlikely that we’ll rewrite or update this article since we don’t work much in Thesis anymore.

    • Edwin

      but i’m getting the error that my image is not big enough :( any help ?

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>