OpenGraph in WordPress quickly and easily

OpenGraph is an extension developed by Facebook how to enhance information usable during sharing in social networks. OpenGraph enhances meta information of your pages, in that way it differs from microdata rich snippets which identify structured data in your web content. Using OpenGraph elements you can tell to Facebook or G+ right sitename, title, description, image and content type instead of let the social network to do it own way.

There are a many plugins which easily implements OpenGraph meta tags into WordPress based blogs. But in my experience they does not work in proper way in all possible situations. For instance, they does not offer distinguish og:type meta tag between article, blog and website. It can represent issue because Facebook can consider your site or blog to be single article. Another common problem can be coexistence of OpenGraph and SEO plugins when both add OpenGraphs meta tags to your posts and end-up cancelling each other out.

So I look for another possible solution. It is based on custom PHP code. You can insert this code to the file functions.php of your WordPress theme.

// this code add OpenGraphs meta tags into header
add_filter('language_attributes', 'opengraph_scheme');
function opengraph_scheme($attr) {
$attr .= " xmlns:fb=\"http://ogp.me/ns/fb#\"";
return $attr;
}

add_action( 'wp_head', 'opengraph_elements', 5 );
function opengraph_elements() {
if ( !is_singular()) {
if ( !is_home()) return;
}

global $post;
echo "\n";

// echo "\n";
echo "\n";
if ((is_home()) || (is_front_page())) {
echo "\n";
} else {
echo "\n";
}

$desc = get_post_meta(get_the_ID(), '_aioseop_description', true);
if ($desc == "") {
$desc = get_bloginfo('description', 'display');
}
echo "\n";
echo "\n";
echo "\n";

$image = "http://www.yoursite.com/default_featured_image.png";
if(has_post_thumbnail( $post->ID )) {
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$image = $thumbnail_src[0];
}
echo "\n";
echo "\n";
}

The code is very simple. First part of snippet ensures that OpenGraph schema will be part of your html code. The second part adds OpenGraph elements to html header. The code is working only for singular parts of blogs meaning posts and pages, it does not care about list of articles, archives, tags and categories. It can be easily extended in that way.

For each singular part of blog the code distinguish between homepage and the rest. Your homepage will be considered as website, the rest is assumed to be article. Another tricky part is focused on og:description tag where SEO enabled description from All in One SEO plugin is prefered. You can change this part if you are using another type of SEO plugin. The latest trick solves issue with thumbnail image for sharing, at first it tries to use featured image of post/page, otherwise the default image is used. Please be aware the image with size different from 200px x 200px will be resized by Facebook. If you have Facebook page, you can uncomment part related to identification of Facebook admins, page or user.