Friday 13 March 2015

Adding OG Tags to a Drupal 7 website

)pen Graph tags are tags that are used to grab content by some of the major Social Medial site. 


I’ve added code to the themes template.php that will display this .


The main issue here was the 'image' tag which I've cross referenced the database for . These fields will be different for others ; depending on the tables that store your images.


/** * Implements template_preprocess_html() * * @param $vars *   An array of variables to pass to the theme template. *   The name of the template being rendered ("html" in this case.) */
function theme_preprocess_html(&$vars) {

  /* * @ file Open Graph Meta tags - for LinkedIn and Facebook * * The following code writes the relevant metatags required for Open Graph. * check 'open graph' on  https://developer.linkedin.com/docs/share-on-linkedin * for more information * There's 2 images in the node that we can add  1. field_image and 2. field_header_image * We'll try field header image first. * Lets get the node id. */  global $base_url;


  $og_url = "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
  $site_name = variable_get('site_name');
  $og_title = $vars['node']->title . ($site_name ? ' | ' . $site_name : '');
  $od_dec = $vars['page']['content']['metatags']['node:flexible_article']['description']['#attached']['drupal_add_html_head'][0][0]['#value'];
  $page_node_attribute = $vars['attributes_array']['class']['6']; //  $page_node_attribute_array = explode('-', $page_node_attribute);
  $nid = end($page_node_attribute_array);

  drupal_add_html_head(array(
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:title',
      'content' => $og_title,
    ),
  ), 'node_' . $nid . '_og_title');

  drupal_add_html_head(array(
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:description',
      'content' => $od_dec,
    ),
  ), 'node_' . $nid . '_og_description');

  drupal_add_html_head(array(
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:url',
      'content' => $og_url,
    ),
  ), 'node_' . $nid . '_og_url');


  $result = db_query('SELECT fm.filenameFROM {field_data_field_header_image} fhi LEFT JOIN {file_managed} fm ON fhi.field_header_image_fid = fm.fid  WHERE fhi.entity_id = :nid  LIMIT 1', array(
    ':nid' => $nid,
  ));
  $image_file = $base_url . '/';
  foreach ($result as $record) {
    $filename = $record->filename;
    $filename_fixed = str_replace(' ', '%20', $filename);
    $image_file .= 'sites/default/files/styles/article_header/public/header_images/' . $filename_fixed;
  }

  if (!isset($filename) && $filename == NULL) {
    $result2 = db_query('SELECT fm.filenameFROM {field_data_field_image} fhi LEFT JOIN {file_managed} fm ON fi.field_image_fid = fm.fid  WHERE fi.entity_id = :nid  LIMIT 1', array(
      ':nid' => $nid,
    ));
    $image_file = $base_url . '/';
    foreach ($result2 as $record) {
      $filename = $record->filename;
      $filename_fixed = str_replace(' ', '%20', $filename);
      $image_file .= 'sites/default/files/styles/article_header/public/header_images/' . $filename_fixed;
    }
  }

  if ($filename != NULL) {
    drupal_add_html_head(array(
      '#tag' => 'meta',
      '#attributes' => array(
        'property' => 'og:image',
        'content' => $image_file,
      ),
    ), 'node_' . $nid . '_og_image');

  }
}

This code was inspired by http://kahthong.com/2012/08/add-open-graph-protocol-meta-data-your-drupal-node-page

No comments: