Facebook sharing link is not showing a thumbnail of the images within the post?

Question

Usually facebook share gets an image from the site to post and shows it as thumbnails.

If you press the share this on facebook link in my test page it doesn't.

This is my test site: http://alexchen.info/taiwantalk/

This is the code:

<?php
/**
 * Template Name: Front Page
 * @package WordPress
 * @subpackage Prominent
 * @since Prominent 1.0
 */
get_header(); ?>
<div id="tagline">
    <div class="container">
    </div><!-- .container -->
</div><!-- #tagline -->
<div id="content">
    <div class="container">
        <div id="mainbar">
            <?php while ( have_posts() ) : the_post(); ?>
                <div class="content-block-2">
                    <?php the_content(); ?>
                </div>
                <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>
            <?php endwhile; ?>
            <?php /* Display navigation to next/previous pages when applicable */ ?>
            <?php if (  $wp_query->max_num_pages > 1 ) : ?>
                <?php next_posts_link( __( '&larr; Older posts', 'twentyten' ) ); ?>
                <?php previous_posts_link( __( 'Newer posts &rarr;', 'twentyten' ) ); ?>
            <?php endif; ?>
        </div><!-- #mainbar -->
    </div><!-- .container -->
</div><!-- #content-bottom -->
<?php get_footer(); ?>

EDIT:

I added all necessary meta tags and links:

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="title" content="Article headline here" />
<meta name="description" content="Article summary here" />
<title><?php
    /*
     * Print the <title> tag based on what is being viewed.
     * We filter the output of wp_title() a bit -- see
     * twentyten_filter_wp_title() in functions.php.
     */
    wp_title( '|', true, 'right' );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="image_src" href="http://alexchen.info/taiwantalk/wp-content/uploads/2011/03/cheating.png" />

But this is the only thing that is shown:

asdasd | Taiwan Talk http://alexchen.info/taiwantalk/2011/03/...

You may use these HTML tags and attributes:

any suggestions?

Answer 1

<meta property="og:image" content="http://alexchen.info/taiwantalk/wp-content/uploads/2011/03/cheating.png" />

Visit http://developers.facebook.com/docs/reference/plugins/like/ and see "Step 2 - Get Open Graph Tags"

There's also a lot of WP plugins out there that can help you to generate Open Graph tags.

Answer 2

Facebook caches information about a page when share it. You can use the URL Linter to refresh the cache and see exactly what info FB has on your page. The linter has helped me quite a bit with these issues.

Answer 3

You need to Add a image source meta tag to the head tag of your document.

<link rel="image_src" href="http://site.com/image.jpg" />

Answer 4

Open Graph is the way to go! Put the open graph meta tags, and then use Facebook Linter to check if all your data comes through right.

Answer 5

Just remove the 'http://www." from the front of the URL as well as the last trailing '/' and it should work. Fixed it for me!

Answer 6

I tried the OG Tags and pretty much everything else that has ever been advised all over the internet and none of it worked. It just about drove me crazy, so in the end I wrote my own little bit of amateur code which finally works. It simply posts the Title and the image, with an excerpt onto the users fb wall. It worked for me so I put up a tutorial for it https://www.facebook.com/imperialantiques?v=app_100783790015943