Adding Facebook OG Tags to in Your Drupal 7 Theme Layer

Last modified: 
Thursday, May 12th, 2016

A demonstration of how to add Facebook OG tags into a Drupal 7 site using template.php in the theme layer.

Some other items demonstrated here include:

  • How to get the absolute URL to the current page.
  • How to get the absolute URL to a file from a stream URI, e.g., public://somefile.png.
  • How to trim a string to the first line in PHP.
  • How to add items to the HTML head with drupal_add_html_head(). Hint, it involves an unwieldy array.
<?php
/*
 * This demonstrates a means of injecting Facebook OG tags into your
 * HTML header using template.php in your theme rather than a module.
 *
 */

/**
 * Implements hook_preprocess_page() for the following reasons:
 *  - We want to inject Facebook OG tags into our HTML head.
 *
 */
function MYTHEME_preprocess_page(&$vars,$hook) {
  _MYTHEME_facebook_og_meta($vars);

}

/**
 * Inject Facebook OG meta tags into head.
 * @return Void
 */
function _MYTHEME_facebook_og_meta(&$vars) {
  $site_name = t('Your Site Name');
  $title = t('Default Title');
  $description = t('A default page description');
  // Get the absolute URL to the current page. 
  $path = isset($_GET['q']) ? $_GET['q'] : '<front>';
  $url = url($path, array('absolute' => TRUE));
  $default_image = 'http://example.com/sites/default/files/default_fb_image.jpg';
  $facebook_image = $default_image;

  // Here we get node specific information. Update field names and such for site as needed.
  if ($vars['node']) {
    $node = node_load($vars['node']->nid);
    // Title
    $title = (!empty($node->title)) ? t($node->title) : "";
    // Description
    if (!empty($node->field_summary[LANGUAGE_NONE][0]['safe_value'])) {
      $cleaned = _MYTHEME_cleanup_summary($node->field_summary[LANGUAGE_NONE][0]['value']);
      $description = t($cleaned);
    }
    // Image
    if (!empty($node->field_my_image[LANGUAGE_NONE][0])) {
      $facebook_image = file_create_url($node->field_my_image[LANGUAGE_NONE][0]['uri']);
    }
  }

  $og_meta['og_site_name'] = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:site_name',
      'content' => $site_name,
    )
  );

  $og_meta['og_type'] = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:type',
      'content' => 'website',
    )
  );

  $og_meta['og_url'] = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:url',
      'content' => $url,
    )
  );

  $og_meta['og_title'] = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:title',
      'content' => $title,
    )
  );

  $og_meta['og_description'] = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:description',
      'content' => $description,
    )
  );

  $og_meta['og_image'] = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'property' => 'og:image',
      'content' => $facebook_image,
    )
  );

  foreach($og_meta as $k => $v) {
    drupal_add_html_head($v, $k);
  }

}

/**
 * Cleans up summary text for use in meta tags. All tags will be stripped along
 * with '&nbsp;', and text will be trimmed at the first linefeed.
 *
 * @param string $text
 * @return string
 */
function _MYTHEME_cleanup_summary($text="") {
  $text = strip_tags($text);
  $text = str_ireplace('&nbsp;', ' ', $text);
  $text = strtok($text, PHP_EOL);
  return $text;
}


The operator of this site makes no claims, promises, or guarantees of the accuracy, completeness, originality, uniqueness, or even general adequacy of the contents herein and expressly disclaims liability for errors and omissions in the contents of this website.