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 ...
Likes & Recommendations
Open Graph brings     the Gazette into the    Facebook ecosystemog:titleog:typeog:imageog:urlog:descriptionog:site_nameThe...
Wordpress Implementation
Wordpress - header.php<html <?php if(is_single()): ?>  xmlns="http://www.w3.org/1999/xhtml"   xml:lang="en"xmlns:og="http:...
Drupal Implementation
Drupal - page.tpl.php<html <?php if($node‐>type == ‘story’ ): ?>  xmlns="http://www.w3.org/1999/xhtml"   xml:lang="en"xmln...
test       &   debug
https://developers.facebook.com/docs/guides/web/<fb:like>    <!‐‐ FB Like ‐‐>      <div id="fb‐root"></div>      <script> ...
Facebook Open GraphURL Linterhttp://developers.facebook.com/tools/lint
Facebook Open GraphEngagement Metricshttp://facebook.com/insights
Thank you!   Chris Traganoschristopher_traganos@harvard.edu @ctraganos
Facebook Open Graph implementation in the Harvard Gazette
Facebook Open Graph implementation in the Harvard Gazette
Upcoming SlideShare
Loading in …5
×

Facebook Open Graph implementation in the Harvard Gazette

4,302 views

Published on

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.

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,302
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Facebook Open Graph implementation in the Harvard Gazette

  1. 1. IntegratingFacebook Open Graph into the Chris Traganos @ctraganos
  2. 2. 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
  3. 3. Likes & Recommendations
  4. 4. Open Graph brings the Gazette into the Facebook ecosystemog:titleog:typeog:imageog:urlog:descriptionog:site_nameThese are <meta tags/>
  5. 5. Wordpress Implementation
  6. 6. 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>
  7. 7. Drupal Implementation
  8. 8. 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>
  9. 9. test & debug
  10. 10. https://developers.facebook.com/docs/guides/web/<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
  11. 11. Facebook Open GraphURL Linterhttp://developers.facebook.com/tools/lint
  12. 12. Facebook Open GraphEngagement Metricshttp://facebook.com/insights
  13. 13. Thank you! Chris Traganoschristopher_traganos@harvard.edu @ctraganos

×