Open Graph for Social Media as with Facebook

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. —The Open Graph Protocol

In Facebook’s case, when you or someone shares a link from your blog in a status message, the open graph information can be used to determine what information shows up to be published with the link. Here’s an example of using Facebook’s Debugger Tool using my previous entry on Moses and the burning bush as an example. Use this tool to see what Facebook sees when you add the Open Graph meta values. This tool can also be used to clear Facebook’s cached information of your post.

Here’s a simple code snippet for WordPress that you can place in your header.php file that adds open graph values to your single post pages that can be used by Facebook.

<?php if(is_single()) { 
    echo '
        <meta property="og:title" content="' . get_the_title() . '">
        <meta property="og:type" content="article">
        <meta property="og:url" content="' . get_permalink() . '">
        <meta property="og:site_name" content="Sue Feng Design">
        <meta property="og:description" content="' . substr(preg_replace('/^s+|n|r|s+$/m', '', strip_tags($post->post_content)), 0, 400) . '">
      <meta property="og:updated_time" content="'. get_the_date('c') .'">
        ';
    if(get_post_custom_values('featured_image', get_the_ID())) {
        echo '
        <meta property="og:image" content="' . get_site_url() . get_post_custom_values('featured_image', get_the_ID())[0] . '">
        ';
    }
} ?>

In this case, the og:image is a custom field value. You may want to change this to something else. For instance you may use WordPress’ featured image. Also don’t forget to change the og:site_name to your site’s name. The general structure may be used even if you do not have a WordPress site. Happy coding! ^_^