Facebook has created a new platform of pages, groups, and interests for users to interact with. As you place the Share or Like button on your site, you are participating in the ecosystem, but only as a submission of a link to the site. Facebook has a simple API available for you interact with what the call the “social graph” – to participate in the Facebook ecosystem by having your site automatically create pages within Facebook which you can then use to interact with fans and customers in a way you never thought possible. Instead of creating your own pages for every product you have, you can use the pages on your own site to create a new channel of communication. In this tutorial, you will learn how to implement OpenGraph on your site, allowing you more control over how Share links are displayed and what happens when someone Likes your page or product.
Why Would I Want to Implement OpenGraph?
OpenGraph allows you better control over the thumbnail and description when a user shares a page and also allows you to create entries on a person’s profile when they like a product. For example, if you sell books, you can create an entry on someone’s profile under the Books section when that person Likes your page. The profile item has a link back to your site – and allows you to post updates in the future to someone’s stream for that particular book! How exciting! You get more links to your site and the ability to communicate with people that Like you.
- Provides a link under the appropriate section on someone’s profile back to your site.
- You can update people who like your page through an update to their activity stream.
- Control the thumbnail, title, and description used when someone shares your link.
Implementing OpenGraph in WordPress
You can implement OpenGraph in WordPress without using a plug-in by editing your theme, specifically the header.php theme file. Be aware that if your theme developer updates the theme in the future, your changes may get overwritten. For the most part, we use custom themes so we’re not overly concerned about the changes being overwritten, but its something you may need to consider. There is only one file which needs to be edited, header.php, so the changes don’t take too long.
1. Open up your WordPress Admin and open up the Appearance section on the left.
2. Click on Editor.
3. On the right hand side, click the Header (header.php) link. This will load the header.php file into the editor.
4. Near the top of the file, you have a line that reads something like this:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
or
<html xmlns="http://www.w3.org/1999/xhtml">
You will need to add two entries to define some reference information back to Facebook code. This extends the Facebook code to your page, allowing you to enter Facebook programming code directly onto your pages. The two entries are:
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
These are enter into the <html> tag, like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
Ensure that if you have <?php language_attributes(); ?> or other code that it is present as well inside the HTML tag.
Now, we have extended the Facebook application onto our page and we can add in the meta fields it requires.
5. Insert the appropriate meta tags for your page.
Facebook uses several meta tags to appropriate identify your content. You can autogenerate the contents of several of these meta tags in WordPress. First, let’s check to see what type of page is including the header.php (this goes on a blank line beneath your title tag:
<?php
if ( is_singular() ) {
This is a conditional template tag asking if the page it is on is a single post. We don’t need the meta tags all over your blog, right now we’re just focusing on the content pages, the blog entries.
Let’s declare $post so we can query info from the post:
global $post;
Next, we’re going assign the meta tags some info:
echo '<meta property="og:title" content="'.get_the_title().'" />' . "\n";
echo '<meta property="og:type" content="article" />' . "\n";
if ( current_theme_supports('post-thumbnails')
&& has_post_thumbnail( $post->ID ) ) {
$thumbnail = wp_get_attachment_image_src(
get_post_thumbnail_id( $post->ID ), 'thumbnail', false);
echo '<link rel="image_src" href="'.$thumbnail[0].'" />';
echo '<meta property="og:image" content="'.$thumbnail[0].'" />';
}
if ( get_the_excerpt() != '' ) {
echo '<meta property="og:description" content="'.str_replace('"','',strip_tags( get_the_excerpt() )).'" />';
}
?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="SITENAME" />
<meta property="fb:admins" content="ADMIN_ID" />
<?php
} ?>
<meta property="fb:page_id" content="PAGE_ID" />
The first line grabs the post title and inserts it into a meta tag. Next, we assign a “type” of article to the blog post. If the page is a different type of post, such as a product page or movie, you can change the post type here. Facebook supports many different types of content, including:
Activities
activitysport
Businesses
barcompanycafehotelrestaurant
Groups
causesports_leaguesports_team
Organizations
bandgovernmentnon_profitschooluniversity
People
actorathleteauthordirectormusicianpoliticianpublic_figure
Places
citycountrylandmarkstate_province
Products and Entertainment
albumbookdrinkfoodgameproductsongmovietv_show
For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help uniquely identify products.
Websites
blogwebsitearticle
The ability to show up on a user’s profile and the ability to post updates to a user are only available for the first sets of product types – things that Facebook considers a physical product. An article is not a physical product, so you lose the ability to post stream updates to users with the content type of article.
If you have multiple types of products on your site and they are classified by category, you could change the type based on the category, like this:
<meta property="og:type" content="<?php if (in_category('tv-show')) {
echo 'tv-show'; }
elseif (in_category('movie')) {
echo 'movie'; }
else {
echo 'article'; } ?>">
If this post is in the category “tv-show” it will insert a meta tag referring to the content as a tv show, if it’s a movie, it will echo movie, and finally, it will echo an article if its neither.
Next, we display two meta tags to suggest a recommended thumbnail to Facebook. We use WordPress’s built-in Featured Image system to pull the URL for the thumbnail and display it in the meta tag. We do that with this code:
if ( current_theme_supports('post-thumbnails')
&& has_post_thumbnail( $post->ID ) ) {
$thumbnail = wp_get_attachment_image_src(
get_post_thumbnail_id( $post->ID ), 'thumbnail', false);
echo '<link rel="image_src" href="'.$thumbnail[0].'" />';
echo '<meta property="og:image" content="'.$thumbnail[0].'" />';
}
After the thumbnail, we set a meta tag with the description from the excerpt:
if ( get_the_excerpt() != '' ) {
echo '<meta property="og:description" content="'.str_replace('"','',strip_tags( get_the_excerpt() )).'" />';
}
I stripped out double quotes (“) as it wouldn’t work in a meta tag.
Next, set the URL of the page:
<meta property="og:url" content="<?php the_permalink(); ?>" />
Then, set the site name:
<meta property="og:site_name" content="SITENAME" />
You could programmatically set the site name, but I like to manually control how it displays. In this tag, replace SITENAME with however you want your site name displayed in Facebook.
Finally, we set the Facebook admins, a comma delimited list of the Facebook user IDs of the individuals who administer the site. You can find the Facebook user ID by going to a user’s profile, hovering your mouse over the profile picture, and copying the number showing in the link in your browser window. We close our if(is_single()){ code before the page_id meta tag as we can use that meta tag for Facebook Insights for Domains, a different feature to track usage on your site. We’ll discuss how to use that in a later tutorial. Enter your PAGE_ID in place of that text. You can find the page ID by navigating to your Facebook Page you’ve setup for your business and hovering your mouse over the thumbnail image for the page. Look at the link in your browser and copy that number.
<meta property="fb:admins" content="ADMIN_ID" /> <?php } ?> <meta property="fb:page_id" content="PAGE_ID" />
So, all together, your header.php might look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><title>This is my new product page</title><?php if ( is_singular() ) {global $post;echo '<meta property="og:title" content="'.get_the_title().'" />' . "\n"; echo '<meta property="og:type" content="article" />' . "\n"; if ( current_theme_supports('post-thumbnails') && has_post_thumbnail( $post->ID ) ) { $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail', false); echo '<link rel="image_src" href="'.$thumbnail[0].'" />'; echo '<meta property="og:image" content="'.$thumbnail[0].'" />'; } if ( get_the_excerpt() != '' ) { echo '<meta property="og:description" content="'.str_replace('"','',strip_tags( get_the_excerpt() )).'" />'; } ?> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:site_name" content="Learnthat.com" /> <meta property="fb:admins" content="55567890" /> <?php } ?> <meta property="fb:page_id" content=987654321" />This will allow the single post to interact with Facebook in a new way.
6. Test Your Code Using Lint
If you’d like to test your code, Facebook offers a tool at: http://developers.facebook.com/tools/lint/
Enter the URL to one of your pages and click Lint.
