Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a blog with some posts, and each post has a embedded Facebook like button. Pressing the button opens a dialog so my visitors can share the post on Facebook with a comment.

When sharing, however, the image selected by Facebook is a generic mail icon and not the post thumbnail.

How can I control the image that is used when sharing?

share|improve this question
    
That site recently got hacked, apparently... –  MirroredFate Jul 27 '11 at 23:23
    
Barely not a Wordpress question... –  Kaaviar Mar 6 '12 at 8:45
add comment

8 Answers

up vote 7 down vote accepted

The image that is used for sharing is taken from a chunk of code in the header of your site that will look something like this:

<link rel="image_src" href="path/to/theme/screenshot.png" />

Typically it links to the screenshot of your site in the theme. If you removed the code from the header of the file and on single.php put it inside the loop and called your post thumbnail image into the href element I believe it would work. So it would look something like:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

This would mean that if you have like buttons on pages that list multiple posts you probably won't have an image. If you included some conditional code that removed it only on single.php then you would have the normal image on any page with multiple posts and an like button and the post thumbnail when the single.php template is being used. So the header code would be:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Then you'd still use the code to include the post thumbnail in single.php.

share|improve this answer
3  
This was flagged as possibly outdated, please consider refreshing your answer (maybe something like "this was back then, now that works better"). –  Rarst Oct 14 '11 at 21:17
add comment

Facebook now uses opengraph protocol. You can add images using :

<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Add this line to your page header.

Alternatively you can use my plugin to do this automatically.

It just does this job and no settings are needed.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

share|improve this answer
add comment

You need to use the Facebook Open Graph Protocol. I'm not sure why the Accepted answer isn't one of the many OG: related answers (which I've voted up) but it is wrong.

http://developers.facebook.com/docs/opengraph/

You can customize many things including title, image, description, category, last update etc... if you use Open Graph. If you use these other half-solutions you are missing the whole picture.

If I didn't follow OG Protocol for all the FB work I do, I'd get fired.

share|improve this answer
add comment

If you do the following:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

You'll find that Wordpress outputs the the html required to display the image, not just the SRC which is what you really want.

Doing something like:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

gets you the URL only. It's probably the long way and can probably but shortened, but it definitely fixes the problem.

Hope this puts you on the right track.

Matt.

share|improve this answer
add comment

Make sure you lint your URL here if the specified image is not appearing properly:

http://developers.facebook.com/tools/lint/

share|improve this answer
add comment

If you would like to use the first image of your post as the thumbnail with a fallback to something like your logo, try my plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Explanation for adding the fallback logo image is at http://blog.ashfame.com/?p=888

share|improve this answer
add comment
<meta property="og:image" content="http://YOUR_IMAGE_URL" />

This method works for "like":s but later on if you want to share a link in ur log(For example.) this picture is autoselected.

Without this meta tag you are able to select from all the images on the linked site.

Anyone know any way to keep the static "like" image but still make you choose an image when sharing a url?

share|improve this answer
add comment

OK I wrote a little bit of javascript to populate the Meta og:image with the featured image of my choice. It's a one-time hack you add to your header file.

In my wordpress post, I add the id "featured-image" (I know with later wordpress this is built-in, I'm on an old one).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

I write a meta tag for the og:image with a placeholder, such as my blog log. Add "id="meta-image" to the tag, i.e.

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Then add this javascript in the header:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});
share|improve this answer
    
Use wp_enqueue_script() to load Javascript in WordPress. –  toscho Mar 6 '12 at 11:04
    
Does this actually work? I already tried something similar without success - the Facebook debugger does not recognize my image. I don't think it's parsing the JavaScript. –  benedict_w Aug 12 '13 at 16:32
add comment

protected by toscho Jun 8 '12 at 11:45

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.