logo

Sue Feng Design

ā€¹ Back to blog

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.

screenshot of Facebook open graph

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! ^_^

Posted on: April 10, 2015Categories: Tutorials
ā€¹ Back to blog