Wrong product image showing in Facebook when user 'likes' the product page [#1174012]

We have an FB Like button on each of our clients product pages on their website.

You can click the FB Like but and it appears to work OK.

However, when you visit your profile page on FB everything is correct apart from the thumbnail image that shows with the link. The module appears to be choosing a different image to show. But if you click on the image it takes you to the correct page on our clients website.

Can anyone help me on this one. I'm baffled.

This is a sample page on our clients website: http://www.redpiranhapiercing.com/store/product/12mm-green-titanium-micr...

Comments

Comment #1

soulston CreditAttribution: soulston commented 31 May 2011 at 16:24

This seems to be linked to this:

http://blog.ashfame.com/2011/02/wordpress-plugin-fix-facebook-like-thumb...

This lint tool https://developers.facebook.com/tools/lint/ will show you the image that will be grabbed although it changes on each refresh.

I suppose the problem is knowing which image to use, on a node page it's probably quite obvious but if the like button is used elsewhere maybe it's not that straightforward, maybe it should fall back to the logo as they suggest in the link.

This could probably be added in preprocess with a small amount of code - I'm not sure if it should go in the module or not really? maybe as a snippet in the docs instead?

Comment #2

soulston CreditAttribution: soulston commented 31 May 2011 at 21:56

Ok here's what I used to get it working:

in template.php (we only needed this on product node types and we are using imagecache so I am checking this array item is present).

<?php
function mytheme_preprocess_page(&$variables) {
  $node = menu_get_object();

  if ($node->type == 'product') {
    if (!empty($node->field_image_cache[0])) {
      $attributes = array(
        'rel' => 'image_src',
        'href' => imagecache_create_url('imagecache_preset_name', $node->field_image_cache[0]['filepath']),
        'type' => $node->field_image_cache[0]['filemime'],
      );
      $variables['head'] .= drupal_set_html_head('<link' . drupal_attributes($attributes) . '/>');
    }
  }
}
?>

Whilst looking into this I came along some other useful resources:

http://drupalcontrib.org/api/drupal/drupal--includes--common.inc/functio... (I tried this but I think preprocess_page is too late)

http://drupal.org/node/189985

Comment #3

phumo CreditAttribution: phumo commented 31 May 2011 at 19:47

Ah, it appears that the issue could be related to the non-standard button option that you can choose within the module. I reverted back to the Standard button and also reduced the pixel width of the Like button (it was overhanging another part of the site) and this 'appears' to have addressed the problem. I've ran about 6 tests on various product pages and the correct image is now showing in Facebook.