Open Graph enable your WordPress blog

How to enable Facebook Open Graph on your wordpress blogFacebook Open Graph protocol is a new way of distributing your content on Facebook.

By adding Open Graph Meta tags on your WordPress based blog together with the Facebook Like buttons, you can get better control over how your content is displayed on Facebook, and get better possibilities of interacting with users who likes your post.

Facebook Open Graph background

To add Open Graph to your WordPress blog, you need to add additional Open Graph specific meta tags to your posts. These meta tags are used to classify and create Open Graph objects from your content.

<!-- Start Facebook Opengraph -->
<meta property="fb:admins" content="<admin id>"/>
<meta property="fb:app_id" content="<app id>" />
<meta property="og:type" content="<post type>"/>
<meta property="og:title" content="<post title>"/>
<meta property="og:site_name" content="<blog title>"/>
<meta property="og:description" content="<post description>"/>
<meta property="og:url" content="<permalink>"/>
<meta property="og:image" content="<post image>"/>
<!-- End Facebook Opengraph -->

The folloving Open Graph meta tags are mandatory:

  • og:title – The title of your object as it should appear within the graph. eg. “Open Graph enable your WordPress blog”.
  • og:type – The type of your object, e.g., “movie”. eg. “article”.
  • og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
  • og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://tips4php.net/2010/07/open-graph-enable-your-wordpress-blog

If you update the Open Graph metadata of your page, the Open Graph attributes are also updated, however og:title and og:type can only be edited until they have received 10 likes, then the attributes are locked, to ensure consistence between the pages that the users likes and the page content.

Another benefit of Open Graph is the possibility to get statistics about your pages just like you can with traditional Facebook pages. The only things required is that you associate your Open Graph Object with a Facebook account (this is included in the code example in this post), and that the admin user clicks the Like button on the page.

You can see further information about Open Graph here

Open Graph for WordPress

So adding Open Graph to WordPress is a matter of adding additional meta tags to the pages.

In this example we’ll create Open graph tags for the Post pages in WordPress, since these pages is the most likely to be liked, and most relevant to be added to Facebook.
fb:admins:is the Facebook id’s that should have access to manage the created Open Graph element. You can find your Facebook admin id by going to your Facebook page and click on the “Profile” tab. Your admin id is now displayed as part of the url.

fb:app_id: if you have an Facebook app that you wish to link the Open Graph object to, insert the id here

og:type: The type of content of the page. For blogs the type is typically “article”

og:title: Title of the post

og:site_name: Name of the blog

og:description: Short description of the post. To get this short description we’ll write a short function, that can take the first 200 characters from the post and use them as description

og:url: Permalink to the post

og:image: Image representing the post. To keep this simple, you could just insert the same image for all posts. In Tips4php each post starts with a unique image, and the Open Graph script in this post therefore dynamically takes the first image in the post and inserts it an Open Graph image.

To get started insert the code below in the functions.php file. The code retrieves the first image from the post and inserts it in the Open Graph meta tags.

function catch_that_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];

 if(empty($first_img)){ //Defines a default image
 $first_img = "/images/default.jpg";
 }
 return $first_img;
}

Next you need to open “header.php” and insert the following code:

<!-- Start Facebook Opengraph -->
 <?php if (is_single () ) { ?>
 <meta property="fb:admins" content="610171739"/>
 <meta property="fb:app_id" content="107992472585569" />
 <meta property="og:type" content="article"/>
 <meta property="og:title" content="<?php the_title() ?>"/>
 <meta property="og:site_name" content="<?php bloginfo('name') ?>"/>
 <?php
 function og_meta_desc() {
 global $post;
 $meta = strip_tags($post->post_content);
 $meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
 $meta = substr($meta, 0, 200);
 echo "<meta property=\"og:description\" content=\"$meta\"/>";
 }
 og_meta_desc();
 ?>
 <meta property="og:url" content="<?php the_permalink() ?>"/>
 <meta property="og:image" content="<?php echo catch_that_image() ?>"/>
 <!-- End Facebook Opengraph -->

That’s it. You can see further explanation of the Open Graph here. To boost opengraph, you should combine the Opengraph tags with a Facebook Like button

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

9 Replies to Open Graph enable your WordPress blog

  1. Derek Moore says:

    I believe the left curly bracket in line 2 of header.php needs to be removed as it threw parse errors until I removed it. Otherwise – GREAT!!! Works good!

  2. A small update to your code to make it cleaner, but generally brilliant!


    function catch_that_image()
    {
    global $post, $posts;
    $first_img = '';

    preg_match_all('//i', $post->post_content, $matches);
    if($matches && $matches[1])
    {
    $first_img = $matches[1][0];
    }

    if($first_img == '')
    {
    $first_img = "http://fetch.it/i/fetch_didsbury_square.png";
    }

    return $first_img;
    }

  3. It wiped out the preg match (image tag gone) and if you could replace my example image with a fake name, that would be much appreciated.

  4. Maxoud says:

    And one more addition. There could be the problem with multibyte encodings. So instead
    $meta = substr($meta, 0, 200);
    you should use
    $meta = mb_substr($meta, 0, 200);
    Also, Facebook allows description to be up to 300 characters.

  5. mark says:

    Thank you- this was incredible helpful. Do you know how I could fix the code for showing the “og:description” so that it strips odd characters like “,’,&,%, etc…?

  6. Maciek says:

    There’s no end of ” if (is_single () ) { ” clause.

    You’ve missed in row 20 of header.php.

  7. Maciek says:

    update to my previous comment : ^^ It should be : ” You’ve missed in row 20 of header.php.”

  8. Maciek says:

    Argh.. still cutting php code from comments, please correct this one :)

    Just wanted to say that You need a closing operator : ” } ” in the end of whole php code.

  9. Uroš says:

    You sir are my savior – tried a couple of solutions for the og:description meta tag and none of them worked. Yours did. Tahnk you a million times. Allready spread a good word about this site ;).

Comments are now closed for this article.