Facebook share images

Every site today uses social buttons. It's become part of the basic functionality. And yet most have trouble dealing with and integral part of the whole sharing part -- choosing an image to accompayny the shared article.

If you've ever dealt with the (dreaded, soon-to-be-deprecated) facebook share button, you most likely know the drill - facebook arbitrarily chooses the image to use, and allows the user to choose a different image using arrows ( which in media heavy sites is just not usable, since you need to go through 100+ images).

The proposed solution to this situation, is to use the Open Graph meta tags, which are used for more than just social sharing -- however these require to change the page doctype for the template to be compliant, and well... to be frank, they look odd in a webpage.

There is a simpler solution if you only want to allow proper image sharing though -- you can add a specially crafted link tag to your head section, pointing to the image you want to use! Simple, and without all the required re-wiring. The general template of the link tag is

<link rel="image_src" type="image/jpeg" href="/path/to/file" />

where type should be your image type, and /path/to/file the actual image location. Nice and easy!

Well... not entirely easy. In Drupal 6, there are a number of way to add things to the page head section, however none that is simple or straight forward enough. The simplest method is to just hardwire the tag via the page.tpl.php template, whenever appropriate.

Note that page.tpl.php should be located in your theme folder, eg /sites/all/themes/mytheme or /sites/default/themes/mytheme , depending on the situation.

Now, you should locate the head section ( between <head> and </head> ) and place the following code anywhere in there :

<?php
if (isset($variables['node']) && 
  $variables['node']->field_main_image[0]['view']!="") {
   $img = $variables['node']->field_main_image[0];
   print '<link href="'.base_path().$img["filepath"].'" 
   rel="image_src" type="'.$img['filemime'].'">'; } 
?>

the above assumes that the image is contained in a CCK field, called field_main_image. You might remember the reference to the $variables variable from a previous article. It contains the fully populated node object when viewing a node, and is accessible in the page template, providing all the required info for the article image.

I really hope this saves some hair pulling from someone!