Facebook Open Graph lets apps tell stories on Facebook through a structured, strongly typed API. Open Graph is a powerful tool for branding your business and start-ups provided you know how to properly use it. Facebook Open Graph were introduce early in 2010 that can allow third party application to collect information from you. For instance, if you choose to login to a music site like spotify with Facebook, the music application uses open graph technology to post what you’re listening to onto your friends’ news feeds. Friends can then comment, like, or listen to the song.
With a correct setup, Open Graph can lets you integrate apps deeply into the Facebook experience, which increases engagement, distribution and growth. When people share your blog post, the information will be properly structure with data like title, descriptions, ratings and many other element that available in Open Graph API.
Today i am going to show you how to integrate Facebook Open Graph using All in One SEO WordPress plugin very own search engine optimize post title, home title and descriptions in your WordPress Themes.
Open your WordPress Theme’s functions.php and add this code.
[php]
<?php
if( !function_exists( ‘add_opengraph_doctype’ )):
////////////////////////////////////////////////////////////////////
//Adding the Open Graph in the Language Attributes
////////////////////////////////////////////////////////////////////
function add_opengraph_doctype( $output ) {
return $output . ‘ xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"’;
}
add_filter(‘language_attributes’, ‘add_opengraph_doctype’);
endif;
if( !function_exists( ‘insert_fbog_in_head’ )):
/////////////////////////////////////////////////////////////////////
//Adding and insert Facebook Open Graph in wp_head()
/////////////////////////////////////////////////////////////////////
function insert_fbog_in_head() {
global $post, $aioseop_options;
/* Get thumbnail for Facebook Open Graph */
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "thumbnail" );
$fb_app_id = ”; /* your facebook app id – optional */
$fb_user_id = ”; /* your facebook user id */
?>
<!– start FB OPEN GRAPH code –>
<?php if($fb_app_id): ?><meta property="fb:app_id" content="<?php echo $fb_app_id; ?>" /><?php endif; ?>
<?php if($fb_user_id): ?><meta property="fb:admins" content="<?php echo $fb_user_id; ?>" /><?php endif; ?>
<?php if( is_singular() ) { ?>
<!– if currently in single post or page –>
<meta property="og:url" content="<?php echo the_permalink() ?>"/>
<!– using title from aioseo wp plugin –>
<?php if ( function_exists(‘aioseop_load_modules’)) {
$post_aioseo_title = get_post_meta($post->ID, ‘_aioseop_title’, true);
if($post_aioseo_title): ?>
<meta property="og:title" content="<?php echo $post_aioseo_title; ?>" />
<?php else: ?>
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<?php endif; ?>
<?php } else { ?>
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<?php } ?>
<!– using description from aioseo wp plugin –>
<?php if ( function_exists(‘aioseop_load_modules’)) {
$post_aioseo_desc = get_post_meta($post->ID, ‘_aioseop_description’, true);
if($post_aioseo_desc): ?>
<meta property="og:description" content="<?php echo stripcslashes($post_aioseo_desc); ?>" />
<?php else: ?>
<meta property="og:description" content="<?php echo the_excerpt(); ?>" />
<?php endif; ?>
<?php } else { ?>
<meta property="og:description" content="<?php echo the_excerpt(); ?>" />
<?php } ?>
<meta property="og:type" content="article" />
<!– use default image if thumbnail not found –>
<meta property="og:image" content="<?php if( !empty($thumbnail_src) ) { echo $thumbnail_src[0]; } elseif ( file_exists( get_template_directory() . ‘/noimage.png’ ) ) { echo get_template_directory_uri() . ‘/noimage.png’; } ?>" />
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>" />
<?php } else { ?>
<!– if currently in homepage –>
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>" />
<!– using home title from aioseo wp plugin –>
<?php if ( function_exists(‘aioseop_load_modules’)) {
$hometitle = $aioseop_options[‘aiosp_home_title’];
if($hometitle): ?>
<meta property="og:title" content="<?php echo $hometitle; ?>" />
<?php else: ?>
<meta property="og:title" content="<?php bloginfo(‘description’); ?>" />
<?php endif; ?>
<?php } else { ?>
<meta property="og:title" content="<?php bloginfo(‘description’); ?>" />
<?php } ?>
<meta property="og:url" content="<?php echo site_url() ?>"/>
<!– using home description from aioseo wp plugin –>
<?php if ( function_exists(‘aioseop_load_modules’)) {
$homedesc = $aioseop_options[‘aiosp_home_description’];
if($homedesc): ?>
<meta property="og:description" content="<?php echo $homedesc; ?>" />
<?php else: ?>
<meta property="og:description" content="<?php echo get_option(‘description’); ?>" />
<?php endif; ?>
<?php } else { ?>
<meta property="og:description" content="<?php echo get_option(‘description’); ?>" />
<?php } ?>
<meta property="og:type" content="website" />
<!– use default image if favicon not found –>
<?php if( file_exists( get_template_directory() . ‘/favicon.ico’ ) ) { ?>
<meta property="og:image" content="<?php echo get_template_directory_uri() . ‘/favicon.ico’; ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/noimage.png" />
<?php } ?>
<?php } ?>
<?php }
// add action hook in wp_head()
add_action( ‘wp_head’, ‘insert_fbog_in_head’, 5 );
// function checks out
endif;
?>
[/php]
Don’t like to get your hand dirty, download the source here
[notice type=”downloads”]Download Facebook Open Graph PHP
File type: zip File size:4 KB[/notice]
Upload both unzipped file into your current theme root, open functions.php and add this code
include( get_template_directory() . '/fb_og.php');
Final Result After Integration
Once everything in place, if anyone share your post using Facebook share button, the Facebook Open Graph API will use the more SEO Friendly and optimize post title and post description from aioseo wp plugin. You can use Facebook OG Debug tools to diagnose the new added code.
That’s all folks, if you have any question regarding the tutorial, feel free to comment here.