facebook open graph implementation in the harvard gazette
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.TRANSCRIPT
![Page 1: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/1.jpg)
IntegratingFacebook Open Graph
into the
Chris Traganos@ctraganos
![Page 2: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/2.jpg)
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
![Page 3: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/3.jpg)
Likes & Recommendations
![Page 4: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/4.jpg)
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/>
![Page 5: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/5.jpg)
Wordpress Implementation
![Page 6: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/6.jpg)
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>
![Page 7: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/7.jpg)
Drupal Implementation
![Page 8: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/8.jpg)
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>
![Page 9: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/9.jpg)
test debug&
![Page 10: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/10.jpg)
<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/
![Page 11: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/11.jpg)
Facebook Open GraphURL Linter
http://developers.facebook.com/tools/lint
![Page 12: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/12.jpg)
![Page 13: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/13.jpg)
Facebook Open GraphEngagement Metrics
http://facebook.com/insights
![Page 14: Facebook Open Graph implementation in the Harvard Gazette](https://reader033.vdocument.in/reader033/viewer/2022052522/5549faeab4c905e56c8b4a53/html5/thumbnails/14.jpg)