Facebook & Open Graph’s XML Nameservers
Within the opening <html> tag, the Facebook and Open Graph nameservers need to be included to tell your browser and other parsers that it can expect tags other than HTML:
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"
an example end result might look something like this:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Adding some Necessary Facebook Open Graph Tags
Now that we have the XML nameservers in place we can now add a few Facebook Open Graph data entities to the site’s header.
<meta property="og:title" content="<?php the_title(); ?>"/> <meta property="og:description" content="<?php if ( function_exists('wpseo_get_value') ) { echo wpseo_get_value('metadesc'); } else { echo $post->post_excerpt; } ?>"/> <meta property="og:url" content="<?php the_permalink(); ?>"/> <meta property="og:image" content="<?php echo get_fbimage(); ?>"/> <meta property="og:type" content="<?php if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"/> <meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
A note about og:description – I have used the Meta Description from Yoast’s WordPress SEO plugin to generate og:description. If the plugin is not installed then the post’s excerpt will be used instead. On another note, og:descriptioncan allow up to 300 characters. If you’re advanced enough you could replace the META description with a custom field and use that to generate a totally unique description just for Facebook!
Generating the best Image Thumbnail
In the example above, I have used the function get_fbimage();to generate the image thumbnail. Here’s that function:
function get_fbimage() {
$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);
$fbimage = $matches [1] [0];
}
if(empty($fbimage)) {
$fbimage = http://mydomain.com/default-image.jpg;
}
return $fbimage;
}
This code does 3 things:
- Looks for a featured image
- If there isn’t a featured image, it looks for the first image within
the_content - If there isn’t a featured image or any image within
the_contentthen use a default image
og:type – categorising your page type
og:type can describe the type of content the page has. This can encompass many things such as a website, blog, article, product, TV show and many more. Below is a simple example of treating each page and post as an article, and everything else within the site as a website:
<meta property="og:type" content="<?php
if (is_single() || is_page()) { echo "article"; } else { echo "website";}
?>"/>
There are several types of page that can be found here. One way you could make og:type more advanced using custom fields. Let’s say I have just written a post about a book I have just read, we can use book within the og:type. I can now insert a custom field named og-type and insert the value book. Once I’ve done this I can now edit the example above to create something more advanced:
<meta property="og:type" content="<?php
$ogtype = get_post_meta($post->ID, 'og-type', true);
if ($ogtype != '') {
echo $ogtype;
} elseif (is_single() || is_page()) {
echo "article";
} else {
echo "website";
}
?>"/>
The code above looks for the value of the custom field named og-type. If there isn’t a value then it to default values as shown in the basic example.
Some other Facebook Open Graph Tags
The Open Graph tags above are the required tags needed. Below are additional tags you can use to provide even more in-depth detail about that page or site.
Page ID
You can connect your WordPress site to Facebook via Facebook Insights. Once connected, you can view analytics for all sorts of Facebook features. Insert this code to connect your site to Facebook Insights:
<meta property="fb:page_id" content="1234567890" />
App ID
When you add any Facebook App, such as Facebook Comments, to your site you need to link the site to your Facebook Platform application:
<meta property="fb:app_id" content="1234567890" />
Admins
With some Facebook Platform applications, such as Facebook Comments, you don’t need this tag as the admins are managed within the App itself. However, there are certain Facebook Platform applications that will need more management. This tag can be used sitewide or per page so is more useful on larger sites with multiple administrators and moderators. Simply create a comma separated list of admins by profile ID:
<meta property="fb:admins" content="1234,2345,3456" />
You can find your Profile ID by hovering over your Facebook profile picture and taking note of the value after set=pa., for example, mine is ?set=pa.223100916
Contact Info
You can embed your email adress, phone & fax numbers like so:
<meta property="og:email" content="<?php bloginfo('admin_email'); ?>"/>
<meta property="og:phone_number" content="+44 123 456 7890"/>
<meta property="og:fax_number" content="+1-415-123-4567"/>
Note that I have set og:emailto the WordPress admin email. You may want to change this if the admin email is not one for public knowledge.
Location
As we know, local search is on the increase. Open Graph have added location based tags which can be used for things such as Facebook Places:
<meta property="og:latitude" content="37.416343"/>
<meta property="og:longitude" content="-122.153013"/>
<meta property="og:street-address" content="1601 S California Ave"/>
<meta property="og:locality" content="Palo Alto"/>
<meta property="og:region" content="CA"/>
<meta property="og:postal-code" content="94304"/>
<meta property="og:country-name" content="USA"/>
Audio and Video
Adding audio and video can be very useful for Open Graph. A good example of how this is used is where you can click a video in Facebook and it will play it right there and then, instead of you having to visit the page directly to view it. Here’s an example of how this can be used:
Audio (only supports MP3):
<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />
Video (only supports SWF):
<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
That wasn’t so painful, was it?
You can check that your tags have been implemented correctly by using Facebook’s URL Linter. You can find more information about the Facebook Open Graph protocol at ogp.me as well as at facebook.com.
Source