We had to work on a project which had 7-10 images but Facebook was picking the wrong image.
I did some research (see related links) and noticed that Facebook wants some images to be a certain size/ratio.

Here is the solution (requires some manual work).
Create a folder in wp-content/plugins/fb-image-fix/ and paste the contents from the file below.

<?php
/*
Plugin Name: Orbisius Facebook Share Image Preview Fix
Plugin URI: http://orbisius.com
Description: Makes sure that post's featured image is 1200x630 so facebook can use it as preview.
Version: 1.0.0
Author: Svetoslav Marinov (Slavi)
Author URI: http://club.orbisius.com/products/
*/
add_action( 'wp', 'orbisius_og_tags_init', 100 );
/**
*/
function orbisius_og_tags_init() {
add_action( 'wp_head', 'orbisius_og_output_tags' );
}
/**
* Outputs a header instruction
* @see http://davidwalsh.name/demo/facebook-metas.php
* @see http://stackoverflow.com/questions/11616697/how-to-use-og-meta-tag-for-facebook-share
*/
function orbisius_og_output_tags() {
global $post;
$id = get_the_ID();
/*if ( ! defined( 'orbisius_APP_POST_TYPE' )
|| 'post' != get_post_type( $id ) ) {
return;
}*/
/*
[0] => url
[1] => width
[2] => height
[3] => boolean: true if $url is a resized image, false if it is the original
or if no image is available.
*/
// Make facebook happy.
// @see http://webgilde.com/en/wrong-image-facebook/
$img_src_rec = wp_get_attachment_image_src(
get_post_thumbnail_id( $id, array( 1200, 630 ) )
);
if ( empty( $img_src_rec ) ) {
return ;
}
$img_src = $img_src_rec[0];
/*
<!-- for Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $img_src; ?>" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="<?php echo $img_src; ?>" />
*/
?>
<!-- Make Facebook happy: 1200x630-->
<meta property="og:image" content="<?php echo $img_src; ?>" />
<!-- /Make Facebook happy: 1200x630-->
<?php
}
view raw orbisius-fb-open-graph-tags.php hosted with ❤ by GitHub

Related

With Club Orbisius you get access to many plugins at an affordable price. See plans for more info.
Referral Note: When you purchase through a referral link (if any) on this page, we may earn a commission.
If you're feeling thankful, you can buy me a coffee or a beer