Easy OpenGraph in your WordPress Theme

There are dozens or more plugins that provide social capabilities. My experience has been that often they don’t work properly with the current incarnation of Facebook’s OpenGraph. Another common problem is that it is so easy to have multiple plugins (say a Social plugin and an SEO plugin) that both add OpenGraph settings and end up canceling each other out.

Rather than relying on a plugin, it is very simple to add the basic OpenGraph tags to your theme by adding the following code to functions.php:

add_filter('language_attributes', 'opengraph_scheme');
function opengraph_scheme($attr) {
  $attr .= " xmlns:fb=\"http://ogp.me/ns/fb#\"";
  return $attr;
}

add_action( 'wp_head', 'opengraph_elements', 5 );
function opengraph_elements() {
  if ( !is_singular()) return;

  global $post;
  echo "<meta property=\"fb:admins\" content=\"FB_ID_HERE\"/>\n";
  echo "<meta property=\"og:title\" content=\"".get_the_title()."\"/>\n";
  echo "<meta property=\"og:type\" content=\"article\"/>\n";
  echo "<meta property=\"og:description\" content=\"news\"/>\n";
  echo "<meta property=\"og:url\" content=\"".get_permalink()."\"/>\n";
  echo "<meta property=\"og:site_name\" content=\"".get_bloginfo('name')."\"/>\n";

  $image = "http://yourdomain.com/DEFAULT_IMAGE.png";
  if(has_post_thumbnail( $post->ID )) {
    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
    $image = $thumbnail_src[0];
  }
  echo "<meta property=\"og:image\" content=\"".esc_attr($image)."\"/>\n";
}

Fairly straightforward code – but here are a few hints:

1. Either set an Admin facebook ID in the fb:admins line or remove that line.
2. Set a default share image.
3. This snippet uses the Featured Image from WordPress. For sites that don’t use that feature, the code can easily be reworked to use an attached image instead
4. Notice that we are using the “full” size image. Facebook wants images at least 200×200 and they generate their own thumbnail, so it is best to just give them the full image and let them deal with it. Giving them a thumb that turns out to be undersized will result in no image appearing.