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:
<span style="color: #000000"><span style="color: #0000BB"><?php<br></span><span style="color: #FF8000">/**<br> * Theme callback for an OpenGraph meta tag.<br> */<br></span><span style="color: #007700">function </span><span style="color: #0000BB">THEMENAME_metatag_opengraph</span><span style="color: #007700">(</span><span style="color: #0000BB">$variables</span><span style="color: #007700">) {<br> </span><span style="color: #0000BB">$element </span><span style="color: #007700">= &</span><span style="color: #0000BB">$variables</span><span style="color: #007700">[</span><span style="color: #DD0000">'element'</span><span style="color: #007700">];<br> switch (</span><span style="color: #0000BB">$element</span><span style="color: #007700">[</span><span style="color: #DD0000">'#name'</span><span style="color: #007700">]) {<br> case </span><span style="color: #DD0000">'og:image'</span><span style="color: #007700">:<br> </span><span style="color: #0000BB">$element</span><span style="color: #007700">[</span><span style="color: #DD0000">'#value'</span><span style="color: #007700">] = </span><span style="color: #0000BB">str_replace</span><span style="color: #007700">(</span><span style="color: #DD0000">'https://'</span><span style="color: #007700">, </span><span style="color: #DD0000">'http://'</span><span style="color: #007700">, </span><span style="color: #0000BB">$element</span><span style="color: #007700">[</span><span style="color: #DD0000">'#value'</span><span style="color: #007700">]); <br> break;<br> }<p> </p></span><span style="color: #0000BB">element_set_attributes</span><span style="color: #007700">(</span><span style="color: #0000BB">$element</span><span style="color: #007700">, array(</span><span style="color: #DD0000">'#name' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'property'</span><span style="color: #007700">, </span><span style="color: #DD0000">'#value' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'content'</span><span style="color: #007700">));<br> unset(</span><span style="color: #0000BB">$element</span><span style="color: #007700">[</span><span style="color: #DD0000">'#value'</span><span style="color: #007700">]);<br> return </span><span style="color: #0000BB">theme</span><span style="color: #007700">(</span><span style="color: #DD0000">'html_tag'</span><span style="color: #007700">, </span><span style="color: #0000BB">$variables</span><span style="color: #007700">);<br>}<br></span><span style="color: #0000BB">?></span></span>
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<br> RewriteCond %{HTTP_HOST} ^www\.obfuscate\.com$ [NC]<br> RewriteCond %{REQUEST_FILENAME} !-f<br> RewriteRule ^(.*)$ https://www.obfuscate.com/$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!
7.x,
drupal, facebook, og:image, meta tags, https, htaccess