Adding the Open Graph Protocol to Your WordPress Theme
Earlier this week I showed you how to add the Open Graph Protocol tags from Facebook to your website and took you through how the different tags work. At the end of the article, I promised a follow-up article on how to add these tags to WordPress, as it involves using the proper template tags. So in this article, I will show you just that: How do add the Open Graph protocol tags to your WordPress theme.
If you are unfamiliar with the Open Graph Protocol, I encourage you to go back and read my earlier post about it.
Did you came here just to grab the code? Skip the article and go right to the bottom!
There Are Three Ways…
You can go about adding the Open Graph Protocol tags to your WordPress theme in three different ways:
- Right into your header.php.
- Into your functions.php and calling the header hooks.
- Using a plugin to do the work.
For this tutorial, we are going to use the second way, creating a function that adds these tags by calling the wp_head hook. Why you ask? By adding the code in functions.php, it is easier to change your header file out and keep this snippet when creating new themes. It is ultimately more flexible and cleans up your header.php file.
As an added bonus, it helps you if you have more than one header.php file by just hooking into the wp_head(); function. Instead of adding it to many files, you only need to change this once.
So Let’s Create The Functions!
To add the Open Graph Protocol tags, we need two functions. One for the language attributes, hooking into the <html> tag, and one for the actual meta tags themselves, hooking into the wp_head section which has to be called in the header.php file.
Adding The Language Attributes
When it comes to the language attributes, the code is very simple and straightforward. All we are doing is creating a function (so that we can pass it on to the language_attributes hook) and having it output the correct piece of code.
/**
* Adds Open Graph Language Attributes
**/
function add_opengraph_lang($output) {
$output = 'xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_lang');
Dropping this code anywhere in your functions.php will make sure the two xmlns attribute definitions show up in the file source of all pages.
Adding the Open Graph Protocol Meta Properties
The code for the meta properties is slightly longer but isn’t that much more complicated. The only reason why it is longer (apart from containing more fields) is because we need to use some logic (if-statements) to customize the output depending on three factors:
- The page is a single post or page
- The page is the front page
- The post/page has/hasn’t a custom thumbnail
Making It Look Good
First in the function, I make sure to add a line break and a comment just to clean up the code and make it nicer to view in the source.
Setting The Tags That Don’t Change
Next up, there are a few meta tags that do not depend on the three factors. The first of these tags is the compulsory Facebook user ID which you will need to replace with your own ID. You can find our your ID by going to this link, replacing erikbernskiold with your own Facebook username.
Single Pages/Posts Require Specific Tags
Now begins the logic. For single posts or pages we want Facebook to display the post or page title as well as setting its “type” parameter to be “article” in accordance with their guidelines.
Front Pages and Main Blog Page Needs Custom Treatment
For the front page however, we want to make sure it just doesn’t simply say “Home” when viewed on Facebook. This would be the case if a custom front page is used on the site. In addition to this, we are checking to see if the page is the home page, a denomination used by WordPress to indicate the blog listing page. Should we just get “the_title” on the blog page, we would end up with the title of the first post.
Finally here we define the content type to be “website”, a generic term that is used for the home page without a clear focus.
Checking For Post Thumbnails
If your blog post has a custom post thumbnail added to it, this next snippet automatically grabs that to use as the preview image. If you do not however, as will be the case with many pages, including the home page, a default image must be specified to be used instead.
Making It Look Nice Again
Finally we finish up with a closing comment and a clean line break.
The Code For This Function
Now that I’m done explaining what the code does, here it is:
function add_opengraph() {
global $post; // Ensures we can use post variables outside the loop
echo "\n <!-- Start Facebook Open Graph Protocol --> \n";
// Start with some values that don't change.
echo "<meta property=\"fb:admins\" content=\"YOUR FACEBOOK USER ID\"/>\n"; // Insert your Facebook user ID in here
echo "<meta property=\"og:site_name\" content=\"". get_bloginfo('name') ."\"/>\n"; // Sets the site name to the one in your WordPress settings
echo "<meta property=\"og:url\" content=\"" . get_permalink() . "\"/>\n"; // Gets the permalink to the post/page
if (is_singular()) { // If we are on a blog post/page
echo "<meta property=\"og:title\" content=\"" . get_the_title() . "\"/>\n"; // Gets the page title
echo "<meta property=\"og:type\" content=\"article\"/>\n"; // Sets the content type to be article.
} elseif(is_front_page() or is_home()) { // If it is the front page or home page
echo "<meta property=\"og:title\" content=\"" . get_bloginfo('name') . "\"/>\n"; // Get the site title
echo "<meta property=\"og:type\" content=\"website\"/>\n"; // Sets the content type to be website.
}
if(has_post_thumbnail( $post->ID )) { // If the post has a featured image.
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo "<meta property=\"og:image\" content=\"" . esc_attr( $thumbnail[0] ) . "\"/>\n"; // If it has a featured image, then display this for Facebook
} else {
$main_image = "http://example.com/image.jpg"; // Replace this with a link to a default preview image.
echo "<meta property=\"og:image\" content=\"" . $main_image . "\"/>\n";
}
echo "<!-- / End Facebook Open Graph Protocol --> \n \n";
}
add_action( 'wp_head', 'add_opengraph', 5 );
I Just Want the Code!
If you came to this article and just want the code to copy and paste, this section is for you. Just paste the following code into your functions.php file, setting your Facebook User ID and default image where told to.
/**
* Adds Open Graph Language Attributes
**/
function add_opengraph_lang($output) {
$output = 'xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_lang');
/**
* Adds Open Graph Tags to Header
**/
function add_opengraph() {
global $post; // Ensures we can use post variables outside the loop
echo "\n <!-- Start Facebook Open Graph Protocol --> \n";
// Start with some values that don't change.
echo "<meta property=\"fb:admins\" content=\"YOUR FACEBOOK USER ID\"/>\n"; // Insert your Facebook user ID in here
echo "<meta property=\"og:site_name\" content=\"". get_bloginfo('name') ."\"/>\n"; // Sets the site name to the one in your WordPress settings
echo "<meta property=\"og:url\" content=\"" . get_permalink() . "\"/>\n"; // Gets the permalink to the post/page
if (is_singular()) { // If we are on a blog post/page
echo "<meta property=\"og:title\" content=\"" . get_the_title() . "\"/>\n"; // Gets the page title
echo "<meta property=\"og:type\" content=\"article\"/>\n"; // Sets the content type to be article.
} elseif(is_front_page() or is_home()) { // If it is the front page or home page
echo "<meta property=\"og:title\" content=\"" . get_bloginfo('name') . "\"/>\n"; // Get the site title
echo "<meta property=\"og:type\" content=\"website\"/>\n"; // Sets the content type to be website.
}
if(has_post_thumbnail( $post->ID )) { // If the post has a featured image.
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo "<meta property=\"og:image\" content=\"" . esc_attr( $thumbnail[0] ) . "\"/>\n"; // If it has a featured image, then display this for Facebook
} else {
$main_image = "http://example.com/image.jpg"; // Replace this with a link to a default preview image.
echo "<meta property=\"og:image\" content=\"" . $main_image . "\"/>\n";
}
echo "<!-- / End Facebook Open Graph Protocol --> \n \n";
}
add_action( 'wp_head', 'add_opengraph', 5 );
