0

So I inspected the image element and everything looks fine compared to other sites code. But when I share an article from my blog nothing shows in the image section. Interesting enough if I share the same article on Linkedin the top article image appears like it should. Body images always show if any are present. it's just the top article image with the issue.

Here's an example: http://thepoliticus.com/content/how-well-do-you-know-state-union

Element:

  • How have u implemented this thing? I mean which module are u using to do the sharing? – Nitesh Sethia Jan 20 '15 at 20:05
  • I'm using shareaholics right now. But this has been an issue in the past. – Dammand Cherry Jan 20 '15 at 20:22
0

That page doesn't have the proper OG tags in the head of the HTML. Facebook uses these to process the things about the page that you want them to know or they scrape the page to get them. They normally take something like the first image if the og:image tag isn't there. You can see what exactly they are taking by running a URL through their debugger. The page ran through the debugger. If you scroll down you will see what they are using for the OG tags.

To handle this in Drupal you will need to use a combination of the Metatag module and Drupal Tokens in order to get the dynamic properties. After configuration and the proper token setup you should see your sharing work correctly (I have seen the FB servers cache pages that are shared so it may take some time to eventually get the results) provided you have the proper OG tags in the HTML Head. You can always run the pages through the FB debugger to scrape the page and see the actual results that should be shown.

Note: There may be other ways to accomplish this but this is the top way that I accomplish this task.

  • I've tried a few times, but I can't seem to get it to work. I may be doing something incorrect. – Dammand Cherry Jan 20 '15 at 20:58
  • I didn't realize you were using Shareaholic at first, do you have Open Graph tags turned off? You can check these settings by going to /admin/config/shareaholic/advanced and make sure that checkbox isn't checked. – burnsjeremy Jan 20 '15 at 21:08
  • I also see that you have added metatags module but the picture URL is not present it seems. This is probably a configuration issue. – burnsjeremy Jan 20 '15 at 21:11
  • I was able to add a default Picture URL that now shows and image for google plus. But facebook doesn't even show that image. – Dammand Cherry Jan 20 '15 at 21:54
  • Since you have metatags turned on now I think the Shareaholics OG Tags need to be turned off, FB is seeing two of og:url tags and then it errors out. Once you have that done you may need to go to the debugger and rescrape the page to see the change. – burnsjeremy Jan 20 '15 at 22:01
1

We need to pass the url for the image derivative based on the style we're using.

So - not this:

[my_site]/sites/default/files/my_image.jpg

Rather, this:

[my_site]/sites/default/files/styles/large/public/field/image/my_image.jpg?itok=kB4r6YaD

This image derivative url is not part of the $node object, so we have a bit of wrangling to do. One way is to enable the php filter and use this as the value for facebookpost:field-facebook-picture:

<?php
  if($node->field_image) {
    if(array_key_exists(0, $node->field_image['und'])) {
      $fid = $node->field_image['und'][0]['fid'];
      $result = db_select('file_managed', 'fm')
        ->fields('fm', array('uri'))
        ->condition('fm.fid', $fid,'=')
        ->execute()
        ->fetchAssoc();
      $path = $result['uri'];
      $style_name = 'your_style_name';
      print (image_style_url($style_name, $path));
    }
  }
?>

I used similar logic in a custom token instead of using php evaluation for the value of facebookpost:field-facebook-picture.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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