Custom Open Graph Meta for Facebook Objects in WordPress

Open Graph Actions

Click the Image for Infographic

Implementing the Open Graph Protocol in your website is essential for a Social dynamic website. These Open Graph meta tags can enable many new social media features, such as better default information and image when clicking Like, Facebook Connect integration or simply for Facebook Activity streams and so on. But to take advantage of the new Facebook Aggregation API features, the meta data coming from WordPress plugins won't be sufficient.

To make custom Open Graph Actions work with your App and Website, you will need custom Open Graph Meta Data in each header based on your App's Namespace. Therefore, finding a plugin that can achieve this is as of now is unlikely and you may not want to sacrifice the other Social Media plugins and their features. Fortunately, that won't even be necessary because implementing the Open Graph API manually in your WordPress template is relatively fast and easy.

Setting Up Your Facebook Namespace and Objects

If you are going by Facebook's Open Graph Tutorial, make sure to take note of your App Namespace and Object code which you can grab by pressing Get Code in the App OG Dashboard.

Your Open Graph Object Code should look similar to the below code, which refers to an Article Object Type (yours may be different):

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# [Your_App_Namespace]: http://ogp.me/ns/fb/[Your_App_Namespace]#">
  <meta property="fb:app_id" content="[Your_App_ID]" /> 
  <meta property="og:type"   content="[Your_App_Namespace]:article" /> 
  <meta property="og:url"    content="Put your own URL to the object here" /> 
  <meta property="og:title"  content="Sample Article" /> 
  <meta property="og:image"  content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />

If you don't see your Facebook App Namespace in the code when pressing Get Code on your Object then you may want to correct your object or create a new one.

Automating Your Object Code Data

Now that we have the basis code for the Open Graph Object, we need to embed it in your WordPress's Header template file so that it automatically updates. In most cases, we will have at least two template variations, the homepage and the post page and since the Header template remains the same, we achieve the change via an if statement:

<meta property='fb:app_id' content='[Your_App_ID]'/>
    <meta property='og:locale' content='en_us'/>
    <meta property='og:site_name' content='Your Website Name'/>
<?php if ( is_home() ) { ?> 
	<meta property='og:type' content='[Your_App_Namespace]:website' />
    <meta property='og:title' content='Internet Marketing News - Maximus Business Blog' />
    <meta property='og:url' content='http://your-website-url.com' />
    <meta property="og:image" content="http://your-website-default-image-url.png" />
    <meta property='og:description' content='A static homepage description' />
<?php } else { ?>
	<meta property='og:type' content='[Your_App_Namespace]:article' />
    <meta property='og:title' content='<?php wp_title(''); ?>' />
    <meta property='og:url' content='<?php the_permalink(); ?>' />
    <meta property='og:image' content='<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>' />
    <meta property='og:description' content='<?php the_excerpt(); ?>' />
<?php } ?>

The above PHP includes are from the default WordPress library, so you should be safe to use them in your header. The the_excerpt(); snippet may need to be defined in your functions.php file to not be too long of to grab a certain number of characters by default.

If you are using an SEO plugin to write your descriptions, you may be able to use the plugins description function for your og:description as well. To use the meta description from Yoasts WordPress Plugin, for example, you would replace the above with:

<meta property='og:description' content='<?php echo wpseo_get_value('metadesc'); ?>' />

Debugging & Confirming your Open Graph Object

After implementing OG meta data with your namespace and object, and also confirmed that it was created correctly on your Facebook App Open Graph Dashboard, then you can verify this by visiting the Facebook Open Graph Debugger. If everything was done right, you should see something similar to the image on the right.

2 Responses

Ali
Hi thanks for the guide, do you know how to add Open graph code or implement for categories or any other way to add Open graph to individual post, I have site mysongs.pk, and I have different type of posts i.e. video, audio, news, articles, pictures so I want to use Open graph for each.
Said on Sep 14, 2012 by Ali - Reply
- Maximilian Ruthe
  The above code would apply for custom post types, but if you do want a different output you can use: get_post_type() ; to get the current post type and extend the above: if ( 'your-post-type' == get_post_type()) { You can also use: if (is_tax('your_custom_taxonomy')) { for custom taxonomies. or: if (is_category( 'video' )) { for a specific category. Again, the above is useful only if this is for a facebook app, otherwise the WordPress SEO Plugin can do all the above if you activate the open graph meta output option.
  Said on Sep 14, 2012 by Maximilian Ruthe - Reply