I have a Drupal photography website. Images are important to me and no matter how hard I try, how hard I google, I couldn't get those images to work on Facebook Open Graph sharing.
I am using Drupal 7.14.
Users upload photos by using Plupload plugin.
Over-sized photos are automatically resized by Plupload resize function.
These photos are uploaded into a custom-directory. eg. sites/default/files/products/[user:id]/
The photos are thumbnailed and styled according to Drupal core styling. eg. sites/default/files/styles/large/
These photos are displayed in a overriden node page, which I have customized using Panels.
Drupal modules currently don't support Open Graph tags for Panels, so I created them myself using
drupal_add_html_head
.// OG Image Tag
$node = node_load(%node:nid);
$user = $node->uid;
$filename = $node->field_product_photos['und'][0]['filename'];
$base_url = "http://www.[my-web-site].com/sites/default/files/styles/large/public/products";
$image_url = $base_url . "/" . $user . "/" . $filename;
// Thus $image_url outputs my full image url address. eg. http://www.[my-web-site].com/sites/default/files/styles/large/public/products/1/[IMAGE].JPG
$element = array (
'#tag' => 'meta',
'#attributes' => array(
'property' => 'og:image',
'content' => $image_url
),
);
require_once 'includes/common.inc';
drupal_add_html_head($element, 'og_image');I use http://ogp.spypixel.com/Pogo/checker/index.php?url=http%3A%2F%2Fwww.feelsion.com%2Fproduct%2Fd700 to check my OG tags. og:title, og:image, og:url, og:description works like a charm with no problems.
However Facebook Debugger https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.feelsion.com%2Fproduct%2Fd700 returns only ONE problem.
That is - Unable to download og:image: The image referenced by the url of og:image tag could not be downloaded.I can confirm that ogp.spypixel.com/Pogo/checker/ could display my og:image and the image url is healthy.
I am using HTTP, so HTTPS bug for Facebook og:image is irrelevant.
I have ALT-txt for my images.
I have also included
<link rel="image_src" href="[IMAGE_LINK]"
into<HEAD>
.My image sizes fulfills Facebook's criteria. At least 200px for both dimensions and not more than 3:1 by proportion.
I have declared og:namespace in my page.tpl.php file.
xmlns:og="http://ogp.me/ns#No matter how hard I Google and amend the codes and try new images. Facebook still never display my photos and returns the error as in note #9.
Image such as my website logo can be displayed in Facebook sharing. The only images not displaying is from the custom node page/panel.
I have tried to amend FTP permissions for the images but still failed.
I suspect that Plupload plugin is the culprit that the images it resize cannot be rendered by Facebook OG.
I also suspect that could be a case-sensitivity issues on the file name or on the extensions of the image.
I have worked more than 24 hours on this problem and hopes are fading. I am still hopeful that I can find my enlightenment on the problem here. Please do assist me if you know the solution or you are experiencing the same problem.
Thank you.