Filmmaker, Video Editor, Motion Graphics Designer, and Photographer in Cairo, Egypt.
Keeping notes to remember.. You may consider it some sort of Documentation.

Stay In Touch

Wednesday, June 15, 2011

Facebook Social Plugins Module Doesn't Pick Proper Image From Drupal Post

I faced an issue with Facebook Social Plugins module at my Drupal website; where the "Like" button used to not pick an proper image for my post. It picked  an icon image instead of the post main image, which was very annoying!!

The most optimum solution for me was to have the post's main image. But, till this moment, I couldn't find a how-to solution. The solution I figured out now, is to have the site logo (or any default image) to be used.

Well, Facebook Like button needs a og:image tag to use in sharing. Yet, no Drupal module (as mush as I know), offer that tag till this moment. So, we need a way to add that tag at our <head> tag.

All what's needed is to add this piece of code at your theme template.php file:
function YOURTHEMENAME_preprocess_page(&$vars, $hook) {
   drupal_set_html_head('<meta property="og:image" content="THE/PREFERRED/IMAGE/URL" />');
   $vars['head'] = drupal_get_html_head();
This will add the meta tag at every page & content type. In order to have it at a certain node type, all we need is an IF-statement:

function YOURTHEMENAME_preprocess_page(&$vars, $hook) {
    if (!empty($vars['node']) && in_array($vars['node']->type, array('story'))) {
        drupal_set_html_head('<meta property="og:image" content="THE/PREFERRED/IMAGE/URL" />');
       $vars['head'] = drupal_get_html_head();

It worked perfectly with me. Hope, one day, Drupal has a good module to manage Open Graph tags is a much better way :)

I'm using: