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:

  • http://vadakkus.com vadakkus

    Hi, Thank you for this! Only code that even remotely works!
    However, I get this error when parsed using the Debugger (Linter)

    “Extracted 1 values from : : Call to undefined function get_fbimg() in on line Fatal error/home/vadakkus/public_html/wp-content/themes/Continuum-Theme/continuum/header.php72

    ” <meta property="og:image" content="”/>” is on line 72.

    Please help to fix this?

    • http://designpx.com/ Jason Manheim

      Ah, there was a mistake in the code. I’ve fixed it above. Just change this function from: function get_fbimage() { to this: function get_fbimg() { in your functions.php file.

  • http://www.myfbcover.in/ Vivek

    some how i can’t seem to get this, when i add the above code in my site, it doesn’t open complete blank white page,

    please please help me fix this.

    <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=”” /> <meta property=”fb:app_id” content=”” />

    <meta property=”fb:page_id” content=”” />

    • http://designpx.com/ Designpx

      I need your site URL.

  • Patrick Morris

    I’m trying to implement this on my Thesis blog. It works on single post, but is not showing the proper data for my homepage. Any insight into that?

    • http://designpx.com/ Jason Manheim

      The above code only works for single posts, hence the is_single(). What is the site?

      • Patrick Morris

        I should’ve asked a better questions, but the site is youthtakeaction.com. Thanks for your help

        • http://designpx.com/ Jason Manheim

          Are you wanting to add FB buttons to the homepage as well?

          • Patrick Morris

            Yes, that would be great

          • http://designpx.com/ Jason Manheim

            Sent you an email.

  • http://www.song-quotes.com Sarah

    Hi, Jason Manheim
    currently I use yoast seo plugin which is ready for Open graph, unfortunately i can’t add some lines because my poor knowledge. I want to add some OG lines and its controlling by custom field. for example:

    if is single
    meta property=”og:audio” content=”http://www.mysitesdotcom/xxx.mp3″
    else will return to normal/blank

    I prefer to use custom field because I can add the files or not, thanks in advance

  • Tyron

    Hi Jason,

    Thanks for your time in sharing up this very helpful code – especially the thesis bit. I’d like to expand on Patrick’s point. Is there an easy way to make this code work on both pages and posts? Is it as simple as: if (is_page())? or something.

    I have already create a version just for my homepage using if (is_page(home)) and providing specific inputs for that page. I did this because I wanted to make sure my logo showed when someone liked my page. I know I could do this for every page, but Im sure there is a better way.

    I note that the code does actually work for pages however the image selection is a bit random and and FB debuger gives a few errors as posted below:

    Inferred Property:The ‘og:url’ property should be explicitly provided, even if a value can be inferred from other tags.Inferred Property:The ‘og:title’ property should be explicitly provided, even if a value can be inferred from other tags.Inferred Property:The ‘og:description’ property should be explicitly provided, even if a value can be inferred from other tags.Inferred Property:The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.Tiny og:image:All
    the images referenced by og:image must be at least 200px in both
    dimensions. Please check all the images with tag og:image in the given
    url and ensure that it meets the minimum specification.
    Anyway – I’m very grateful for your help so far and any extra tips to get it to work on pages would be very much appreciated.

    URL is: http://www.findafinancialplanner.com.au

    • http://designpx.com/ Jason Manheim

      We can target anything we need by using conditional tags.

  • Cindy

    I’m getting this error ”
    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING ” on this line.  Any idea why?

    $output = preg_match_all(‘//i’,

    • http://designpx.com/ Jason Manheim

      Not sure, could be conflicting code. That particular piece of code is from this post: http://yoast.com/facebook-open-graph-protocol/

  • http://wpsites.net/ Brad Dalton

    This is a great tutorial series Jason but wouldn’t it be easier to use the new official Facebook plugin?

    Solve most of these problems a lot quicker.

  • http://www.facebook.com/daniel.pessoa.7127 Daniel Pessoa

    Hello Cindy, for the error(Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING ” on this line.)

    Try it:

    $output = preg_match_all(‘//i’,
    $post->post_content, $matches);

    i’ve add a simple slash inside the first src brackets (src=['"])

  • par

    nothing happend after i past

  • par

    nothing happend after i paste the code on header.php

    • http://designpx.com/ Jason Manheim

      Can you be more specific?

  • http://www.facebook.com/ricardo.miguel.caldeira Ricardo Caldeira

    Changed to:

    $output = preg_match_all(‘//i’,

  • http://twitter.com/viajaporperu Viajaporperu Indira

    Hi thanks for the post, it is very useful. I copied the code and changed FB id and image url. But everytime i share a post on FB, it doesn´t show the title post, instead I get this error The ‘og:title’ property should be explicitly provided, even if a value can be inferred from other tags.

  • Ida

    is it posible to do this second part of the tutorial without register the site in facebook? is it just to add fbml and the meta og:-tags?

  • Ida

    i tried the code get_fbimg() and my site crached. and went down..