An unhappy combination: Drupal, Facebook, og:image, and https

Here's a bit of an esoteric issue that was a bit tricky to hunt down. I hope that this blog post helps the few people out there that it applies to!

You've got a secure (https) Drupal site, and you'd like it to contain facebook-compatible, open graph meta tags. So, you download the meta tags module and do some configuration magic. Everything looks good until you post a page on Facebook, and the image doesn't work!

Apparently, Facebook doesn't play nice with og:image tags served over https.

Ok, so let's not serve our og:image tags over https. A quick theming hook will fix that in no time:

<?php /** * Theme callback for an OpenGraph meta tag. */ function THEMENAME_metatag_opengraph($variables) { $element = &$variables['element']; switch ($element['#name']) { case 'og:image': $element['#value'] = str_replace('https://', 'http://', $element['#value']); break; } element_set_attributes($element, array('#name' => 'property', '#value' => 'content')); unset($element['#value']); return theme('html_tag', $variables); } ?>

For most people, you can just clear your cache and you'll be set. However, I forgot about my htaccess rule that directed all http requests to https. If you have a similar rule, you'll need to make an exemption for file requests (or perhaps just file requests to a certain directory). For me, that looked something like: RewriteCond %{HTTP:X-Forwarded-Proto} !=https RewriteCond %{HTTP_HOST} ^$ [NC] RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$$1 [L,R=301]

An then it worked! Yay.

If you're still having trouble, checkout these useful tools: Web sniffer -- See what the bots are seeing. Facebook debugger -- get some insight from the FB developers!

I have this exact problem! :) But I'm a noob, where do i put the code of the theme hook?

Thanks for working out this workaround. We'll soon have the og:image:secure_url meta tag ( so it won't be needed for long.

Caitlin: Add it to your site's theme's template.php file and change the "THEME" part of the function name to match your theme's name, e.g. if the theme's name is "purplemonkey" the function's name would be "purplemonkey_metatag_opengraph".

Thanks, that's the info I needed to make it work. Thankyou very much both of you


Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.