How to add the Facebook Open Graph protocol meta tags to WordPress and easily add a Facebook Like button and other Social Plugins to Thesis, Genesis, etc.

Add Facebook Open Graph Protocol Meta Tags to WordPress

Written by in Tutorials |

This is part 2 of 7 in the Facebook Social Plugins series:

Open Graph Protocol LogoThe <meta> tags allowed by the Open Graph protocol allow you to specify structured information about the web pages on your site. The more information you provide about a particular page, the easier it is for that page to become indexed in the appropriate places within Facebook.

The Open Graph protocol enables you to integrate your Web pages into the social graph. This means when a user clicks a Like button on your page, a connection is made between your page and the user. The structured data you provide via the Open Graph protocol defines how your page will be represented on Facebook. ~ Open Graph protocol

Suggested <meta> Properties

The following two lines add the Open Graph protocol and Facebook FBML XML namespaces to the <html> tag. This basically just differentiates element or attribute names from XML vocabularies.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml"
      dir="ltr" lang="en-US">

The following <meta> tags define your content and connect your page with Facebook. This should be added to your <head> tag.

<meta property="og:title" content="TITLE"/>
<meta property="og:type" content="CONTENT TYPE"/>
<meta property="og:image" content="LINK TO IMAGE"/>
<meta property="og:url" content="URL"/>
<meta property="og:description" content="DESCRIPTION"/>
<meta property="og:site_name" content="WEBSITE NAME"/>
<meta property="fb:admins" content="FACEBOOK USER ID"/>
<meta property="fb:app_id" content="FACEBOOK APP ID" />

What They Mean

og:title – The title of your page or article.
og:type – For most, this is going to be “article” but there are many other supported types.
og:image – The URL to the image associated with the page.
og:url – The URL or permalink to the page.
og:description – A brief description of your page.
og:site_name – The name of your website.
fb:admins – Your Facebook user ID.
fb:app_id – The App ID that you acquired when you created a Facebook App.

How to Find Your Facebook User ID

If you already changed your profile to use a vanity URL (e.g. http://facebook.com/jasonman) then go to your profile page and click your profile picture. The URL of the next page should be similar to this:

http://www.facebook.com/album.php?profile=1&id=508514291

My User ID is in red.

Adding the XML Namespaces

For General WordPress Users

Open up your themes header.php file or equivalent and find the html tag. Add the following namespaces (in red):

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml"
      dir="ltr" lang="en-US">

For Thesis Theme Users

Open your custom_functions.php file and add the following:

add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
  return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
  return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}

Adding the OG Meta Tags

For General WordPress Users

Open your themes header.php file or equivalent and add the following before the closing </head> tag:

<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:type" content="<?php if (is_single() || is_page()) { echo 'article'; } else { echo 'website';} ?>"/>
<meta property="og:image" content="<?php echo get_fbimg(); ?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:description" content="<?php echo $post->post_excerpt; ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:admins" content="your_facebook_user_id"/>
<meta property="fb:app_id" content="your_facebook_app_id"/>
<meta property="fb:page_id" content="your_facebook_page_id"/>

Then open your themes functions.php file and add the following:

function get_fbimg() {
	$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
		if ( has_post_thumbnail($post->ID) ) {
		$fbimage = $src[0];
		} else {
			global $post, $posts;
			$fbimage = '';
			$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i',
			$post->post_content, $matches);
			$fbimage = $matches [1] [0];
		}
		if(empty($fbimage)) {
		$fbimage = "http://mydomain.com/my-default-image.jpg";
		}
	return $fbimage;
}

The above code will first look for a featured image, then for the first image in the posts content and finally, it will use a default image that you specify. Thanks to Yoast for the code.

For Thesis Theme Users

Open up your custom_functions.php file and add the following:

function add_facebook_open_graph_tags() {
	if (is_single()) {
	global $post;
	$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
	if (!$image)
		$image = 'http://mywebsite.com/my-default-image.jpg';
	?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="<?php echo $image; ?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "thesis_description", true)); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:admins" content="your_facebook_user_id"/>
<meta property="fb:app_id" content="your_facebook_app_id"/>
<meta property="fb:page_id" content="your_facebook_page_id"/>
	<?php }
}
add_action('wp_head', 'add_facebook_open_graph_tags', 99);

The above code will add the meta tags to single posts only and will pull the thesis_post_image (or the default you specify) and the Thesis SEO description.

Verify Your OG Meta Tags

Once everything is setup you can verify any page that you added the meta tags to (to make sure there are no errors) by going to Facebooks URL Linter and entering the URL of that page.

Enjoy this post? Consider sharing it: