Upload
harvard-web-working-group
View
4.036
Download
1
Embed Size (px)
DESCRIPTION
Talk presented at the April 2011 meeting of the Harvard CMS working group. Overview for Facebook open graph integration and the approaches taken at the Harvard Gazette.
Citation preview
IntegratingFacebook Open Graph
into the
Chris Traganos@ctraganos
Facebook Open Graph @Harvard
•Provides Facebook with context and resources for sharing your likes across the web
•Authentic sharing tool - vetted likes make for great referrals
IMG: http://bit.ly/dT2how
Likes & Recommendations
Open Graph bringsthe Gazette into the
Facebook ecosystem
og:title
og:type
og:image
og:url
og:description
og:site_name
These are <meta tags/>
Wordpress Implementation
Wordpress - header.php
<html <?php if(is_single()): ?>
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"xmlns:og="http://opengraphprotocol.org/schema/"xmlns:fb="http://www.facebook.com/2008/fbml"
<?php endif; ?> > <head> <title><?php the_title(); ?></title> <link rel="stylesheet" href="/css/style.css" />
<?php if(is_single()): ?>
<meta property="og:site_name" content="Harvard Gazette"/>
<meta property="og:title" content="<?php bloginfo(‘name’); ?>"/>
<meta property="og:url" content="<?php echo get_permalink($post‐>ID); ?>"/>
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>"/>
<meta property="og:image" content="<?php echo $thumb_photo; ?>"/>
<?php endif; ?>
</head>
Drupal Implementation
Drupal - page.tpl.php
<html <?php if($node‐>type == ‘story’ ): ?>
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"xmlns:og="http://opengraphprotocol.org/schema/"xmlns:fb="http://www.facebook.com/2008/fbml"
<?php endif; ?> > <head> <title><?php print $head_title; ?></title> <link rel="stylesheet" href="/css/style.css" />
<?php if($node‐>type == ‘story’ ): ?>
<meta property="og:site_name" content="<?php print t(‘Home’); ?>"/>
<meta property="og:title" content="<?php print $head_title; ?>"/>
<meta property="og:url" content="<?php print $permalink; ?>"/>
<meta property="og:description" content="<?php print $site_slogan; ?>"/>
<meta property="og:image" content="<?php print $logo; ?>"/>
<?php endif; ?>
</head>
test debug&
<fb:like><!‐‐ FB Like ‐‐>
<div id="fb‐root"></div> <script> window.fbAsyncInit = function() { FB.init({
appId: '173993602616346', status: true, cookie: true,
xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb‐root').appendChild(e); }()); </script>
<fb:like layout="button_count" show_faces="true" width="175" action="recommend" font="lucida grande" colorscheme="light"></fb:like>
<!‐‐ END OF FB Like ‐‐>
http://bugs.developers.facebook.net/show_bug.cgi?id=13263
https://developers.facebook.com/docs/guides/web/
Facebook Open GraphURL Linter
http://developers.facebook.com/tools/lint
Facebook Open GraphEngagement Metrics
http://facebook.com/insights