Open Graph tags (OG tags) seem to be the must-have if you want your website to be shared on Facebook. While many plugins are able to add Open Graph Tags automatically for you, what happens if you need shareable videos that play inline on Facebook, which is only possible with custom Open Graph tags? (This will be covered in another post!)
I decided I would serve custom OG tags for video pages, then add in fallback code for everything else. I found Jason Manheim’s tutorial and Yoast’s code, but the og:description code didn’t work and the regex statement for images was broken (I think some characters needed to be escaped). Also, these tutorials are a bit old (2011), so here’s an updated tutorial for 2014!
If you have conditional statements for your Open Graph tags, you can serve your customized OG tags first, then add this as the content for the “else” statement in the head of your header.php file:
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:type" content="<?php if (is_single() || is_page()) { echo 'article'; } else { echo 'website';} ?>"/>
<meta property="og:image" content="<?php echo get_fbimg(); ?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:description" content="<?php echo get_post_meta($post->ID, '_yoast_wpseo_metadesc', true); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:app_id" content="YOUR_APP_ID"/>
I have the Yoast Meta Description outputting for the og:description tag. If you have a different SEO plugin installed, please change this to the meta key name for the meta description.
You also have to add this to your functions.php file, substituting your image URL in line 27:
add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}
add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}
function get_fbimg() {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
if ( has_post_thumbnail($post->ID) ) {
$fbimage = $src[0];
} else {
global $post, $posts;
$fbimage = '';
$output = preg_match_all('/<img[^>]+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
if(isset($matches[1][0]) ){
$fbimage = $matches[1][0];
} else {
return false;
}
return $fbimage;
}
if(empty($fbimage)) {
$fbimage = "http://www.yourdomain.com/path-to-your-image/your-fallback-default-image.jpg";
}
return $fbimage;
}
Also, make sure the HTML tag in your header.php file looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
This is all you need to add Open Graph Protocol tags to your WordPress theme without a plugin.
