In this part we will get our hands dirty and add some code to get everything ready for video posts.

Facebook post with YouTube video embedded

Creating a Custom Function in WordPress to Add the Open Graph Video Tags

We’re going to create a function to handle the placement of the open graph tags. It’s a bit better than modifying the theme directly, but our approach here still won’t be the ideal one. It’s much better to create the code to create extra boxes in the post/page edit screens to add the values (or even get them dynamically when an embedded video is detected). That approach, while ideal, is a little more involved to setup initially, so we are going to go a different route.

In this approach we will be using a PHP switch statement to check for a post/page ID and injecting values into the head tags when a match is found. In this way, you will need to modify the function to create new custom values for every post that you create that has a video. Like I said, it would be better to have extra text boxes in the post/page edit screens, but that is beyond the scope here. My initial intent was to show how this will work for any site, and I’m already going past that working it into WordPress. With that said, it should still be apparent how to make this all work for any other site by the time we are through.

Here is the code that should be added to your theme’s functions.php file:
(Note: This is for WordPress only, but it should give you the gist of what needs to be done)

function af_og_tag_insert() {
global $post;
if ( have_posts() ) : while ( have_posts() ) : the_post();
$af_description = substr(esc_attr(htmlentities(get_the_excerpt())), 0, 297);
endwhile; endif;
?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php echo $af_description; ?>" />
<?php
switch ($post->ID) {
case 3: // the post with this ID has a video embedded
?>
<meta property="og:type" content="video" />
<meta property="og:image" content="http://i1.ytimg.com/vi/MI9O5rDh0bM/hqdefault.jpg?feature=og" />
<meta property="og:video" content="http://www.youtube.com/v/MI9O5rDh0bM?autohide=1&version=3" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="420" />
<meta property="og:video:height" content="315" />
<?php
break;
default:
?>
<meta property="og:type" content="article" />
<?php
}
}
add_action('wp_head', 'af_og_tag_insert');

First off, for the link description that will share to Facebook I am just using a cleaned up version of the excerpt. Moving on, I use the post title for the title that shows up on Facebook, and the URL that Facebook will link back to is the permalink for the post (or page).

Then you have to explicitly add in a new “case” for each post/page that has a video embedded.

You get the post ID by hovering over the “edit” link on the “All Posts” screen and looking at the status bar.
Then for the image and video values you look at the source code on the video watch page on YouTube for the video that you are embedding. Do a “find” for “og:image” and “og:video” to see the values to copy over.

Now, when sharing the URL from your site onto Facebook, the video will be embedded into the Facebook post. If someone clicks the link in the post, it will go to your site, not YouTube. And well, that’s the point.

Testing the Link to Make Sure the YouTube Video Embeds

As soon as the URL is shared into Facebook, it will be “cached.” So, if your test doesn’t work and you come back to your site to make a change, it will seem like your change didn’t work, even if it did. But that’s OK, there is a quick fix. Just paste the URL in the Facebook Debugger before every test.

It’s a great tool for feedback on how Facebook views the Open Graph stuff anyways. It may provide warnings or errors to help you figure out what the web page isn’t sharing on Facebook how you’d expect.

Here’s the link.